Accessibility
Joseph Lowery

Joseph Lowery

jlowery@idest.com

Created:
19 January 2009
User Level:
Intermediate
Products:
Dreamweaver

Creating cross-client HTML emails

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.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver CS4

Sample files:

Prerequisite knowledge

Basic knowledge of HTML and use of Dreamweaver.

HTML email structure: Return to yesteryear

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:

  1. Start with a blank HTML page with no links to JavaScript files, external style sheets, or embedded CSS rules.

    Most email clients ignore or remove anything CSS or JavaScript related in the <head>.

  2. From the Insert panel Common category, select Table.

  3. In the Table dialog box, declare these settings:

    • Rows: 1
    • Columns: 1
    • Table width: 98 percent
    • Border thickness: 0
    • Cell padding: 0
    • Cell spacing: 0
    • Header: None

    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.

  4. If you want to establish a background color, switch to the CSS tab of the Property inspector and choose a color from the Bg color picker (see Figure 1).

    The code will be entered as an attribute for the <td> tag, which is perfectly acceptable in an HTML email.

    Set basic cell properties in the Property inspector.

    Figure 1. Set basic cell properties in the Property inspector.

  5. Likewise, to center your content, choose Center from the Horz (Horizontal) list.

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.

Two steps backward for CSS

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:

  1. Place your cursor in the <td> tag you want to style.
  2. In the Property inspector, switch to the CSS tab.
  3. From the Targeted Rule list, choose <New Inline Style>.
  4. Select your typeface from the Font list, for example: Arial, Helvetica, sans-serif.

  5. The Targeted Rule changes to <inline style> to indicate that your font choice has been entered as a style attribute in the current <td> tag (see Figure 2).

    Inline styles can quickly be added in Dreamweaver CS4.

    Figure 2. Inline styles can quickly be added in Dreamweaver CS4.

  6. Choose or enter the size in the Size editable list.
  7. Select the Color swatch to display the pop-up color picker and choose the desired font color, or enter a hexidecimal value in the Color field.

  8. Click Bold or Italic to add font stylings.

    Clicking Bold adds a font-weight property to the style tag, whereas Italic adds a font-style property.

  9. If desired, set the alignment to left, center, or right by selecting the appropriate button on the Property inspector.
  10. If you need to add additional styling, such as margin, padding, or line-spacing, click Edit Rule to open the standard CSS Rule Definition dialog box or CSS Panel to display the CSS Styles panel where you can add attributes manually.

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.

Absolute images and links, absolutely

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:

 http://www.idest.com/images/email/logo.gif

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.

Always add alt and 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;"

Note the header graphic with images on.

Figure 3. Note the header graphic with images on.

With images off, the large text is still displayed.

Figure 4. With images off, the large text is still displayed.

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 on, everything flows together.

Figure 5. With images on, everything flows together.

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.

With images off, the text takes center stage.

Figure 6. With images off, the text takes center stage.

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.

Where to go from here

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.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author

Joseph Lowery's books about the web and web-building tools are international bestsellers, having sold more than 400,000 copies worldwide in eleven different languages. His most recent book is the Dreamweaver CS3 Bible. Joseph is the author of the recently published CSS Hacks and Filters as well as the co-author of Dreamweaver 8 Recipes with Eric Ott. A well-known speaker, he was presented at Adobe (formerly Macromedia) conferences in the United States and Europe as well as user groups around the country. Joseph is currently the Vice President of Marketing for WebAssist.