Limitations of HTML Email
by Intuit• Updated 2 months ago
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.
Do's and Don'ts of HTML Email
Email clients typically have their own design constraints as compared to a web browser. Interactive elements like Flash, JavaScript, or HTML forms won't work in most email inboxes.
Refer to this table to learn more.
Safe to use | Use with caution | Do not use |
---|---|---|
static, table-based layouts HTML tables and nested tables template width of 600px-800px simple, inline CSS web safe fonts | background images custom web fonts wide layouts image maps embedded CSS | JavaScript <iframe> Flash embedded audio embedded video forms <div> layering |
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 them to your entire audience.
Animated GIFS
Some email clients don't support animated GIFs, but if you would like to include a GIF in your campaign, you can insert one into your campaign directly from Giphy.
If you upload a GIF directly in Mailchimp, it's usually best to edit your animated content first. Our built-in Photo Editor alters image files in order to edit them, a process not built for animated content, and this can cause GIFs to break.
Check out Litmus' guide for additional helpful information on animated GIFs and which email clients support them.
Background images
Mailchimp supports background images in the preheader, 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 audience.
Add a Background Image to a Landing Page or Email
Add a Background Image to a Custom HTML Template
Preview and Test your Email Campaign
Web fonts
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 |
---|---|
Apple Mail | Lotus Notes 7 |
Lotus Notes 8 | Lotus Notes 8.5 |
Outlook 2011 for Mac | Gmail |
iOS Mail | Yahoo! |
Outlook 2016 | Outlook.com |
Android App | Outlook 2003 |
Android Mail 2.3 | Outlook 2007 |
Android Mail 4.2 | Outlook 2010 |
Android Mail 4.4 | Outlook 2013 |
Thunderbird | |
IBM Notes 9 | |
AOL | |
Blackberry | |
Alto |
Wide templates
Your contacts 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 following elements are blocked by nearly all major email clients.
JavaScript
JavaScript is a programming language that makes web content interactive. It's common in websites, but the vast majority of email clients block scripts since they can hide malicious content. Avoid all JavaScript.
Try gifs to make your content more engaging.
Iframe Elements
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
Flash displays animations and graphics on websites, but most email clients block it.
Instead, try gifs to make your content more engaging.
HTML Forms
Text fields, text inputs, radio buttons, and checkboxes are simple HTML form elements, but the submit button often requires Javascript. Some email clients will display forms, but unfortunately, contacts won't be able to submit them. Avoid HTML forms, and consider an alternative.
Instead, try a simple poll or a Mailchimp survey integration to gather responses from contacts, or insert a link to a web form.
Embedded media
Autoplay and click-to-play media won't play in an inbox unless your contact'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.
Instead, share a video player link with Mailchimp's merge tags or video content blocks. To send audio files, share an audio file link.
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 audience by email client, and design for a specific client. For example, you might use a background image for AOL Mail contacts, since AOL Mail supports background image CSS.
Review the email client CSS support page and Wikipedia's email client features chart to determine if your contact's email client supports your custom code.
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.
- Email design reference
Provides resources on design, development methods, code samples, and downloadable email blueprints to help you design and build emails. - Email design guide
Provides campaign style, design, and layout tips in article form.
Sign in now for personalized help
See articles customized for your product and join our large community of QuickBooks users.
More like this
- CSS in HTML Emailby QuickBooks•Updated September 04, 2024
- Add an Image Map to a Campaignby QuickBooks•Updated September 04, 2024
- About Email Campaign Archives and Pagesby QuickBooks•Updated August 19, 2024
- About HTML Emailby QuickBooks•Updated September 04, 2024
- Import a Custom HTML Templateby QuickBooks•Updated August 19, 2024