Email Template Best Practices

Fonts Compatibility

The fonts you choose should display as expected in the email builder and the web version of your email. But, they are displayed differently depending on the device and email client your recipients use. This is because not all devices have the same fonts, and not all email clients support web fonts.

For more information on the most commonly used fonts and their compatibility percentage with Windows and Mac platforms, refer to CSS Font Stack.

There are two types of fonts used when you build an email:

1. System Fonts
2. Web Fonts

Inline CSS

Ensure that you always keep your styles simple either by writing them inline or use a conversion tool. Gmail, in particular, does not support embedded or external CSS, and many clients only support the most basic formatting styles.

Images in Emails

Ensure that each image contains an “alt attribute” and try to avoid heavy design images to convey the message. Due to the existence of image blocking in most email clients, most recipients will see the email with images turned off.

The following are some of the checklist items to be considered while using images in email builder:

• Ensure that design for images is off.
• Always include Alt Attributes.
• Use images as GIF or JPEG files for best results.
• Set border attributes to 0.
• Add display style “block” or “inline-block” to images for preventing gaps under the images.
• Always include height and width attributes.
• Use absolute references rather than relative.
• Try to avoid background images.
• Use the align attribute for containers or images to align right, left, center.

Shorthand

In certain scenarios, unexpected results occur when developers use shorthand in HTML emails. To avoid this issue, always use the full six digits for HEX color codes instead of RGB colors and do not combine multiple CSS properties into a single shorthand.

Tables for Layout

Use tables to structure the layout of the email to avoid display issues because many email clients do not support CSS positioning, floats, and clears. Ensure that the user properly nests the tables and closes all open tags.

Test the Emails 

Email clients are famous for making unannounced changes that affect the actual display of the intended email. Make a habit of testing every message in all the major clients before sending the email. 

Mobile-Friendly Font Sizes

When designing a mobile email, you must ensure that it is easily readable with one eye. Using media queries to increase an email’s text size when it is viewed on a mobile device is one of the easiest things you can do to make an email better for readers. Guidelines for achieving minimum font size of 16px:

• Apple recommends 17 to 22px
• Google recommends 18 to 22px. 

Usage of MS Word HTML files

Microsoft Word adds additional Microsoft Office specific markup tags that are not typically found in HTML files when HTML file saved using Microsoft Word. The additionally created code causes issues in many HTML editors because it cannot understand office-specific codes. Therefore, you might see only part of the HTML render properly, or you may not see anything at all.

Browser

Styles and Links

Element Selectors

Box Model

Table

Fonts

Color and Background

Position and Display

Lists

Desktop

Styles and Links

Element Selectors

Box Model

Table

Fonts

Color and Background

Position and Display

Lists

Mobile

Styles and Links

Element Selectors

Box Model

Table

Fonts

Color and Background

Position and Display

Lists

Email Clients Supporting Dark Mode

These clients and apps currently offer Dark Mode either as a setting that the user can set manually or by automatically detecting the user’s preferred color scheme:

Mobile Apps

• Gmail App (Android)

• Gmail App (iOS)

• Outlook App (Android)

• Outlook App (iOS)

Desktop Clients

• Apple Mail

• Outlook 2019 (Mac OS)

• Outlook 2019 (Windows)

Web Clients

• Outlook.com

But just because all these email clients offer a way to set their UI to a dark color scheme, that does not imply that they handle your emails the same ways. An email that looks great in one client might look broken in another. Now, Dark Mode is adding another layer of complexity. In fact, there are various ways a Dark Mode email client might deal with your code.

The following table indicates the dark mode email support chart as of November 2019:

Target Dark Mode Users with Own Styles

Now we know how popular email clients in Dark Mode handle your regular HTML emails. But what if you would like to apply your own Dark Mode styles that could very well differ from email clients’ default color schemes. Here are two methods you can use:

• @media (prefers-color-scheme: dark)
  This method works in very much the same way as applying a block of styles inside a @media query for your Mobile Responsive view, except this CSS block targets any user interface that’s set to Dark Mode.
• [data-ogsc] and/or [data-ogsb]
  While it seems like a pretty narrow market share, it’s relatively easy to simply duplicate the @media (prefers-color-scheme: dark) styles you already applied and simply add the appropriate [data-ogsc] and/or [data-ogsb] prefixes to each CSS rule.

The following table indicates dark mode targeting email client support table:

When you are applying these styles to your emails for use across email clients, keep the following things in mind: