“Building an email is not like building for the web. While web browsers continue their onward march towards standards, many email clients have stubbornly stayed put. Some have even gone backwards. In 2007, Microsoft switched the Outlook rendering engine from Internet Explorer to Word. Yes, as in the word processor. Add to this the quirks of the major web-based email clients like Gmail and Outlook.com, sprinkle in a little Lotus Notes and you’ll soon realize how different the email game is.

While it’s not without its challenges, rest assured it can be done. In my experience the key is to focus on three things. First, you should keep it simple. The more complex your email design, the more likely is it to choke on one of the popular clients with poor standards support. Second, you need to take your coding skills back a good decade. That often means nesting tables, bringing CSS inline and following the coding guidelines I’ll outline below. Finally, you need to test your designs regularly. Just because a template looks nice in Outlook.com now, doesn’t mean it will next week.”

“USE TABLES
Use tables for layout Because clients like Gmail and Outlook 2007 have poor support for float, margin and padding, you’ll need to use tables as the framework of your email. While nested tables are widely supported, consistent treatment of width, margin and padding within table cells is not. For the best results, keep the following in mind when coding your table structure.

When you combine table widths, td widths, td padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself.

Never assume that if you don’t specify a cell width the email client will figure it out. It won’t. Also avoid using percentage based widths. Clients like Outlook 2007 don’t 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.”

“Keep the width less than 600 pixels Because of email client preview panes, this rule was important long before mobile email clients came of age. In truth, the iPhone and Pre have a viewport of 320 pixels, the Droid 480 pixels and the Blackberry models hover around 360 pixels. Sticking to a maximum of 600 pixels wide ensures your design should still be readable when scaled down for each device. This width also gives good results in desktop and web-based preview panes.”

“Use the display hack for Outlook.com Outlook.com adds a few pixels of additional padding below images, equivalent to the descender height of surrounding text. A workaround is to set the display property like so. img {display:block;} This removes the padding in Outlook.com and still gives you the predicable result in other email clients.

Be aware of automatic text resizing In what is almost always a good feature, email clients using webkit (such as the iPhone, Pre and Android) can automatically adjust font sizes to increase readability. If testing shows this feature is doing more harm than good to your design, you can always disable it with the following CSS rule: -webkit-text-size-adjust: none;“

“I glanced across the office and asked Mat if this was something he knew about and simply never told me but he was just as surprised as I was. The bit of CSS that has proven itself effective in Outlook 2007 is:

background-image: url('http://www.abcwidgets.com/bg.jpg');
background-repeat: repeat-y no-repeat;
background-position: top center;
background-color: #d9c092;

Now the key difference with this and every other bit of CSS code I’ve ever written was the background-repeat. In the past, I would use solely:background-repeat: repeat-y;And while every other client seems to gracefully assume no-repeat for the repeat-x, Outlook 2007 does not. Stick that in and boom, you have body background images working.”

”
– Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
– Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
– Don’t design an email that’s essentially one large, sliced-up image. While these kinds of emails look pretty, they perform poorly.”