How To Code HTML Email Newsletters (Updated Version)

This article shows how to code HTML email so that it displays well in most email software, as well as mobile phones and tablets. It provides an exhaustive overview of how to code html email newsletters (even in Outlook) with links to free html email templates, CSS compatibility tables, services that test your html email, and much more.

This article strives to provide a comprehensive overview of all possible resources online compared to other articles on this topic which may be vendor-specific or focus on one aspect of how to code html email, for example, testing CSS styles across email software clients.

Here are some quick links if you only need specific information from this article:

• The Building Blocks
• Step 1: Use HTML Tables for Layout
• Step 2: Add in CSS Styles
• Step 3: Add HTML Email Best Practices and Testing
• Step 4: Code for GMail, Hotmail (Windows Live), LotusNotes, and Outlook 2007/2010
• Step 5: Create a Text Version of Your Email
• Coding for Mobile Phones and Tablets
• FAQs: Create HTML Email in Outlook, Background Images, Create Anchor Links in Email, Add Video to HTML Email
• NEW: Lynda.com How to Code HTML Email Training Courses
• “How to Code HTML Email” Slide Presentation
• Where to Learn More about Coding HTML Email, Including Free HTML Email Templates
• Changes to this article

Changes to this article are noted at the bottom of this article.

The Building Blocks

Whether you use a template or hand code (my preference), there are two key building blocks for html email:

• HTML tables control the design layout and some presentation, for example, background images
• Inline CSS controls presentation, for example, colors for backgrounds and fonts

The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download templates from Campaign Monitor and MailChimp, two email delivery services that provide free templates (links are below in the Where to Learn More section).

When you open up their templates, you will notice several things we’ll discuss in more detail later:

• CSS style declarations appear below the BODY tag, not between the HEAD tags. If a template has CSS declarations above the BODY tag, it’s simply a convenience: the email delivery service (Campaign Monitor, in particular) moves these declarations down to inline styles as part of their email delivery process.
• No CSS shorthand is used: instead of “font: 12px/16px Arial, Helvetica” break this shorthand into its components of font-family, font-size, and line-height.
• SPANs and DIVs are used sparingly to achieve specific effects while HTML tables do the bulk of the layout work.
• CSS style declarations are basic with no hacks required. That’s CSS1 and CSS2, not CSS3 (yet)

When you receive an interesting email — maybe it has a great design or does something unusual, be sure to save it to your computer as a text file then open the file with any HTML editor. It should be fairly easy to see how the email code is structured and learn from the experience. Even saving email from Outlook, which adds a ton of (spurious, in my view) code, can be easy to figure out if you’re persistent.

Step 1: Use HTML Tables for Layout

Determining the layout design is the first step in coding an html email. Single column and two-column layouts work best for emails because they control the natural chaos that results when a lot of content is pushed into such a small space as email.

• With a one column layout, typically there is a header that contains a logo and some (or all) navigation links from the parent website. Below that are any intra-email links to stories further down in the email. At the bottom of one column layouts are the footer (often with links that repeat the top navigation) and detailed unsubscribe instructions.
• Two-column email layouts also use a header and footer. They also typically use a narrow side column to contain features and links to more information. The wider column holds the main content of the email.
• Promotional emails follow the same rules but with much less content and links. They often include one to two messages and sometimes one big image with small explanatory text and links below the image.

No matter how your email is designed, the most important content (or reference to that content) should appear at or near the top of the email design, so it is visible immediately when a reader opens your email. The top left of an email often is the first place people look when they open an email.

All of these email layout possibilities can be coded easily with html tables to divide up the space into rows and columns. Using html tables also helps with problems caused by different email software and how they can read the same email code differently.

The basic approach follows these steps in coding the email layout with html tables:

• For a two-column layout, create one table each for the header, the center two content columns, and the footer. That’s three tables. Wrap these tables into another table that “wraps” or “frames” the other tables. Use the same approach for one column layouts except the content table has one column. This approach also helps with email designs that break images into multiple table cells. Otherwise, a single table with TD rows for header (with colspan=2 if the design is two column), content, and footer should display fine for all but Lotus Notes email software.
• Use the HTML table attributes within the TABLE and TD tags, for example, to set the table border=0, the valign=top, the align=left (or center, if that is the design), cellpadding=0, cellspacing=0, and so on. This primarily helps older email readers to display the html email in a minimally-acceptable way.
• Set the HTML table border=1 to help debug any problems with the internal alignment of TR and TD tags in development. Then change it back to border=0 for testing and production.

While this approach might offend purists who prefer to code to the latest standards, coding an HTML email is not coding a web page. They are two different beasts. The software used to view email differs. Most web browser software today, for example, display web pages the same way. That’s not the case with email software even though many email software clients use web browsers to render their HTML.

To give one example, Outlook 2003 used IE6/7/8 web browser software to render HTML which is mostly standards compliant. With Outlook 2007/2010, however, the rendering engine switched to Microsoft Word’s HTML rendering engine which is comparatively less compliant. Coding HTML email has to account for these differences over time.

Step 2: Add in CSS Styles

Once the email layout is coded as a set of nested HTML tables, the next step is to add in CSS styles. Here are the steps to follow:

• First, put style information (style=) into the HTML tags, for example, TABLE, TD, P, A, and so on.
• If you use a style declaration, place the CSS STYLE declaration right below the HTML BODY tag. Do not use the CSS STYLE declaration in the HTML HEAD tags as is done when coding web pages. Google Mail, in particular, looks for STYLE anywhere in the email and (helpfully) deletes it. And don’t bother to use CSS LINK to a stylesheet. Google Mail, Hotmail, and other email software ignore, modify, or delete these external references to a stylesheet.
• For the frame table, the one that contains the header, content, and footer tables, style the table width at 98%. Yahoo! and other web mail software need the 1% cushion on either side to display the email properly. If side gutters are critical to the email design, set the width at 95% or even 90% to avoid potential problems. Of course, the tables inside the frame (wrapper) table are set to specific widths measured in pixels. You can use percentages for widths of these inside nested tables. However, it is likely you will have to switch back if your testing fails in one or more email software.
• Put general font style information in the table TD closest to the content. This can mean repetitive style declarations in multiple TD cells. Put font style definitions into heading (e.g. H1, H2), P, or A tags after you have added your email copy, to make it easier to navigate your email code.
• Use DIVs sparingly to float small boxes of content and links to the right or left inside a table TD cell. Google Mail appears to ignore the CSS Float property but Yahoo! and Hotmail work fine. Outlook 2007 ignores floats. Sometimes it is better to code a more complex table layout than rely on the Float property. Or, since email is easy to clutter, ask that the design put the floated content in the narrow side column. Floats are the one part of an email design that might require the design be reworked.
• While DIVs appear to be barely useful, SPANs appear to work almost every time because they work inline. In some cases, SPANs can be used to position text above or below content, not just to color or re-size type.

If you download and study the email templates from Campaign Monitor and Mail Chimp, you’ll see they treat the frame table, the one that wraps the tables that hold content, as if it were the HTML BODY tag. Campaign Monitor calls it “BodyImposter” which is a great way to think about the frame or wrapper table. From a CSS perspective, the frame table does what the HTML BODY would do if services like Google Mail didn’t disable or ignore the BODY tag.

Step 3: Add HTML Email Best Practices and Testing

There are a number of best practices to follow to ensure your email code works well.

With the html email coded as described above, the next step is to test the email in a variety of email software. Often this will identify problems that require workarounds. For example, if you test with IE6, sometimes used to render HTML email in Outlook 2003, you might see your IMG tags need to use a style “border:none;” to remove the automatic heavy blue border IE6 adds.

The first test tools to use are the Firefox, Internet Explorer, and Chrome (or Safari) web browsers. If the email displays well or perfectly in these browsers, chances are good testing the email in Outlook, Yahoo!, GMail, and other services will reveal only minor problems.

The second set of tools to use for testing HTML email is Browserlab, from Adobe. This currently free online service will show you how your email displays in a wide range of web browsers, including IE6, IE7, IE8, and IE9.

The third step with testing is to send to test email accounts. Email delivery services such as MailChimp, Campaign Monitor, and ReturnPath include the ability to see how your email displays in an incredible range of email software. Browsercam and LitmusApps offer the same service but apart from any email delivery service.

The other way to send your HTML email to test accounts is to set up a number of test email accounts. While this should be unnecessary with services like Browsercam and testing capabilities with some email delivery services, the key is to look at the domain names in your email address list. For example, if there are few or no AOL subscribers on this list, then it may be a waste of time and money to set up an AOL email account.

Here are the most common code tweaks needed in this test phase:

• Sometimes a switch from percentage widths to fixed widths is required for the nested inside HTML tables. While fixed width is not optimal, because people can and do resize their email windows when reading, sometimes a fixed width is the only way for a layout to display properly in multiple email software.
• If there is a spacing issue with the columns in the email design, first tweak the cellpadding and cellspacing attributes of the HTML tables. If that does not work, use CSS margin and padding attributes. HTML spacing works better with older email software than spacing with CSS.
• Image displacement can occur when a TD cell is closed right below the IMG tag. This is an ancient HTML problem. Putting the </td> right after (on the same line as) the IMG tag eliminates the annoying and mystifying 1 pixel gap.

In addition, the following best practices are recommended:

• Avoid javascript. Most email software disables javascript.
• If an image is cut up and spread across several HTML table cells, test the email with many test accounts. Sometimes it looks great in Outlook but shifts by 1 pixel or more in Hotmail and other services. Also consider putting the image as a background image on a new html table (set the background= value to the URL of your image) that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results. Note that Outlook 2007 does not display background images. Be sure to test your email code with your target email software. (Campaign Monitor has published a solution to the background problem with Outlook 2007 and 2010, Add a Background Image to your Email in Two Simple Steps.)
• If you use background images, use the HTML table attribute background= instead of CSS. It works more consistently across email software, for example, GMail.
• Store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them. Some people open emails weeks or months later, the same way people use bookmarks to return to websites.
• Be sure all your images use the alt, height, and width parameters. This helps with Google Mail as well as when a reader has their images turned off. However, Outlook 2007 does not recognize the alt= parameter.
• Use the target=”_blank” attribute for the HTML A tags so that people reading with a webmail service don’t have the requested page appear within their webmail interface.
• While a 1×1 pixel image can be used to force spacing to create a precise email layout, spammers use 1×1 pixel images to determine if their email has been opened.
• Avoid a big image above the fold in the email. This is another classic spammer practice and can increase the likelihood an email will be tagged as spam.

My final test is to view the HTML email with images turned off. Outlook and some other email software set images off by default, to prevent spammers from knowing your email address is active. I set images off in my code by using my editor’s search and replace to delete some part of the src= URLs in my file.

Make sure your email content displays fine without images. For example, if you use a background image to provide a background color with white font color over it, make sure the default background color for that part of the HTML table is dark, not white. Also be sure your alt=, height=, and width= parameters are set for images so they can help readers understand your content without images. Turning off your images will help you catch these issues and ensure the HTML email will display effectively if people see your email with images off.

Once the html email is tweaked so that it displays well or perfectly in the test email accounts, the next step is to go through a checklist. Verify that

• The From address displays properly (as a name, not a bare email address)
• The subject line is correct
• The contact information is correct and visually obvious
• The top of the email has the text, “You received this email because … Unsubscribe instructions are at the bottom of this email.” This simple bit of copy will help reduce spam complaints.
• There is text asking readers to add your From address to their email address book
• The top of your emails include a link to the web version of your email.

Step 4: Coding for GMail, Hotmail (Windows Live), LotusNotes, and Outlook 2007

Google Mail (GMail), Hotmail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software.

Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed.

GMail deletes any CSS style reference to a set of styles, for example, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded.

Here are coding techniques that appear to work well in GMail and older email software:

• Define the background color in a TD cell with bgcolor=, not the CSS style.
• Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images. (Campaign Monitor has published a solution to the background problem with Outlook 2007 and 2010, Add a Background Image to your Email in Two Simple Steps.)
• If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work. However, in Outlook 2007/2010, margin-top and margin-bottom work in the TD cell but padding-top and padding-bottom do not. If you have vertical spacing problems, be sure to test thoroughly. Finally, some times using the line-height style can force vertical height when padding or margin does not work.
• If a border around a TD cell is needed, GMail displays a border when defined in a DIV but not when defined as a border style in a TD tag.
• If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag.
• If the P and A fonts appear to be different sizes, wrap the A tag in a P tag.
• Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges.
• When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly.

The main issue with Hotmail is with font rendering. For HTML heading (H1, H2, H3, H4) and P tags, you may have to use the ancient FONT tag to force Hotmail to render the correct color.

Besides GMail and Hotmail, another hazard coders face when coding email is less obvious: LotusNotes. Many large corporations continue to support and upgrade their Notes installations. As of 2004, IBM reported that 95 million people used Notes. Unfortunately, it is impossible to tell which companies use Notes and which version. The more primitive the HTML email code, the more likely it will work well, if not perfectly, with older versions of Notes.

That said, it is quite possible that old versions of Notes will introduce quirks that beggar belief, for example, converting images to their proprietary format. Or Notes will simply ignore flawless basic html in one email but display other html fine in another email.

Here is what apparently helps Lotus Notes display html email:

• Use a frame table that contains all the internal layout tables, for example, for the header, content, and footer. This keeps the email together in one chunk of html. Pieces of the layout are less likely to wander when displayed in Notes.
• Create a gutter around the frame (wrapper) table by setting the width to a percentage and/or using the cellpadding to at least 5.
• Don’t use a style declaration in the head tags. It is the proper way to code to standards, but Notes (like Google Mail) might delete your styles. Rely, instead, on inline styles within the TABLE, TD, H1, H2, P, A, and other tags. However, as noted in comments below by Yvonne, Notes 8.5 doesn’t recognize inline styles in the TD cells, only DIVs within a TD cell. You’ll have to experiment by coding and sending test emails.
• Use absolute URLs to images stored on a web server. Old versions of Notes cannot be prevented from converting images, if it does, but using remote images might help.
• Intra page jumps, using named anchors, rarely work in Notes, if ever. It is best to avoid links that jump down the email to a specific piece of content.
• Avoid colspans in the HTML table layouts. Notes apparently only handles basic table layouts, especially older versions of the software.
• Be sure TD cell widths have accurate widths. Unlike web browsers, which automatically make all cells the widest defined width, Notes sizes each TD cell based on its defined width.
• Centering an email layout usually does not work in Notes. Email layouts will have to be left-aligned.

Using these techniques for Google Mail and Lotus Notes also will ensure your emails display fine in Outlook 2007 and Outlook 2010 with its older HTML rendering engine. Microsoft has published details about what their email software will and won’t display properly (see Resources below for the link). And the Email Standards Project has additional details. They also lobby companies like Microsoft to improve their products.

The bottomline with Outlook 2007/2010, LotusNotes, Hotmail, and GMail is that success requires coders to make sure their HTML email code works across most email software. That means simple, older, standards-compliant code works best in most if not all situations.

Many people who receive email prefer HTML over text for any number of reasons. For programmers, however, the task of coding an HTML email appears both simple and horribly complex. Hopefully this article has described many of the issues and coding strategies that work across email software so that you can code HTML emails effectively.

What is the best idea to take from this article? If there is a choice to be made between a simple coding solution and a more complex solution, simplicity always works better.

Step 5: Create a Text Version of your Email

It’s important to create and send a text version of any HTML email you send. Some large number of readers prefer text emails, especially outside the US. And including a text email helps avoid having your email tagged as spam (because few spammers include a text version with their HTML emails).

How to design and create a text email is not really covered online anywhere. There are great examples I’ve seen. At the least, be sure the headings are visually distinct from the copy. This might mean adding an extra line break above your headings. Or using simple text characters (e.g. ++++ or ____) before or after headings to make them stand out and to make it easy for readers to scan down your text email.

In my new online courses for Lynda.com (see below), I provide a free video that shows how to convert an HTML email into a text email. If you’re interested, it can be found in the course, Effective HTML Email and Newsletters.

Coding for Mobile Phones and Tablets

This section is a summary and adaptation of a terrific guide from Campaign Monitor, Responsive Email Design. Be sure to read their full guide if you need all the details.

Reading email on a mobile smart phone can be challenging. Most people learn to use their fingers to zoom in to read a section, then push the content up to see the rest of the email. As much as 20% of email is read on a mobile phone, and most of those are iPhones. It is possible to design and code for small devices without limiting how email displays in traditional email software.

Coding HTML email to display well on phones and tablets takes account of the constraints:

• The traditional width limit of 500 to 600 pixels wide works best because they’re easier to read on a phone and they degrade well.
• Fonts cannot be smaller than 13 points to be visible.
• Buttons should have a minimum size of 44×44 pixels.
• Content, links, and buttons should be used sparingly for maximum effect. And reduce scrolling. Call to action buttons, for example, probably should be above the fold and not require scrolling to view.
• Because coding email to display well on a phone uses CSS @media queries, you can (and should) strategically hide elements to optimize the phone display and desktop email client display.

The key that makes coding for phones possible is that other email clients will ignore the extra phone-specific code or, even better, strip out the code. The only exception is Windows 7 Mobile which strips out any code between <style> tags in the HEAD or BODY area.

Should you code for phones and tablets? As always, it depends on your statistics: if you see a number of your readers use a phone or tablet, it’s worth the time to design and code for these devices.

Here is a basic example how to use the CSS @media query to target mobile phones:

<style type=”text/css”>
    @media only screen and (max-device-width: 480px) {
    /* mobile-specific CSS styles go here */
        table[class=contenttable] {
            width: 320px !important;
        }
    }
</style>

If you assign your layout table class=”contenttable”, traditional email client software will ignore this code unless the browser width or client width is less than 480 pixels wide. As noted elsewhere in this article, you also set the width attribute of your table inline, in the TABLE tag, so the width definition will not be stripped out and, therefore, it works with all email software.

Add any styles targeted to mobile phones or tablets to the STYLE code above. Here is the @media definition for iPads:

@media only screen and (min-device-width:768px) and (max-device-width:1024px)

Another phone-friendly technique uses responsive design techniques and HTML tables. (If don’t recognize the term, responsive design is HTML and CSS code that responds to the device used to view the code, literally shrinking or growing based on the width of the browser or email client used in a phone, tablet, notebook, or desktop screen.) The code structure for a 2-column email design that displays single column on phones is fairly simple:

• The HTML table that contains the content is set to a traditional width attribute, for example, 500 to 600 pixels wide.
• Each column is an HTML table with a width attribute equal to half the container HTML table.
• Each content column, a standalone HTML table, has a cellpadding attribute set to 10 or 20 to provide space around the content.
• Each content column, a standalone HTML table, has align=”left” attribute instead of CSS float:left.
• The final step is to use the @media style code above to set the HTML table that contains the content to a phone-friendly width of 320px.

The result is an email that displays well on any traditional email client and degrades into a nice single column email when viewed on an iPhone, Android phone, or other small screen phone. The widths of the container HTML table and the content column HTML tables can be tweaked to different sizes (and using the @media query to make them equal width for phones), as well as the cellpadding settings, to achieve clean effective designs for mobile phones and tablets.

Finally, to show or hide content for phones, use the display:none definition for specific classes assigned to content. Then use the :hover pseudo-state to display:inline the content (add !important to ensure the content displays).

More details about coding HTML emails for mobile phones, as well as responsive design and progressive disclosure of content can be found in the Campaign Monitor guide, Responsive Email Design. Their guide includes a sample file to dissect, as well as ideas for how to handle images for Retina displays on Apple phones and computers.

Frequently Asked Questions

How to Create HTML Email in Outlook 2003

The basic approach is to create your html email as a separate html file and then create a signature file and use your html email as the signature file. Then you open a new email message and add the new signature file. This prevents Outlook 2003 from helpfully converting all your precious html code into text. If you only have Outlook 2007 or later, unfortunately the software no longer supports HTML code in email signature files.

To create a signature file in Outlook 2003:

1. Select Tools from the top menus, then Options, then the Mail Format tab in the Options pop-up that will appear.
2. Down on the lower right of the Mail Format tab is a Signatures button. Click that button and a Create Signature pop-up will appear.
3. Click the New button on the Create Signature pop-up and a Create New Signature pop-up appears. Give your new signature a name and select Use this File as a Template and browse to your HTML email.

Then create a new email message, click in the body of your email message, select Insert from the mail dropdown menu and Signature then your new signature file.

People usually ask this question because they want to send html email from their internet account. Don’t. Unless you know every person on your email list, too many bad things can happen if someone tags your email as spam. If you send email through your business domain name, for example, all your email will be tagged as spam. And you will be left to figure out how to get off any blacklists. Even if you know everyone on your list, your internet provider may have a limit to how many messages can be sent and may boot you off their service. It’s far less hassle to pay an email service provider to deliver your email and worry about spam blacklists.

How to Use Background Images in GMail, Lotus Notes, and Other Services

Using images as a background in an html email is problematic. One way is to carve up your image and divide it among HTML table cells and rows, using the background= setting for the table. You also can put the image in a new html table that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results. However, Outlook 2007/2010, Google Mail, Lotus Notes 6, and Live Mail do not display background images easily. Be sure to test your email code with your target email software. Whatever you do, be sure your email design degrades nicely if and when the background image does not display. If you use white text, for example, against a dark image, make the default background color a dark color.

How to Create Anchor Links in an Email

Like image backgrounds, links within an email do not always work. You should test first. Over the years, I have cracked open a few emails with intra-email links and find they use the basic HTML anchor tag to link to a defined name= bookmark.

How to Add Video to HTML Email

It is difficult but possible to add video to your html emails. Campaign Monitor has a great article, “HTML5 and video in email“, that covers all the steps to make video available within email software clients that can display video while degrading well for email software that cannot display video in an html email. Their article includes test results across many email clients, as well as comments with more insights and results.

NEW: Lynda.com How to Code HTML Email Training Courses

About a year ago, Lynda.com asked if I would do this article as two online courses. We created two courses, Effective HTML Email and Newsletters and Creating an HTML Email Newsletter. They also asked John Arnold to do a course on the business end of email marketing, Effective Email Marketing Strategies.

With my courses, as with this article, my approach is to take a broad and inclusive view of all the different issues you might face when coding HTML email. I’ve also tried to include important topics lightly covered or not covered at all online, for example, how to automate the creation of HTML emails with WordPress and Expression engine, MIME types (how HTML email actually is put together, useful for people building applications that generate HTML email), and how to design text emails. I’ve also demo’d how to create HTML email with Feedburner and Feedblitz. And how to send emails with a range of email delivery services.

While this article is useful for many people who need ideas about how to fix problems their having coding an HTML email, or how to get started, my Lynda.com online video courses aim to be truly comprehensive.

Lynda.com costs $25/month. However, it is cheap because it pays for access to all their courses. Chances are coders and designers will find plenty of useful courses in addition to what we’ve created on the topic of coding HTML email. Lynda.com does provide free videos for each course so you can check out the goods before subscribing.

And finally I’d mention Lynda.com was the first resource available to web designers and coders circa 1995 and 1996 on key topics such as how to use color in web pages. They’ve evolved into a truly exhaustive and creative training resource. At the least, you should check them out if you’re not a subscriber already.

“How to Code HTML Email” Slide Presentation

I recently presented this information in a slide presentation, if it is useful:

My presentation also included a one-sheet with resources for coding HTML email newsletters.

Where to Learn More

Besides this article, these online resources should be very helpful:

Email Standards Project

http://www.email-standards.org/

Probably the best start point for understanding exactly how different email software complies with HTML and CSS. They also maintain an acid test they use to compare compliance across email software. And you can participate to help improve standards.

Free HTML Email Templates

http://campaignmonitor.com/resources/templates.aspx

http://www.mailchimp.com/resources/html_email_templates/

Both email delivery services actively test their templates over time with different email software. However, there are subtle differences to note. Campaign Monitor has its STYLE declaration within the HEAD tag while Mail Chimp does not. Be sure to test your final HTML code with whatever services are used by recipients in your email list.

Coding for Mobile Phones and Tablets

http://www.campaignmonitor.com/guides/mobile/

Plain Text Email Design Guidelines

http://www.campaignmonitor.com/resources/plain-text-templates.aspx

This article has a number of simple ways to make text emails easier to scan.

Blocked Email Images

http://www.clickz.com/showPage.html?page=3413471

http://www.campaignmonitor.com/blog/archives/2005/11/email_design_guidelines_for_20.html

From 2004, the ClickZ article shows how major email software compares for blocked images and preview panes. The Campaign Monitor article goes into greater detail with actual examples and ideas how to combat default image off rendering of your emails, as well as designing your email to look okay in preview panes.

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

http://msdn.microsoft.com/en-us/library/aa338201.aspx

The official Microsoft description of what Outlook 2007 will and will not render for HTML and CSS. Includes a link to a validator that works in Dreamweaver, as well as Microsoft editing tools.

A Guide to CSS Support in Email

http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

Campaign Monitor, an email service provider, has taken Xavier Frenette’s excellent work documenting CSS performance in a few email clients and expanded it to include Gmail, Hotmail, Yahoo! and Windows Live Mail, as well as for the PC they cover Outlook 2003 and Outlook Express, Lotus Notes, and Thunderbird and for the Mac they cover Mac Mail, Entourage, and Eudora.

MailChimp Email HTML Coding/Delivery Guide

http://www.mailchimp.com/resources/email_marketing_guide.phtml

Lots of great information about all aspects of html email, including how spam filters work.

Safe CSS Styles for HTML Email

http://www.danielneumann.com/blog/safe-css-styles-for-html-emails

A simple list of styles by Daniel Neumann that test out okay for most email software clients.

CSS Support in HTML Emails of Hotmail, Yahoo! Mail, and Gmail by Xavier Frenette

http://www.xavierfrenette.com/articles/css-support-inwebmail/

This is excellent research and style by style results that show how these three webmail services display CSS.

Secrets of HTML Email Series

http://www.graphics.com/modules.php?name=Sections&op=listarticles&secid=16

Some of this information is old but they have a good piece on Lotus Notes.

Lotus Notes Trial Software

http://www-128.ibm.com/developerworks/lotus/downloads/

Free downloads of their latest software if thoroughly testing an email with the Notes client software is needed.

HTML Email and Web Page Testing Services

http://www.mailchimp.com MailChimp Inbox Inspector

http://www.campaignmonitor.com/testing/

http://www.browsercam.com Browsercam also has updated their service to display your pages at a variety of screen resolutions.

https://browserlab.adobe.com/ Adobe BrowserLab currently is free and available anywhere with a modern browser. It’s easy to use and displays the full range of bad browsers, specifically, IE6 and IE7. But it also shows Chrome, Firefox, and Safari.

http://www.litmusapp.com

Test compatiblity of your web pages with a variety of web browsers and operating systems. For email, Browsercam simply shows you all the warts in your html code, even though your email might work fine in Notes, Google Mail, and other difficult email software environments. Litmus shows how your email appears in email software.

http://www.returnpath.net/commercialsender/monitoring/ ReturnPath, an email service provider, also has a service to validate email delivery across platforms that is comprehensive, according to Daniel Neumann in comments below.

Best Practices For Bulletproof E-Mail Delivery

http://www.smashingmagazine.com/2007/10/16/best-practices-for-bulletproof-e-mail-delivery/

Excellent overview with some interesting ideas, resources, and details, for example, sending emails on Tuesdays and Wednesdays from 2-3 p.m. That mirrors my experience for lists with business email addresses (people come back from lunch and do email before meetings or getting back to work). The best way to ensure delivery, however, is to use email inspection services provided by email delivery vendors: it’s their job to keep up with what works best to deliver emails.

Testing Internet Explorer 6 Web Browser

Microsoft’s Expression Web SuperPreview lets you see how your email (or web pages) look in software that uses the Microsoft web browser engine. Unfortunately, the Preview portion is not free. You have to buy the whole package of Expression Web 3 software. Adobe’s Browserlab site is free and might be a better option to check small changes and validate your html email displays fine.

Standalone Internet Explorer 6 Web Browser

http://tredosoft.com/Multiple_IE

This free software lets you run install and run IE6 and IE7 without causing conflicts. With Vista and now Windows 7, this only works at installing IE6 because Windows only lets you have one IE running at a time. Better to use BrowserLab to test against email clients that use the IE6 or IE7 html rendering engine. Also, Microsoft’s Expression Web Super Preview is an easier and better option for the future.

Changes to This Article

This article has been published and maintained since 2004. Here are the most recent changes:

• Added section on coding HTML email to display well on mobile smart phones and tablets, based on a guide from Campaign Monitor, Responsive Email Design. I plan to add content on the topic, possibly a second article. (September 11, 2012)
• Rewrote the article to add a number of changes based on experience (e.g. Hotmail and font colors require using the FONT tag, vertical margin and padding in Outlook). Also added mention and links to Lynda.com courses based on this article.
• Updated the Outlook hack to send HTML email through Outlook based on Pnexus’ comment below. Outlook 2007 no longer supports HTML code in email signature files. The hack works only with Outlook 2003.
• Updated Lotus Notes bugfixes per Yvonne’s comments below. Added two resources per Daniel Neumann’s comments below. (January 17, 2010)
• Updated references to background images to include a Campaign Monitor solution to the background problem with Outlook 2007 and 2010 and GMail, Add a Background Image to your Email in Two Simple Steps. (July 15, 2010)
• Embedded slides from a presentation I gave recently on How to Code HTML Email Newsletters. It included a one-sheet with resources for coding HTML email newsletters. (June 15, 2010)
• Based on a comment, clarified the reason you might see CSS styles above the BODY tag open in some email templates. The email delivery service that provides the templates moves these styles down into inline styles as part of the delivery process. Added link to Best Practices For Bulletproof E-Mail Delivery article in the Learn More section directly above. (May 26, 2010)
• Added link to Microsoft’s Expression Web SuperPreview software that shows how your html email looks in older email software that uses the Microsoft web browser engine. (February 15, 2010)
• Added link to Adobe’s BrowserLab online service that, like BrowserCam, lets you see how your web page (in this case, an html email) displays in older browser technology like IE6 and IE7. This is useful for sending HTML email to older AOL email clients. Also added the FAQ about how to add video to HTML email. (November 13, 2009)
• Added intra-page links to help people who arrive here from search engines. Also added link to MailChimp’s HTML Email Inbox Inspector service. Added FAQs. (January 23, 2009)
• Updated link to MailChimp’s free HTML templates. Their URL changed without any automated redirection. (February 23, 2009)

Leave A Commentposted in Articles by Tim Slavin