I’ve been creating a lot of HTML for email recently and to begin with it felt like coding against the grain a little. In this post I’d like to share with you the differences I’ve come across so far.
Creating HTML for email isn’t like creating HTML for browsers. There are no standards as such so you can forget much of what you know about XHTML (actually don’t do that). You’ll find that the good old tables come back into play as poor old divs have been snubbed by most of the email clients.
Before starting it’s worth heading over to Campaign Monitor as they have compiled and exhaustive list of CSS support in email clients.
I’ve coded up a simple pages using both XHTML and a version for email that we can use as an example – download them here.
Compare the elements
In the XHTML version you can see that I’ve created a div which holds everything together:
<div id="container">
This div is styled using an external CSS file using the following code:
#container {width: 600px; margin-right: auto; margin-left: auto;}
In the email version I’ve had to use nested tables with the styles inline like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#CCCCCC;"><tr><td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
The above is course just a snippet but you can see that the first table has a width of 100% and it’s content is centered and the nested table has a width of 600 pixels. When you compare the code in each file you’ll notice that there are no <div> tags in the email version and the layout has been achieved by using tables with widths mostly defined in pixels. Try and keep your widths defined in the cells rather than just the table though e.g a two column table with an overall width of 600 pixels might have one column with a width of 200 pixels and the other coloumn with a width of 400 pixels (without any padding).
In the version created using XHTML you can see that the attached style sheet has all the typography styles contained within it and the HTML is just marked up with <p> and <h1> and <h2> tags etc. This has to handled differently in the email version so you can either apply the inline styles to a call that contains your text or you can use span to style blocks of text. Using <p> tags can sometimes behave incorrectly (gmail and Outlook 2007 are notoriously bad) so it might be a good idea to leave these out.
David Greiner, the co-founder of Campaign Monitor has written a very good article on what (mostly) works and what doesn’t. David also supports Email Standards Project which is doing a very good job in trying to get some standards into Email display in both desktop clients, browser and mobile. Here are a few of David’s tips on creating HTML for email:
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.
Err toward nesting
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.
Always move your CSS inline
Gmail is the culprit for this one. By stripping the CSS from the <head> and <body> of any email, we’re left with no choice but to move all CSS inline. The good news is this is something you can almost completely automate. Free services like Premailer will move all CSS inline with the click of a button. I recommend leaving this step to the end of your build process so you can utilize all the benefits of CSS.
Images in HTML emails
The most important thing to remember about images in email is that they won’t be visible by default for many subscribers. If you start your design with that assumption, it forces you to keep things simple and ensure no important content is suppressed by image blocking. Make sure you always use an absolute link to your images rather than a relative one too.
With this in mind, here are the essentials to remember when using images in HTML email:
Avoid spacer images
While the combination of spacer images and nested tables was popular on the web ten years ago, image blocking in many email clients has ruled it out as a reliable technique today. Most clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. Given image blocking is on by default in most email clients, this can lead to a poor first impression for many of your subscribers. Stick to fixed cell widths to keep your formatting in place with or without images.
Always include the dimensions of your image
If you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked and break your layout. Also, ensure that any images are correctly sized before adding them to your email. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of your image.
Avoid PNGs
Lotus Notes 6 and 7 don’t support 8-bit or 24-bit PNG images, so stick with the GIF or JPG formats for all images, even if it means some additional file size.
Provide fallback colors for background images
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.
Don’t 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 don’t 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.
Don’t use floats
Both Outlook 2007 and earlier versions of Notes offer no support for the float property. Instead, use the align attribute of the img tag to float images in your email.
<img src="image.jpg" align="right">
If you’re seeing strange image behaviour in Yahoo! Mail, adding align=“top” to your images can often solve this problem. Read the rest of this article from David here
[...] Creating HTML for Email [...]
As a contributor of the W3C CSS Test suite, I’d like to say that this is an underestimated problem. The actual problem is that email clients are actually user-agents, but they’re not meant to render CSS together with XHTML as browsers do. CSS support on these UAs depends greatly on their capability to apply styles after that the document is loaded. With the term “loaded”, I mean when they get emails from the net. But since XHTML and CSS are a plus for these UAs, in the sense that all they are required to do is to turn a raw string starting with http: in an effective hyperlink, we can’t expect great improvements for the future. The major drawback to this is that, as you say, we’re forced to use inline styles and other bad practices which are normally avoided in a good web design approach. As far as I know, the CSS Working Group is not actually taking this problem into account, so I’d like to bring it up as soon as I can. Thanks for your post. Really useful.
Thanks very much for the feedback and info Gabriele. Interesting stuff.
That really is a very beautifully designed html email. Many thanks for sharing this, and the files.
Thanks very much Mark – nice comment to read at the start of the day!
[...] old tables come back into play as poor old divs have been snubbed by most of the email clients. View post [...]