Designing an HTML email creative that displays consistently in all email clients and web browsers is much more difficult than you can imagine. Think about buying one pair of shoes that your entire family would have to share. It wouldn’t work out too well, would it? The problem is that all ISP’s, such as AOL, Hotmail, Yahoo, Gmail and others all manage, interpret and display the HTML code they receive differently. While Microsoft Outlook and Gmail are the most annoying, all of them have inconsistencies and differences in the way they display certain HTML code. This makes it difficult to find a happy medium and ensure that your email marketing creative design looks and displays the same, no matter which ISP you are sending it to.
Below is a boilerplate that should assist you in coding your email creative to be the most consistent across all email clients, web browsers and mobile devices. Think of it as a foundation for good emails. This is not a template, and it doesn’t come with place holders so you can add in your content. Instead, the boilerplate includes basic HTML and CSS suggestions, along with tips and some experienced advice, to help you kick start your email creative design coding efforts. This boilerplate is merely a guideline for writing HTML code that will render correctly across each of the most popular email clients.
Are you ready? Let’s get started.
This is a great DOCTYPE to test with because it is used by Gmail and Outlook.com. It is very important to test with and without a DOCTYPE because many clients strip it entirely – this affects paragraph margins & padding, centering, and box model padding.
Please use these suggestions as a general rule, avoid using comments in your final email campaign or you may get blocked by SPAM filters. Also, including a single quote in your CSS comments will cause your email to appear blank in Entourage 08.
Some of the embedded CSS used in this boilerplate can be adjusted based on your design but others need to be overwritten inline.
You will find those instructions below.
The CSS style block has been placed just above the closing body tag for Yahoo in IE7 & 8. This fix actually requires a DOCTYPE.
This content type tells a web browser how to interpret your special characters. However, every email client will ignore this meta tag. Instead the content-type will be set in the header of your email. The header is created based on the server configuration which is controlled by your email service provider.
Solution: To avoid jumbled characters in your email, always use HTML entities.
When testing, it’s a good idea to try both:
This will help you catch jumbled characters so that you don’t forget to convert them to HTML entities.
Email Client Bug Fixes – Its Best Not to Change These
Forces Outlook.com to display emails at full width.
Forces Outlook.com to display normal line spacing, here is more on that:
Prevents Webkit and Windows Mobile platforms from changing default font sizes.
Resets all body margins and padding to 0 for good measure.
This resolves the Outlook 07, 10, and Gmail td padding issue.
Resetting Defaults – It is Best to Overwrite these Styles Inline
This sets a clean slate for all clients EXCEPT Gmail. From there it forces you to do all of your spacing inline during the development process. Be sure to stick to margins because paragraph padding is not supported by Outlook 2007/2010.
Remember: Outlook.com does not support “margin” nor the “margin-top” properties. Stick to “margin-bottom”, “margin-left”, “margin-right” in order to control spacing. It also doesn’t hurt to set the inline top-margin to “0” for consistency in Gmail for every instance of a paragraph tag (see our paragraph example within the body of this boilerplate)
Another option: Use double BRs instead of paragraphs.
This CSS will overwrite Outlook.com’s default CSS and make your headings appear consistent with Gmail. From there, you can overwrite your styles inline if needed.
This is the embedded CSS link color for Gmail. This will overwrite Outlook.com and Yahoo Beta’s embedded link colors and make it consistent with Gmail. You must overwrite this color inline.
The “body” is defined here for Yahoo Beta because it does not support your body tag. Instead, it will create a wrapper div around your email and that div will inherit your embedded body styles.
The “#body_style” is defined for AOL because it does not support your embedded body definition nor your body tag, we will use this class in our wrapper div.
The “min-height” attribute is used for AOL so that your background does not get cut off if your email is short.We are using universal styles for Outlook 2007, including them in the wrapper will not affect nested tables.
When Yahoo! Beta came out, we thought we could put those days behind us but we might have celebrated a little too soon.
Might get converted to:
Might slip under the radar.
So what’s the fix?
Add this to your embedded CSS:
Another fix is to add a span tag inside each anchor with an inline style:
But this will not resolve the hover issue.
Some other options.
There is no way to set these inline so you have the option of adding pseudo class definitions here. They won’t work for Gmail nor older versions of Lotus Notes but it’s a nice addition for all other clients.
Optimizing for Mobile Devices:
@media only screen and (max-device-width: 480px)
Here you can include rules for the Android and iPhone native email clients.
Device viewport dimensions are as follows:
IPhone: 320px X 480px – portrait, 480px X 320px – landscape
Android: 350px X 480px – portrait, 480 X 350 – landscape
(These are average dimensions, the Android OS runs on several different devices)
You must use attribute selectors in your media queries to prevent Yahoo from rendering these styles. We added a yahoo attribute in the body tag to complete this fix.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
Here you can include rules for the iPad native email client.
Device view-port dimensions in pixels:
703 x 1024 – portrait
1024 x 703 – landscape
Embedded CSS Notes:
1.) Be aware that Gmail will not read any of your embedded CSS
2.) Although we have seen the important priority used in other examples, it is not necessary. If you use “important” you can no longer overwrite your styles inline which is required for Gmail.
3.) The Android does not support “class” declarations outside of the media query.
4.) You might want to consider duplicating your embedded CSS after the closing body tag for Yahoo! Mail in
IE7 & 8.
You may adjust each of the values above for your email as needed.
We’ve included the style attribute for Gmail because it does not support embedded CSS and it will convert this body tag to a div. Since it gets converted to a div, the other body attributes like bgcolor are ignored.
We included body attributes (alink, link, bgcolor and text) for Lotus Notes 6.5 and 7, as these clients do not offer much support for embedded nor inline CSS.
The “min-height” attribute is set for Gmail and AOL since they will be converting this body tag to a div and we want our background color to reach the bottom of the page.
The “yahoo” attribute is added if you are using media queries for mobile devices. For an explanation, check out the media queries example in the style block below.
This div is working as a wrapper and the body_style is picking up our CSS properties for AOL. The padding has been included for Gmail, you can adjust this to your liking.
If your email exceeds 23 inches in height, you might end up with unwanted horizontal spacing halfway down your email in Outlook 2007 and 2010.
The fix: Just change this wrapper from a div to a span and add style=”display:block” – don’t forget to change the closing tags well. From there, stack your tables within your email so that no table exceeds 23 inches.
Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message.
The bgcolor and width attributes are for the Android Gmail application. Gmail converts your body to a div, even on mobile apps. Since there is no width set in your body, the Android sets the width of your converted body tag to that of the device viewport.
To make a long story short, your background color will get cut off as the viewer scrolls horizontally unless you add it to each of your tables as well.
In this example, we are using the align=”center” attribute to center the final email, if you want it left aligned, just remove that. Using align attribute will ensure consistent results in all clients even after your DOCTYPE is stripped.
As stated above, paragraph tags are optional. Do not allow yourself to change the margin-top because it is not supported in Outlook.com. Paragraph padding is hit or miss in Outlook 2007/2010/2013. You will have to stick to margin-left, margin-right, and margin-bottom and avoid the generic “margin” property.
Here we’ve used inline CSS to overwrite Gmail’s default link color.
If you have a client who asks you to include an attachment like a pdf, always recommend linking to an external file. Attachments will often cause an email to be blocked by SPAM filters.
Gmail, Yahoo and Outlook.com add in an extra space below images when using non IE browsers. This is especially noticeable when stacking images on top of each other.
A common fix is to add style=”display: block”.
It’s best to use the “align” attribute vs. a CSS float if you are placing them inline with text – this is for Lotus Notes 6.5 and 7. Image widths and heights need to be explicitly set and actual dimensions must be correct for Outlook 2007 and 2010.
The alt and title tags are equally important because a majority of email clients block images by default and instead display either the title or alt text in the images’ space. Use border=”0″ to avoid unwanted outlines around your images in various clients – especially when wrapping a link around
Last but not least, you must always use absolute references to images in HTML emails:
Ordered and Unordered Lists:
Outlook 2007/2010 converts your list items into paragraphs and spans (particularly if you use inline styles) so although using tables is rather frustrating, it might save you time and hassle when testing lists.
The “background” attribute within the TABLE, TH, or TD tag is the safest way to use background images. This is supported by all clients except Outlook 07, 2010, Lotus Notes 6.5, and 7. For those, we added a “bgcolor” because Notes 6.5 and 7 have limited support for inline CSS. If you want to display a background image in the body of your email, create a wrapper table, width 100%. Again, this is because Gmail does not support embedded css and if it finds a background image in your inline CSS, it will ignore the entire style declaration.
HTML5 video is now possible in email. Since I know everyone has been waiting for this, I’ll give you some basic information on what to consider before loading up a list of 500,000 customers (You Wish), embedding a video and letting it rip. This probably wouldn’t end up being a success.
If you want to take the easy way out, another simpler option would be to use an image with play button in the center and link it to the actual video. This is the usual method for including video for the past 10 years.
Before we get into the technical coding, I think it’s important to understand that support for HTML5 video is still limited, but the clients that do support it, represent over a 60% market share. Email applications, like the native iOS client, Apple Mail and Outlook.com will allow recipients to play a video within the email client itself. Other clients like Gmail and the Android devices will display a fallback image.
The following list of clients will allow you to play an embedded video in an email:
I will follow up with a technical article explaining the difficulties and details embedding and coding video into email next month.
Remember, the most important aspect to ensure your email creative is consistent and looks the same in all email clients and browsers is to test. Don’t be lazy. Test, test and then when your 100% sure everything works, test it again before you pull the trigger and send a non-working video or email marketing creative that will explode upon delivery to 500,000 of your best customers.