Email Deliverability

For good email deliverability, we test all design inputs with the following three parameters:

1. Template width
2. HTML size
3. Fallback Fonts used

If the design requires no changes, we mark it green. If it requires minor changes, we mark it yellow. If the design requires major changes and could lead to issues like getting marked as spam, or clipping, we mark it red.

Let’s discuss all test parameters individually:

Template width

Less than 320px:

We flag email templates with <320px width as red. The ideal template width for a good desktop experience is between 600-640px. However, we also allow you to add a breakpoint for a better mobile experience.

How to fix?

Redesign the template at 600-640px width size and add breakpoints for the elements that you want to change at 320px or lower.

320px to 599px:

320-599px, although not ideal, is still better than <320px templates because it’s close to the template size we recommend. Templates with 320-599px width are marked yellow.

How to fix?

Redesign the template at 600px-640px and add breakpoints for the exact dimension you prefer between 320-599px.

600px to 640px

As per the industry standards, 600px-640px is the ideal size for an email template. Therefore, we mark it as green.

640px to 800px:

Templates with 640-800px width are marked yellow as they are above the ideal template width.

How to fix?

Redesign the template at 600px-640px.

More than 800px:

800px width is the maximum size for desktop clients. Therefore, any width size above that is marked red.

How to fix?

Redesign the template at 600px-640px.

HTML size

Above 100KB

Emails with more than 100KB size have a higher risk of getting clipped by Gmail or being marked as spam by email clients. Therefore, we mark this as red.

How to fix?

Here are a few possible fixes to reduce email size:

1. Use embedded image links instead of Base64 images.
2. Turn on Minification from the settings.
3. Reduce content from your figma design.

Below 100KB

Emails below 100KB size are ideal. Therefore, they are marked green.

Add Custom Web fonts in email

Kombai provides support to add custom web fonts in email design. Custom fonts used in the design are auto-identified and listed in the settings.

All custom fonts that are available in Google Fonts are directly imported inside the code. In case, your design has a font that is not available in Google Fonts, you can specify the URL of that font in the settings.

Once you add the URL of the font, we add a link tag in the head of the HTML code and import that custom font.

How to add?

1. Go to Settings.
2. Go to Add custom web fonts in email.
3. Add the link of your font in the adjacent input box.
4. In the Select font dropdown, select the style you are using in the design.
5. Save the settings.

How to get the URL of your custom font?

From Adobe Fonts

1. Choose the font to use, create a web project, add your font to the web project. For more information, visit this doc (opens in a new tab).
2. Find the embed link for your web project. You can find it under the web project section under your Adobe Fonts account.

3. Copy the link within the href attribute of the link tag.

From Other sources

1. Go to the source where your font is hosted.
2. Search for the embedded code with a link tag.

3. Copy the link inside the href attribute of the link tag.

Fallback Fonts used

If you are using a non-web safe font in your email, consider adding a fallback font. We have support for adding a fallback font if a non-web safe font is used.

How to fix?

Add fallback fonts for all the non-web safe fonts that you have used in the design.

Client Compatibility

After thorough testing, we have identified a list of 14 CSS properties whose usage is dependent upon the user’s design. The common behavior among all these properties is that they have partial or no support for at least one of the Email Clients we support.

We support the following Email Clients across the listed operating systems:

1. Apple Mail(iOS)
2. Apple Mail(macOS)
3. Gmail(Android)
4. Gmail(iOS)
5. Gmail(Webmail)
6. Outlook(Android)
7. Outlook(iOS)
8. Outlook(macOS)
9. Outlook.com
10. Outlook(Windows)
11. Yahoo(Android)
12. Yahoo(Webmail)
13. Yahoo(iOS)

If your design contains elements that trigger the usage of these properties, you should consider modifying the Figma design to remove properties that have partial or no support across the above-listed email clients. Here’s the list of all 14 CSS properties and how to modify the Figma design:

1. background-blend-mode

background-blend-mode CSS property is used in our code when there is a blend mode(other than the default value) in the Figma design.

How to fix?

1. Select the Figma node that is using blend mode.
2. Open the color filler from the Fill section and click Blend Mode.
3. Select the default value: Normal or Passthrough(if it is a layer).

2. background-image

background-image CSS property is used when when there's an overlap of an image with some other Figma Node.

How to fix?

Fix the overlap of Figma elements(see the example below).

3. border

border CSS property is used in the generated code when the Stroke property of Figma is used in the design.

How to fix?

1. Select the Figma node that is using the Stroke property.
2. Click the minus button in the Stroke section to remove the stroke.

4. border-radius

border-radius CSS property is used in the generated code when the Corner Radius is enabled for a node in Figma.

How to fix?

1. Select the node that is using the Corner Radius.
2. Go to Corner radius in the Frame section and set it to 0.

5. box-shadow

box-shadow CSS property is used in the generated code if the Figma design is using Drop shadow or Inner shadow.

How to fix?

1. Select the Figma node that is using the shadow effects.
2. Click the minus button for Drop shadow or Inner shadow, whichever you are using, in the Effects section.

6. font-weight

font-weight CSS property is used in the generated code when the Figma design contains a text node with weight other than the default.

How to fix?

1. Select the Figma node for which you have changed the Font Weight.
2. Set it to Regular in the Text section.

7. letter-spacing

letter-spacing CSS property is used when the default letter spacing is modified for a text node in Figma.

How to fix?

1. Select the text node for which you have modified the letter spacing.
2. Set the letter spacing to 0.

8. linear-gradient()

liner-gradient() CSS property is used if a linear gradient is used in Figma.

How to fix?

1. Select the Figma node with the linear gradient.
2. In the Fill section, replace the gradient with a solid color or click the minus button beside Linear to remove it.

9. line-height

line-height CSS property is used when the default line height in Figma is modified.

How to fix?

1. Select the text node for which you have modified the line height.
2. Set the line height to auto.

10. opacity

opacity CSS property is used if the default opacity is changed in the Layer section for a Figma node.

How to fix?

1. Select the node for which you have modified the opacity.
2. Set the opacity to 100% in the Layer section.

11. radial-gradient()

radial-gradient() CSS property is used if there’s a radial gradient present in the Figma design.

How to fix?

1. Select the Figma node with the radial gradient.
2. In the Fill section, replace the gradient with a solid color or click the minus button beside Radial to remove it.

12. text-decoration

text-decoration CSS property is used if an underline or strikethrough decoration is present in the Figma design.

How to fix?

1. Select the Figma node with text decoration.
2. Click the three dots in the Text section and select None in Decoration.

13. text-transform

text-transform CSS property is used when the default case for a text node is changed in Figma to Uppercase, Lowercase, or Title Case.

How to fix?

1. Select the text node you modified.
2. Click on the three dots in the Text section and select As typed in Case.

14. rgba()

rgba() CSS property is used if the default opacity for a node is changed in the Fill section.

How to fix?

1. Select the node for which you have modified the opacity.
2. Set the opacity to 100% in the Fill section.