Developing an HTML-formatted mail message

by Tony Patton | Mar 19, 2007 2:17:00 PM

Tags: Web browsers, Tony Patton, HTML, e-mail, Web Development Zone Newsletter

Takeaway: Creating HTML-based e-mails for newsletters or other content is a simple process if you adhere to a few guidelines like using tables for layout, keeping the design simple, and sticking with inline CSS.

As an application developer, I have worked with sending e-mail messages for various system-related tasks but never for commercial purposes. This recently changed when a client asked me to design a newsletter delivered via e-mail. It was a straightforward request, but the task of including HTML in e-mail is not so simple.

Take your pick

As any Web developer knows, controlling the user experience with the vast array of browser options available is not easy. For this reason, developers often select and use a set of target browsers (usually Internet Explorer or Firefox) during the development process.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

When reading e-mail, a user may utilize one of the previously mentioned browsers or use a specific mail client such as Microsoft Outlook, Eudora, Thunderbird, and Lotus Notes. The overwhelming number of options results in a familiar development technique: developing for the common denominator.

Dumb it down

While researching techniques for designing and delivering efficient HTML-based mail messages, a common component is utilizing the established practice of HTML table-based layout. CSS and Web standards are the suggested solution for Web-based development these days, but the same is not true for HTML e-mail.

I don't mean to infer that no e-mail clients support CSS, but you should use HTML tables for layout if you need HTML-formatted e-mails to consistently display in a user's e-mail client. (Remember the many caveats of page layout with tables?)

You can use the following guidelines to make every attempt to deliver a consistent presentation regardless of the e-mail client:

One table is used to control the layout of the message body. You should use single- or two-column layouts.
The message body can consist of a header, the body, and a footer. Individual tables are used for each.
Use table and table column attributes to control display characteristics. This includes alignment (both vertical and horizontal), cell spacing, and padding and borders.
Avoid DIV tags and utilize SPAN elements where appropriate. SPAN elements can be used for styling text, as well as positioning text above or below content.

CSS options

CSS can and should still be used (well, only inline CSS) for styling elements like color and font. That is, include the CSS with its element. For example, the following header element is styled as 12-point Times Roman presented as red.

<h1 style="">Example</h1>

Listing A is a very simple example of sending an HTML-formatted mail message via an ASP.NET page coded with C#. The code creates a mail message and populates the sender (from), recipient (to), and subject fields. The body of the message is formatted as HTML, and the appropriate markup is added. Only the ASP.NET Web Form's Page_Load event code is included. The example demonstrates a basic one column structure with individual tables for the header, body, and footer portions of the message.

Testing

The only way you can really know whether a design is acceptable is by testing it. This can be a time-consuming process (which is why many developers loathe it) because you need to install the mail client software (like Eudora and Lotus Notes) and test with various Web-based services like Hotmail, Gmail, and Yahoo Mail. If the design works well with these clients, you can expect positive results with other readers. If you aren't targeting a specific e-mail client, a good rule of thumb is testing a solution with both Internet Explorer and Firefox.

Resources

Working with HTML-based e-mail newsletters is not a new concept. Countless developers have traveled down the treacherous road and, thankfully, some of them share their hard work with the rest of the community. Here are valuable resources for creating HTML newsletters:

MailChimp: A blog devoted to e-mail marketing. The site also features an extensive list of guidelines to follow when creating and sending HTML-based e-mail.
ReachCustomersOnline.com: Internet guru Tim Slavin's Web site provides how-to information to anyone who is involved with using the Internet to reach customers.
StyleInEmail: Get simple guidelines for HTML mail, as well as a list of e-mail clients and their level of HTML support.

Reaching customers

The ultimate Internet killer app is e-mail, and using it to reach current and prospective customers is a no-brainer. However, developing visually appealing e-mails with HTML and CSS has its pitfalls. Two ways to avoid problems is using tables for layout and keeping the design simple.

What advice do you have for developers who need to design HTML-based e-mails? Share your experience with the Web development community by posting to the article discussion.