We’ve chatted a bit lately about when it’s okay to use
div tags in HTML email, especially in regards to layouts. After all, it’s 2011 already and yet static table-based layouts remain the standard for email.
The sad truth is that it isn’t time to pack those tables away – in a recent test, we found that using
div tags to create multi-column layouts is still highly unreliable. However, we shouldn’t write
divs off altogether, as they can still be useful. Let’s look at what happens when you use
div tags to build layouts in your email newsletters.
Building email layouts: A
Our test was simple: first of all, we created a typical multi-column layout using tables, then recreated it using
div tags and CSS. In order to recreate the table-based layout, we used some pretty stock-standard CSS properties, including
margin and more.
Once done, we tested the design across a range of popular email clients… And Lotus Notes. For many of us, the results were, well, predictable. Here’s Outlook ’07, with the table-based layout on top, then the
div version below:
Needless to say, there’s some real craziness going on here – every
div tag with the
width property applied (either as % or px) has been expanded to fill 100% of the reading pane. Positioning has disappeared. Forget about floats.
However, it wasn’t all doom and gloom. Here are how some of the most popular email clients handled a variety of CSS properties, when applied to
|Common CSS properties used with
|Client (by popularity)||float||position||margin||width|
|Outlook 2003 / Express|
|Windows Live Hotmail|
|Outlook 2007 / 2010|
|Apple Mail 4|
|Lotus Notes 6.5 & 7|
Despite this unreliable behavior, some folks may still find solid reasons to use
div tags. For instance, load time optimization –
div-based layouts require roughly half as much code as tables to achieve the same result in many email clients. Plus, a lot of these rendering issues are irrelevant in one-column layouts. But from our experience, the main reason why we see HTML emails feature loads of
div tags is because the designer was simply trying to save time, by adapting existing web page source code to create an email template. This isn’t a bad thing, but as the chart above shows, simply shrinking a web layout to fit in email clients’ preview panes does not make usually make for a gracefully degradable design.
div at all: A common misconception
Now, I was brought into the world of HTML email coding with the assumption that any design with
div tags would spontaneously explode at send time. This is incorrect and there are instances where our support team has recommended using them. For example, they can be a good alternative to using
p tags and can save a lot of inline styling, especially when used to surround bulleted lists or within repeaters.
So the bottom line is that
div tags can be great for styling up your email design and maintaining simple layouts, however, they have no place in multi-column layouts or any design that requires the
position CSS property. When in doubt, use tables and definitely refer to our ‘CSS support in email’ guide.