19 January 2009
HTML emails pose special challenges for web designers, especially those who have come of age in a web standards–compliant world. Just ask anyone who has—with quite reasonable expectations—sent out an email with a CSS-based layout, properly designed with an external style sheet. Chances are the readers who opened such an email were greeted with a broken design that looked nothing like the original intent.
Although the browser wars are long over and the shake-out has left a few, mostly compatible, survivors, the email client terrain is anything but settled. In fact, the design situation has actually gotten worse in recent years. When Microsoft replaced Outlook 2003 with Outlook 2007, they started using the Microsoft Word HTML renderer—which is far less CSS-aware than the engine used previously.
Moreover, there are now more email clients than ever. Older email clients like Lotus Notes are still heavily entrenched in the corporation while other desktop clients such as AOL, Apple Mail, Eudora, Outlook, and Thunderbird share the balance with web-based services like Gmail, Hotmail, and Yahoo! Mail. It makes cross-browser compatibility seem like a walk in the park—a really nice park with chirping birds and laughing children.
This article details the steps you'll need to take to craft cross-client HTML emails in Dreamweaver CS4. Two real-world examples, drawn from my company WebAssist, are included to serve as illustrations of techniques and successful models.
If, like me, you passed through the early days of table-oriented web design to CSS-based layouts, you'll be completely baffled—and perhaps a little annoyed—when I tell you to forget everything you know about CSS positioning when it comes to HTML email. What's old is new again and tables rule the email roost. In fact, it's not just tables, but nested tables that are the key to maintaining a solid layout across the spectrum of email clients.
Like the outer wrapper
<div> tag frequently used in a CSS-based layout, it's best to start with an outer table. Several email clients strip out any attributes added to the
<body> tag, so you're essentially creating your own defacto container. Here's how you'd set up the containing table in Dreamweaver CS4:
These settings will establish a 1-cell table to hold all of your HTML content together. The width is defined as 98% to give a small gutter around it all; Yahoo! Mail especially seems to require 1% space on the left and right to look right.
The code will be entered as an attribute for the
<td> tag, which is perfectly acceptable in an HTML email.
Next, you'll want to nest a series of tables within the initial outer table. It's better to avoid one big table with a number of
colspan attributes; although this attribute works for most email clients, it breaks in Lotus Notes. It's better to sketch out your design in basic sections—header, content, footer—and then build a table for each section. These tables can stack on top of one another and contain additional tables. The two example files, for example, have a main content area with two columns: one for the main area and the other for a sidebar. In turn, the
<td> cells contain other tables as needed.
The default size of the email reader pane varies wildly across email clients, as does the user custom resizing, so it's best that your content be confined to a relatively small width. At WebAssist, we use a width of 621 pixels, but I've seen designs as small as 600 pixels.
Remember how all the web standard proponents, including me, urged you to stop using inline CSS styles and to either embed your CSS rules in the
<head> or put them in an attached external style sheet? When you're creating an HTML email... nevermind. Inline styles in HTML email are all the rage and your one sure way of getting consistent results with the full range of email clients. Neither external style sheets nor embedded styles are fully supported.
Although retreating to inline styles is essential for HTML emails, you don't have to go all the way back to using
<font> tags and the like for basic formatting. Even better, Dreamweaver CS4 makes it easy to add most common styling inline. Here's how you'd set up a particular section in your design with specific font properties:
<td>tag you want to style.
<inline style>to indicate that your font choice has been entered as a
styleattribute in the current
<td>tag (see Figure 2).
Clicking Bold adds a font-weight property to the style tag, whereas Italic adds a font-style property.
Not all email clients support inheritance, so you'll have to be repetitive when styling your table cells and apply the same styles as needed to individual
<td> tags. One technique I've found to be helpful is to create a 1-cell table and then set the styles I want on that
<td> tag. Then, I'll press Tab to create another row and table cell, which will carry over the styles previously established.
In some ways, you can think of an HTML email as a web page without a site. Because it has no enveloping folder or adjacent images folder, the source for all images must be linked absolutely. Most designers create their comps with images from their own local system, and so even seasoned professionals make the mistake of accidentally linking to local images. Dreamweaver is perfectly capable of displaying remote images at design time when given an absolute URL, so I generally gather my graphics first, publish them, and then link to them with a fully qualified URL; for example:
Another factor to keep in mind with images is that many email clients don't display them by default to avoid spam attacks. Recipients have to either enable images on a case-by-case basis or accept the sender as safe. Therefore, you'll need to test your designs with images disabled, either by turning them off in the browser options or by using an add-in such as the Firefox Web Developer Toolbar.
title attributes to your images to provide information should the images not be displayed. Normally, this text is displayed with the default paragraph styling. However, if you need to make an impact—regardless if images are enabled—one trick is to put the image in a
<td> tag that has been styled with a larger font size. Figure 3 shows the file sample_email.htm with images turned on and Figure 4, with images turned off. In this example, the
<td> tag has this style attribute:
style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:22px; color:#90C424;"
Another approach is to build the graphic into a table where the text is in a separate
<td> tag with a solid background color for emphasis, isolated from the decorative graphics. This methodology is shown in the file sample_email2.htm, which is included in this article's exercise files.
Figure 5 shows what the email looks like with images enabled. Note how the background gradient imagery and primary box figure are separated from the header messaging, which has a solid colored background, and yet the design appears to be of one piece.
With images disabled, the key messaging is displayed against a colored background (see Figure 6). The same background color is applied to the other
<td> tags which contain the images, thus allowing the area to span the entire width of the email.
One final tip regarding images. If your design calls for a background image, put it in the
<td> tag via the background attribute (which you'll have to hand-code in Dreamweaver) rather than the CSS property background-image. Outlook 2007 and Lotus Notes do not support the CSS property..
You'll need to be careful of coding your hyperlinks as well as your images. Again, absolute URLs are an absolute must: there are no document- or site-relative links in HTML emails. Also, be sure to add a
target="_blank" attribute to your links so that they open in the browser rather than in the email client.
To add this attribute in Dreamweaver, switch to the HTML tab of the Property inspector and choose _blank from the Target list after inputing your absolute URL in the Link field.
Crafting an HTML email may definitely seem like an old-world skill, but the results of reaching your base directly with compelling visuals is well worth it. Moreover, it's good to know you're not alone in disparaging over the state of email today and there is at least one organization trying to advance the cause. The Email Standards Project not only acts a clearinghouse for email client info, it also is an advocacy group urging companies like Microsoft and Lotus to step up their HTML email game. If you have an opportunity, stop by and lend your support by seeing what you can do to improve HTML email in the future.
Tutorials and samples