The majority of email clients don’t support every type of HTML content you see on the web. Web browsers are able to display scripts, animations, and complex navigation menus, while your typical email inbox isn’t built to handle this type of content.
In this article, you’ll learn about content types to avoid in your email designs, and what to use instead.
Email HTML v. Web HTML
View the table below to learn more.
Safe to use
Use with caution
Do not use
Safe to use: widely supported by most email clients
Use with caution: limited support from most email clients
Do not use: not supported by most email clients
Use with Caution
You can include certain elements, like background images and custom fonts, in your MailChimp templates. Not all email clients support these elements, so we recommend that you thoroughly preview and test your campaigns before you send to your entire list.
MailChimp supports background images in the pre-header, header, body, column, and footer sections of our drag-and-drop templates. If you use a custom HTML template, you can add a background image with our template builder. Background images don’t render in every email client, and may appear differently in mobile clients, so it’s important to thoroughly preview and test your campaigns before you send to your list.
MailChimp’s Editor toolbar allows you to use standard fonts and a select number of custom web fonts. If an email client doesn’t support a web font used in your campaign, we’ll replace it with a standard font instead.
Take a look at this table to find out which email clients do and do not support web fonts.
|Supports Web Fonts||Does Not Support Web Fonts|
Lotus Notes 7
|Lotus Notes 8||
Lotus Notes 8.5
|Outlook 2011 for Mac||
|Android Mail 2.3||
|Android Mail 4.2||
|Android Mail 4.4||
IBM Notes 9
Your subscribers often open campaigns on mobile devices or in the preview pane of desktop email clients. Email viewing panes are narrow, so they’ll cut off your message if it’s wider than 600-800px.
Do Not Use
The elements below are blocked by nearly all major email clients. Support is either extremely limited, or nonexistent.
Try gifs to make your content more engaging.
An <iframe> (inline frame) is an HTML element that embeds content from one website into another. Inline frames are often used to insert advertisements, video, audio, or forms in other websites. Iframes often contain scripts, so most email clients block them.
Instead, link to the content you want to display in your campaign.
Flash displays animations and graphics on websites, but most email clients block it.
Instead, try gifs to make your content more engaging.
Autoplay and click-to-play media won’t play in an inbox unless your subscriber’s email client supports HTML5 <video> and <audio> tags. Only one major email client, Apple Mail, supports these tags, so it’s best to avoid embedded media and consider an alternative.
If you’re comfortable with coding or if you have access to a developer, you can design custom coded templates that contain HTML elements with limited email client support, but we don’t always recommend it. Keep in mind that MailChimp support agents won’t be able to help you troubleshoot issues with your custom code.
If you use a widely unsupported element, you’ll need to segment your list by email client, and design for a specific client. For example, you might use a background image for AOL Mail subscribers, since AOL Mail supports background image CSS.
Email HTML Design Resources for Coders
Whether you’re new to email HTML or you’ve coded plenty of emails before, these resources can help you design templates that look great in a variety of email clients.
Provides resources on design, development methods, code samples, and downloadable email blueprints to help you design and build emails.
Provides step-by-step articles on custom-coded template topics.
Provides campaign style, design, and layout tips in article form.
Provides a summary of the HTML design practices that work best in MailChimp.