HTML email newsletters have come a long way in the five years since this article was first published. HTML email is still a very successful communications medium for both publishers and readers. Publishers can track rates for email opens, forwards, and clickthroughs, and thereby can measure reader interest in products and topics; readers are presented with information that’s laid out like a web page, in a way that’s more visually appealing, and much easier to scan and navigate, than plain text email.
In some ways, coding HTML email has become easier — several email software providers, such as Google Mail, have improved their support for CSS. However, at the same time, Outlook 2007 has taken HTML email backwards: last year Microsoft substituted the original HTML rendering engine used by Outlook for an engine that is inferior in terms of CSS support.
Other advances in HTML email in the last couple of years include the formation of the Email Standards Project, which aims to test the compliance of email software to HTML and CSS standards and to lobby for improvements; the emergence of services for testing how HTML email renders in various desktop and web-based email applications; and the availability of HTML email templates that you can either use “as is” or customize to your preferences. We’ll look at some of these services and templates throughout this article.
Despite these advances, coding HTML email can be a mix of misery and pain for programmers. This article will bring you up to date on how to code HTML email so that it will display well in most email software. I describe the results of my own hands-on experience creating HTML email newsletters for clients, as well as bits of technical information from the Internet.
This is actually the second revision of an article that was written and published on sitepoint.com in 2004, and includes new, up-to-date material that will help you ensure that your HTML email newsletters meet the requirements of today’s email clients.
HTML Email Fundamentals
The biggest pain when coding HTML email is that so many different software tools are available for reading email, from desktop software such as Eudora, Outlook, AOL, Thunderbird, and Lotus Notes, to web-based email services such as Yahoo!, Hotmail, and Google Mail. If you thought it was difficult to ensure the cross-browser compatibility of your web sites, be aware that this is a whole new game — each of these email software tools can display the same email in vastly different ways. And even when these tools do display an HTML email properly, accounting for variances in, for example, the widths at which readers size their windows when reading emails makes things even trickier.
Whether you choose to code your HTML email by hand (my personal preference) or to use an existing template, there are two fundamental concepts to keep in mind when creating HTML email:
- Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
- Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download some templates from Campaign Monitor and MailChimp. When you open up one of these templates, you’ll notice a few things that we’ll discuss in more detail later:
- CSS style declarations appear below the
bodytag, not between theheadtags. - No CSS shorthand is used: instead of using the abbreviated style rule
font: 12px/16px Arial, Helvetica, you should instead break this shorthand into its individual properties:font-family,font-size, andline-height. spans anddivs are used sparingly to achieve specific effects, while HTML tables do the bulk of the layout work.- CSS style declarations are very basic, and do not make use of any CSS.
Step 1: Use HTML Tables for Layout
That’s right: tables are back, big time! Web standards may have become the norm for coding pages for display in web browsers, but this isn’t the Web, baby. Mail clients are light years behind the eight-ball in terms of CSS support, which means that we must resort to using tables for layout if we really want our newsletters to display consistently for every reader (see the reading list at the end of this article for some excellent resources on CSS support in mail clients).
So put your standards-compliant best practices and lean markup skills aside: we’re about to get our hands dirty!
The first step in creating an HTML email is to decide what kind of layout you want to use. For newsletters, single column and two-column layouts work best, because they control the natural chaos that results when a large amount of content is pushed into such a small space as an email.
A single-column layout typically consists of:
- a header, containing a logo and some (or all) of the navigation links from the parent web site to reinforce the branding and provide familiarity for site visitors
- intra-email links to stories that appear further down in the email
- a footer at the bottom of the email, which often contains links that are identical to the top navigation, as well as instructions for unsubscribing
Two-column emails also use a header and footer. Like a two-column web page, they typically use a narrow, side column to house features and links to more information, while the wider column holds the body content of the email.
Promotional emails follow similar rules but contain much less in the way of content and links. They often include one or two messages, and sometimes make use of one big image with small explanatory text and some links below the image.
All of these email layout possibilities can be created easily, using HTML tables to divide up the space into rows and columns. In fact, using HTML tables is the only way to achieve a layout that will render consistently across different mail clients.
No matter how your email is designed, it’s important to remember that the most important content should appear at or near the top of the email, so it is visible immediately when a reader opens your email. The top left of an email message is often the first place people look when they open an email.
This is the approach that I use to create HTML emails:
- For a two-column layout, create one table each for the header, the two center content columns, and the footer — that’s three tables in all. Wrap these tables into another container table. Use the same approach for single-column layouts, but give the content table one column. This approach is especially suitable if the design of your email contains images that are broken up over multiple table cells. Otherwise, a single table with
tdrows for its header (withcolspan="2"if the design uses two columns), content, and footer should display fine in all but Lotus Notes email software. - Use the attributes within the table and
tdtags to control the table’s display. For example, settingborder="0",valign="top",align="left"(orcenter, if that suits the design),cellpadding="0",cellspacing="0", and so on. This primarily helps older email clients to display the email in a (barely) acceptable way. - Even if the design of your email doesn’t include a border around your table, you might find it helpful during development to set
border="1"to help with the debugging of any problems that arise with the internal alignment oftrandtdtags. Change it back toborder="0"for testing and production.
While this approach might offend purists who prefer to code using the latest standards, it is the only approach that’s viable at this point. But the fact that we’re using tables for layout doesn’t mean we need to resort to old-school methods entirely. For example, no matter how poorly Lotus Notes displays HTML email, you should never have to resort to using the font tag. And while Outlook 2007′s HTML rendering engine is less than perfect, it does display basic HTML tables just fine.
There are some caveats, though; let’s take a look at styling our text next.
