Desiging an HTML Email
February 5, 2012
**Originally, this was only going to be a single post, but it ended up being really long. You can view the “good stuff” here: State of Background Images and HTML in Emails, which describes a bunch of common email providers and their CSS/HTML support.
This post mostly provides a little background on this particular HTML email project and some concepts used when creating HTML Emails.**
While computer repair is one part of my business, I also offer a lot of web related services, including custom programming and web development/design.
Now, anyone who has been doing web design for any amount of time, probably is aware of the stigmata attached to tables.
Many designers even goto such extremes to avoid them, that they end up completely rewriting a table in CSS using the float/box model, in order to avoid doing a table. Personally, while tables don’t make it into the main design of my themes very often, if I need them, I use them.
In any case, due to limitations by most email clients and webmail, if you are designing an email, it is best practices to use tables. Ultimately, this can be a little discouraging, especially to newer web designers, who may not remember the table/nested table/cell padding/ect world-wide-web of yesteryear.
There is a little background on email design basics and my particular situation, so fee free to jump to the actual testing/results Here
Onto the Design
When designing an email, it is best practices, especially due to the limited tool set offered by most email providers, to design for the lowest common denominator.
This means that even if the person does not allow remote images, blocks most html, and generally has a locked down email client, the email should still look more or less correct.
In fact, if you go through your junk folder, most junk mail and eblasts use a fairly simple design.
With that said, even in the past few years, most web-mail providers have added a lot more support for CSS, so aside from Outlook, which has taken steps backwards(more in next post,) you can generally get a bit more creative.
Going Overboard with the Design
Unfortunately, for me, my clients did not discuss the email design with me first.
Instead, they sent it to the graphic artist with the intention of basically recreating their website, complete with white text on a black background, as well as a rather integral background-image design.
Had they consulted me first, I would have urged a little more restraint, as there are a lot of things that can go wrong with this sort of design and, even though many of the popular email providers support this, there are many situations you can not test for.
However, they already showed it to the client, who approved it, and were unwilling to back peddle to offer a more compatible design.
Methods Used for Displaying Background Images
In this particular design, a blackish background image was used over the whole email, with white text, and otherwise a straight black background.
A sidebar, with one of those 3d-ribbon like buttons, which people are still over-using IMHO, was also present. However, I was able to use a standard background-color for the sidebar and then line up an image button to create the same effect, avoiding multiple background images.
Had this been a website, I would have done it differently, but I was able to get it down to only a single background image in the entire design.
Outlook 2007+ offers some unique challenges, which are described in the next post. However, I otherwise used standard HTML/CSS, using “background=” in the table definition and a redundant css “background-image” definition in the “style=” section.
A Quick Word on Layout
One factor, which people who are not familiar with tables might not realize, is that both height/width of tables can be kind of tricky, in part because by design the table is made to handle these on their own. As a result, sometimes height/width may be ignored.
In order to get the desired effect from a layout standpoint, it usually ends up being necessary to embed tables within tables. In most cases, you would have a single 100% width table and then nest tables inside of this main wrapper table.
In the case of this design, I added a black-background to the wrapper table, to help ensure even when the background image was blocked, the white text was still visible.
So, rather than trying to design it all in a single table, you might end up with something like this.
<table width="100%" >
<table width="500" align="center">
<table width="400" bgcolor="#ffffff"> ... </table>
<table width="200" bgcolor="#000000"> ... </table>
Of course, the above example leaves out a lot, but gives you an idea behind nested tables for layout.
In general, you would want to add inline style declarations to each table, and in many cases each other element. For instance, adding inline declarations to paragraphs usually is necessary, as some clients would otherwise end up using their own body style. Also, setting heights, cellpadding, cellspacing, and other table fields is necessary to ensure proper spacing and design.
Designing an HTML Email
Ultimately, if you design a solid Table based HTML template, it will be largely supported in most email clients/providers.
You will still need to do A LOT of testing and, depending on how complicated it it, a bit of hacking to make sure the email design will look okay most situations. However, if you approach it like a website, aside from NOT using float/divs and using Tables instead, you should be in a good position come testing time.
Also, don’t forget to include height/width for all images, as well as alt-text, so even if remote images are blocked, the layout is maintained and people can see what is blocked.
For the most part, it is also best practices to use inline style declarations, instead of using CSS element styling. Some clients end up ignoring CSS element styling.
Next Post in Series: State of Background Images and HTML in Emails