Creating email content can be difficult when HTML and CSS support still needs to catch up to what is capable on the web. Not only that, but what’s supported varies from email client to email client, so your Gmail users may be getting perfectly tailored emails while your Outlook users are seeing a jumbled mess. 

To reach as many of your users as possible, and give them all as similar of an email experience as possible, here are some do’s and don’ts you should keep in mind when building out your emails.

DON’T Use Text in Images To Relay Important Information

Many email clients offer an option for users only to have images downloaded when the user prompts it to do so. Some clients, like Outlook, have this turned on by default. So if you have essential text embedded directly in your images, some users won’t see it at all. This especially becomes a problem in email designs where the entire email comprises of images or your all-important call to action is an image.

Email without image blocking turned on vs. with image blocking turned on.

DO Include Alt Text on Non-decorative Imagery

In some cases, an image conveying important information or adding to the email’s nuance may be inevitable. In these situations, it’s important to remember to add descriptive alt text to the image. This way, if the user has image downloading turned off, they’ll still see text that conveys the image’s meaning.

Image blocking turned on with alternative text on images.

DON’T Use Unsupported Elements Like Custom Fonts, Backgrounds, and SVGs

@font-face and @import, the two CSS at-rules used to pull in custom fonts, are only supported by around 30% of the major email clients. Background images are supported by approximately 60%. Image formats (other than PNG, JPG, and GIF) have support varying from 0-88%. It’s important to always test your emails in at least the major email clients (Apple, Gmail, Outlook, Yahoo, etc.) to ensure your content works as expected.

DO Provide Fallbacks for Elements That Aren’t Fully Supported

If you use components that do not have full support across all the email clients you are targeting, you can often provide fallbacks for unsupported clients.

• Include fallback fonts in the font-family attributes in your CSS (ex: font-family: ‘My Custom Font,’ Helvetica, Arial, sans-serif;) OR relent to using only web-safe fonts to ensure compatibility.
• Add a background color in addition to a background image so clients that don’t support 
  background images will see a background color instead.
• Convert image types that don’t have full support to one of the three fully supported image types (PNG, JPG, GIF)

Email in Outlook on Windows vs on MacOS with fallbacks for custom font and background image.

DON’T Add Forms to Your Email

Only around 44% of major email clients support forms, and support for the many different fields and attributes is sporadic and buggy. Additionally, forms will often also lead your email to be marked as spam or even malicious.

DO Use Parameters to Pre-fill Hubspot Forms

Buggy form support doesn’t mean you need to disclude form submissions from your email marketing entirely. You can link to a landing page using a call to action button or even multiple links to create a choice-like design. With HubSpot forms you can add parameters to the URLs in your email, using the form field names, to pull any available information into the form. Pre-filling out forms lessens the work a user has to do to submit a form, reducing the impact of being redirected away from the email.

DON’T Use Video or Other Object Embeds

Embeddable content like that from YouTube, Vimeo, Wistia, etc., is completely unusable in email because they need JavaScript. JavaScript in email is a massive security risk, and thus most clients do not support it.

DO Link a Video Thumbnail to a Landing Page

Around 22% of major email clients do support the HTML5 <video> element. You could provide an in-email playable video for Apple Mail on MacOS and a couple of the many versions of Outlook. However, linking to a landing page that includes your video is a far more accessible and cross-client way of getting video content to your users. 

The Key Takeaway of Email Marketing Do’s and Don’ts 

We’ve only hit a few major content caveats to watch for in email marketing. But even with all these in mind, the most important thing to remember is to test your emails before sending them. 

However, every email is unique, and there are many elements that you’ll see work perfectly on websites and not realize won’t work as expected across all email clients. Thoroughly testing and debugging your emails is the best way to ensure your users receive precisely what you expect.

Need help crafting your next email? Reach out to our team for support!