Professional Documents
Culture Documents
Email Design Guidelines - Articles & Tips - Campaign Monitor
Email Design Guidelines - Articles & Tips - Campaign Monitor
http://www.campaignmonitor.com/design-guidelines/
Campaign Monitor - Home Features Pricing Customers Resources Support Our Story Blog Sign Up Login
1 of 9
8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
following the coding guidelines Ill outline below. Finally, you need to test your designs regularly. Just because a template looks nice in Hotmail now, doesnt mean it will next week.
Never assume that if you dont specify a cell width the email client will gure it out. It wont. Also avoid using percentage based widths. Clients like Outlook 2007 dont respect them, especially for nested tables. Stick to pixels. If you want to add padding to each cell, use either the cellpadding attribute of the table or CSS padding for each cell, but never combine the two. Err toward nesting
2 of 9 8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, that will always give you the best result across the buggier email clients. Use a container table for body background colors Many email clients ignore background colors specied in your CSS or the <body> tag. To work around this, wrap your entire email with a 100% width table and give that a background color.
<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td bgcolor=#000000> Your email code goes here. </td> </tr> </table>
You can use the same approach for background images too. Just remember that some email clients dont support them, so always provide a fallback color. Avoid unnecessary whitespace in table cells Where possible, avoid whitespace between your <td> tags. Some email clients (ahem, Yahoo! and Hotmail) can add additional padding above or below the cell contents in some scenarios, breaking your design for no apparent reason.
3 of 9
8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
While were on the topic of fonts, I recently tested every conceivable variation of @font-face across the major email clients. The results were dismal, so unfortunately its web-safe fonts in email for the foreseeable future. When declaring the color property in your CSS, some email clients dont support shorthand hexadecimal colors like color:#f60; instead of color:#ff6600;. Stick to the longhand approach for the best results. Paragraphs Just like table cell spacing, paragraph spacing can be tricky to get a consistent result across the board. Ive seen many designers revert to using double <br /> or DIVs with inline CSS margins to work around these shortfalls, but recent testing showed that paragraph support is now reliable enough to use in most cases (there was a time when Yahoo! didnt support the paragraph tag at all). The best approach is to set the margin inline via CSS for every paragraph in your email, like so:
p { margin: 0 0 1.6em 0; }
Again, do this via CSS in the head when building your email, then use Premailer to bring it inline for each paragraph later. If part of your design is height-sensitive and calls for pixel perfection, I recommend avoiding paragraphs altogether and setting the text formatting inline in the table cell. You might need to use table nesting or cellpadding / CSS to get the desired result. Heres an example:
<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">your height sensitive text</td>
4 of 9
8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
Links Some email clients will overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each link inline like so:
<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>
To some this may be overkill, but if link color is important to your design then a superuous span is the best way to achieve consistency.
5 of 9
8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
Outlook 2007 has no support for background images (aside from this hack to get full page background images working). If you want to use a background image in your design, always provide a background color the email client can fall back on. This solves both the image blocking and Outlook 2007 problem simultaneously. Dont forget alt text Lack of standards support means email clients have long destroyed the chances of a semantic and accessible HTML email. Even still, providing alt text is important from an image blocking perspective. Even with images suppressed by default, many email clients will display the provided alt text instead. Just remember that some email clients like Outlook 2007, Hotmail and Apple Mail dont support alt text at all when images are blocked. Use the display hack for Hotmail For some inexplicable reason, Windows Live Hotmail adds a few pixels of additional padding below images. A workaround is to set the display property like so.
img {display:block;}
This removes the padding in Hotmail and still gives you the predicable result in other email clients. Dont use oats Both Outlook 2007 and earlier versions of Notes offer no support for the oat property. Instead, use the align attribute of the img tag to oat images in your email.
<img src="image.jpg" align="right">
If youre seeing strange image behavior in Yahoo! Mail, adding align=top to your images can often solve this problem.
Video in email
With no support for JavaScript or the object tag, video in email (if you can call it that) has long been limited to animated gifs. However, some recent research I did into the HTML5 video tag in email showed some promising results. Turns out HTML5 video does work in many email clients right now, including Apple Mail, Entourage 2008, MobileMe and the iPhone. The real benet of this approach is that if the video isnt supported, you can provide reliable fallback content such as an animated GIF or a clickable image linking to the video in the browser. Of course, the question of whether you should add video to email is another issue altogether. If you lean toward the yes side check out the technique with code samples.
6 of 9
8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
Looking ahead
Designing HTML email can be a tough pill for new designers and standardistas to swallow, especially given the ckle and retrospective nature of email clients today. With HTML5 just around the corner we are entering a new, uncertain phase. Will email client developers take the opportunity to repent on past mistakes and bring email clients into the present? The aim of groups such as the Email Standards
7 of 9
8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
Project is to make much of the above advice as redundant as the long-forgotten <blink> and <marquee> tags, however, only time will tell if this is to become a reality. Although not the most compliant (or fashionable) medium, the results speak for themselves email is, and will continue to be one of the most successful and targeted marketing channels available to you. As a designer with HTML email design skills in your arsenal, you have the opportunity to not only broaden your service offering, but gain a unique appreciation of how vital standards are. Articles & Tips Getting started Offering email marketing to your clients Designing and building emails Managing and growing your subscriber lists Improving your results Email Templates Downloads & Plugins Email Stats & Reports Email Marketing Book
CSS support in email Designing for email can be tricky. Save your sanity with our complete CSS guide.
Not just good looks Track every aspect of your campaigns like opens, clicks, forwards, sales and more.
8 of 9
8/9/11 4:44 PM
http://www.campaignmonitor.com/design-guidelines/
Free templates Over 30 professionally designed email templates tested in all major email clients. About Our Book Contact API Anti-spam Policy Terms of Use Privacy Policy Follow us on Twitter Become a fan on Facebook
Free (and awesome) email design tips every month
Email address Email address Proud founders of the Email Standards Project and supporters of the design community.
9 of 9
8/9/11 4:44 PM