Creating cross-client HTML emails
Created
19 January 2009
Requirements
Prerequisite knowledge
Basic knowledge of HTML and use of Dreamweaver.
User level
Intermediate
Required products
- Dreamweaver CS4 (Download trial)
Sample files
- html_email_files.zip (7 KB)
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.
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:
- 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>. - From the Insert panel Common category, select Table.
- 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.
- 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.
- 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:
- Place your cursor in the
<td>tag you want to style. - In the Property inspector, switch to the CSS tab.
- From the Targeted Rule list, choose <New Inline Style>.
- Select your typeface from the Font list, for example: Arial, Helvetica, sans-serif.
- The Targeted Rule changes to
<inline style>to indicate that your font choice has been entered as astyleattribute in the current<td>tag (see Figure 2).
- Choose or enter the size in the Size editable list.
- 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.
- 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.
- If desired, set the alignment to left, center, or right by selecting the appropriate button on the Property inspector.
- 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;"
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.
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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS
- Simple styling with CSS
- Managing multiple subscriptions in PHP
- Building a subscribe/unsubscribe app in PHP with Dreamweaver CS3
- From table-based to tableless web design with CSS – Part 1: CSS Basics
- Creating your first website – Part 3: Adding content to pages
- Creating your first website – Part 4: Adding the main image text
- Best practices with CSS in Dreamweaver CS4
- Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 1: Initial design
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
