Author Archives: Tim Slavin

How to Code a Simple HTML Email

You might think coding an HTML email is exactly like coding an HTML web page. You’d be wrong. Coding an HTML email is an exercise in learning and coding HTML circa 1998, with some tweaks to adapt to modern phones. CSS is allowed but it has to be placed inline with your HTML code. And your email layout must use HTML tables.

In 2013, most people would say these restrictions are crazy, myself included. These restrictions exist because a lot of email software cannot display modern HTML and CSS. Older versions of Outlook, for example, use the HTML rendering engine used by Microsoft Word which supports an out of date HTML standard.

The number of people who use older email software, especially in offices, is extremely large. While you could ignore these readers, and hope they can read the text version you send along with your HTML email (if you do that), where’s the fun or the coding challenge?

Even more interesting, services like Gmail and Yahoo! mail bundle your email code inside of their web page code used to display your email. These services also change your email code, for example, stripping out any classic CSS stylesheet information. Here’s a screen shot to show how Gmail nests an HTML email in all their web page code:

The Join.me Email Code Buried in Gmail's Code
Figure 1. Find Your HTML Email Code!

The dark blue highlighted block of code in this image is an HTML email built from nested HTML tables. It’s rolled up into a single line of code so you can see how much Gmail code is wrapped around HTML emails. Note the slider bar on the right edge indicates more code exists above and below what you see in this screen shot. The same dynamic applies for any webmail service. This is the main reason HTML emails need to be wrapped in ancient HTML table code, to ensure they display properly in all email software.

These Help Kids Code projects and puzzles are designed to help practice how to identify then solve problems. With this project, the problem is emailing an HTML web page doesn’t work in a lot of situations. The solution is to use HTML code that works in all email software. My goal is to show you the process a professional coder follows to convert an email design into code.

If you are game, let’s get started.

Tools You Will Need

For this project, you’ll need to have:

  • A text editor (Windows: Notepad, Notepad++; Mac: TextEdit, TextWrangler; Linux: vim, nano, …)
  • A web browser (Chrome and Firefox to start, Safari for iPhone testing later)
  • An email delivery service with ability to test email (e.g. MailChimp, CampaignMonitor)

Note you do not need an email delivery service. You can emulate how a phone web browser displays by resizing the width of your Chrome, Safari, or Firefox web browser. If you’re creating an HTML email to send, then definitely set up an account with an email delivery service.

The Basics of Coding HTML Email

First, before we start to code an HTML email, you have options beyond hand coding. Many email delivery services today provide canned email templates you can tweak to get a brilliant result. Plus they make it easy to send a text version of your email, always a good idea that also reduces the spamminess of your email.

However, it never hurts to understand how canned HTML email code works, worst case, or how to code an HTML email customized to meet your needs, best case.

Second, there are several things to keep in mind before we code:

  • Use a simple text editor like Notepad++ (Windows) or TextWrangler (Mac). Both of these tools are free. Do not use Dreamweaver, Word, or any tool unless they have the ability to output pure untouched HTML code. Even then, you might get annoyed when these editors helpfully (or unhelpfully) convert your CSS code into shorthand and create other problems.
  • Use a Chrome and Firefox web browser to test your HTML email code. Near the end of the process, you’ll want to test in a wider range of browsers and email clients but we’ll talk about testing at the end of this article.
  • Your email layout must use HTML tables (or HTML table with columns and rows) to create header, content area, side column (if you use one), and footer. These individual HTML tables (or columns and rows) must then be nested into a single HTML table that will perform the same role as the HTML BODY tag. This outer wrapper HTML table is critical: it’s a space ship to protect the code inside, no matter what email software is used to view your email, or what the email software might do to your code. See Figure 1 above for an example.
  • CSS must be inline, built into your HTML table elements as well as your basic content-related HTML tags, for example, H1, H2, H3, H4, P, A, UL, OL, and LI. And each bit of CSS must not use shorthand. No padding: 0; allowed. Instead, you have to use padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; to make your email display properly in all email software.
  • Using ancient HTML tags like B instead of STRONG and I instead of EM tags also is important. I did say coding HTML email is like coding circa 1998.
  • I’ll say it now: padding and margin settings are not your friends. Microsoft Outlook, especially older versions, prefer padding while other email software prefer margins. Space around your content will be the biggest headache you’ll face as you code and test. HTML table code also adds the option of cellpadding and cellspacing.
  • Finally, the significant increase in the number of people who view their email on a phone means you have to account for how phone email displays. A phone, for example, can display content horizontally or vertically with different results. Email design and layouts need to expand and contract. This also impacts font sizes. The good news? I’ll show you a code technique that displays well for both desktop and phones.

What We Will Code

Here is a screen shot of a basic sample HTML email we’ll code for this project:

A basic email design we will code
Figure 2. The Email Design We’ll Code

This is a screenshot of a typical two-column email you might receive. We’ll code the email so it displays well on phones. Usually you have to pinch the phone screen to zoom in to read these emails because the email is wider than the phone screen. Phone screens are about 480 pixels wide (landscape wide mode) or 320 pixels wide (portrait tall mode) while most HTML email is 500 pixels wide or more.

Here is the screen shot with boxes to show how to convert the email design into a grid structure which we’ll turn into nested HTML tables, with each rectangle either an HTML table or an HTML table row and table data cell:

A basic email design with grids
Figure 3. Our Email Design with Grids to Define HTML Table Layout

In this design, the purple outer grid will be the HTML table to hold our inside HTML table. The inside table will hold all the parts of the email.

These are the steps we will follow to learn how to code our HTML email:

  • Step 1: Define the HTML email (e.g. colors, widths, spacing, images)
  • Step 2: Code the HTML Email Layout as Nested HTML Tables
  • Step 3: Style the HTML Table Layout
  • Step 4: Style the Email Content
  • Step 5: Add Email Content to HTML Table Layout Code
  • Step 6: Test and Tweak Your Email

To be clear, every programmer works a little bit differently. I find this process worked for me for coding dozens of emails for clients. You might do things differently and, absolutely, if you polled ten different coders who have coded HTML emails, they might work in a different way. There are always several ways to solve coding problems, in other words.

The Learn More links at the bottom of this article also include resources to clarify these tasks. For example, CampaignMonitor.com, an email delivery vendor, provides a helpful chart of what CSS works in what email software. I also link to a real life email that has been neatly dissected and laid out so you can view and study their technique.

If you’re ready, let’s get started.

Step 1: Define the HTML Email

With any HTML email, you begin with the design. Usually this is a JPEG file, an image hopefully the actual size for the email. In some cases, you have to reduce the image size to a comfortable width, then define all parts of the email. For example, a width of 500 pixels or 600 pixels displays well in most desktop email software, as well as webmail. This step also involves sampling colors and writing down their code values, measuring white space between elements in the email, sizing fonts, and any detail that will help code the correct padding, headings, images, and so on.

Usually I start by printing the JPEG image file then mark up measurements by hand. This marked up printout becomes my map for coding HTML tables to layout the email, coding the CSS styles used for headings and copy, and placing images within the HTML tables.

Here’s what a marked up print out looks like for me:

A basic email design marked up
Figure 4. My Marked Up Design Printout with Definitions

If you don’t know, details like #efefef is the RGB (red, green, blue) color value for a color, in this case the pale grey background behind our email. I extract these color values with Photoshop but almost any graphics program lets you define and extract color values for HTML coding. In HTML, colors range from #000000 (black) to #ffffff (white).

Step 2: Code the HTML Email Layout as Nested HTML Tables

Let’s begin with a look at the email layout with a grid overlay shown above in Figure 3:

A basic email design with grids

Each of these blocks will be turned into a nested HTML table or columns and rows in a single HTML table. How the blocks are defined depends on the email design and your preference.

The first table we’ll code is the container table that will perform the same role as an HTML BODY tag. This table will contain all our nested tables for header, content area, and footer. The main purpose of this table is to protect the email code inside it.

<!-- First HTML table acts as a pseudo BODY tag to protect email inside -->
<table width="99%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top">

        </td>
    </tr>
</table>

Notice a few details about the highlighted lines of this code:

  • The table width is set to 99% to ensure a thin gap on the sides of your HTML email. Some webmail like Yahoo! and Gmail need this space to display your email cleanly against any ads or other elements in their email software interface.
  • border=”1″ is set to help us see the grid layout as we build nested HTML tables. When we have clean code that tests out, we’ll set border=”1″ to border=”0″.
  • cellpadding=”0″ and cellspacing=”0″ are set to nothing on purpose. As you’ll see with other choices, what you actually do depends on preference and your email design. You could set either to 5 or 10 but cellpadding and cellspacing are blunt instruments compared to using the padding and margin styles. What you use depends on your design and CSS options.
  • The TD cell with align=”center” will ensure the email inside this table will display centered. The TD (stands for Table Data) cell will hold all the HTML table(s) we’ll create to code our HTML email.
  • The TD cell with valign=”top” will ensure the email inside this table will float to the top of the email.

Next, let’s code the HTML tables for the email layout. This table will hold the header, content area, and footer at a set width. Don’t panic when looking at this code. Instead, take a deep breath and look at the comments in the code, as well as sample text.

<!-- First HTML table acts as a pseudo BODY tag to protect email inside -->
<table width="99%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top">

            <!-- Second HTML table is the email itself -->
            <table class="email" width="500" border="1" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" valign="top">

Top message

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">

Logo

                    </td>
                </tr>
                <tr>
                    <td valign="top">

                        <!-- Third HTML table is the left column of content -->
                        <table class="email-content" align="left" width="350" border="1" cellpadding="20" cellspacing="0">
                            <tr>
                                <td valign="top">

Left copy

                                </td>
                            </tr>
                        </table>
                        <!-- Close third HTML table -->

                        <!-- Fourth HTML table is the right column of content -->
                        <table class="email-content" align="right" width="150" border="1" cellpadding="20" cellspacing="0">
                            <tr>
                                <td>

Right copy

                                </td>
                            </tr>
                        </table>
                        <!-- Close fourth HTML table -->

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">

Footer

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">

Bottom copy

                    </td>
                </tr>
            </table>
            <!-- Close second HTML table -->

        </td>
    </tr>
</table>
<!-- Close first HTML table -->

Honestly, this nested HTML table code is fairly easy to explain:

  • The first table acts as a pseudo BODY tag. It’s width is 99%. It holds all the HTML tables. We’ve seen this table before.
  • The second nested table holds the email and is set to a specific width, in this case, 640 pixels wide. For clarity and to speed this project, this table holds the entire email.
    • The top table row (TR) holds the top bit of email content, usually a link to the web page version of the email but also a short sentence telling readers how you got their email address and where to unsubscribe.
    • The second table row (TR) holds the header with the logo and links if any.
    • The third table row (TR) holds the email copy in one column and the right column. The left column is the third HTML table while the right column is the fourth HTML table. Why use HTML tables instead of table data (TD) cells? To allow these two columns of content to slip down when viewed on a phone. Notice on line 26 the third HTML table code has align=”left” while on line 38 the fourth table has align=”right”. This ensures our HTML email viewed on a phone will degrade nicely; content will slide down to make it easy to scroll. Also notice we set cellpadding=”20″ on both these tables.
    • The fourth table row (TR) holds the footer content.
    • The fifth and last table row (TR) holds the bottom of the email content, usually the sender contact information and links to unsubscribe and share with a friend.

As you work with HTML tables, be sure to set the border= setting to 1. This will display the outlines of all parts of your HTML table and make it easier to debug any problems.

If you compare this code with the original design we started with, in Figures 2 and 3 above, we have accounted for every part of this email. Now it’s time to add code in a series of steps.

Step 3: Style the HTML Table Layout

With our email layout coded as nested HTML tables, let’s add background colors to the HTML tables based on our marked up printout of our design, shown in Figure 4.

<!-- First HTML table acts as a pseudo BODY tag to protect email inside -->
<table width="99%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top" bgcolor="#efefef">

            <!-- Second HTML table is the email itself -->
            <table class="email" width="500" border="1" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" valign="top">

Top message

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" bgcolor="#ffffff">

Logo

                    </td>
                </tr>
                <tr>
                    <td valign="top">

                        <!-- Third HTML table is the left column of content -->
                        <table class="email-content" align="left" width="350" border="1" cellpadding="20" cellspacing="0">
                            <tr>
                                <td valign="top" bgcolor="#353535">

Left copy

                                </td>
                            </tr>
                        </table>
                        <!-- Close third HTML table -->

                        <!-- Fourth HTML table is the right column of content -->
                        <table class="email-content" align="right" width="150" border="1" cellpadding="20" cellspacing="0">
                            <tr>
                                <td valign="top" bgcolor="#999999">

Right copy

                                </td>
                            </tr>
                        </table>
                        <!-- Close fourth HTML table -->

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" bgcolor="#cccccc">

Footer

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">

Bottom copy

                    </td>
                </tr>
            </table>
            <!-- Close second HTML table -->

        </td>
    </tr>
</table>
<!-- Close first HTML table -->

If you compare this code with Figure 4, the marked up printout of our design, you’ll see the colors added in lines 4, 16, 28, 40, and 52. Use the bgcolor= element because it is the native HTML table standard.

Step 4: Style the Email Content

With the email layout sorted, let’s tackle content. I add the content shown in Figure 2 above, then the HTML tags, then the CSS styles apart from the HTML table code. It makes the job much less intimidating and easier to manage. If the copy changes, for example, I simply update the copy then paste the new copy into the HTML table layout. It is harder to do the replacement job working with the full set of email code.

Content with CSS could be in a second file or at the bottom of our HTML email file. If you put the marked up content at the bottom of the HTML email file, be sure to remove it as a last step, after you copy or move the marked up content into the body of the HTML email.

To start, let’s add basic HTML tags to our content, for example, headings and paragraph tags H1, H2, and P:

<p>
A short sentence telling readers how you got their email address and where to unsubscribe.
</p>

<h1>
1-2-3
</h1>

<p>
<a href="" target="_blank">
Home
</a> | 
<a href="" target="_blank">
Link 1
</a> | 
<a href="" target="_blank">
Link 2
</a> | 
<a href="" target="_blank">
Link 3
</a>
</p>

<h2>
Fusce Interdum
</h2>

<p>
Donec in lacus in ante facilisis dignissim quis auctor elit. Praesent hendrerit ligula sit amet tortor luctus, ut hendrerit turpis fringilla. Maecenas nec sapien lacinia, mollis nisi ut, euismod turpis.
</p>

<p>
Curabitur cursus metus hendrerit iaculis laoreet. Vivamus risus felis, sollicitudin at ipsum eu, placerat laoreet massa. Phasellus eget justo luctus, facilisis urna lobortis, consectetur tellus. Nunc quis euismod purus, dapibus condimentum enim.
</p>

<h3>
Side Content Heading
</h3>

<p>
<a href="" target="_blank">
Link 1
</a><br>
<a href="" target="_blank">
Link 2
</a><br>
<a href="" target="_blank">
Link 3
</a>
</p>

<p>
Footer text and links go here.
</p>

<p>
UNSUBSCRIBE INSTRUCTIONS/LINK
</p>

<p>
CONTACT US:<br>
FRED FLINSTONE<br>
BEDROCK GRAVEL, INC<br>
123 BENCH RD<br>
BEDROCK, NY 11111
</p>

Notice how I have placed most HTML tags on their own lines:

<p>
A short sentence telling readers how you got their email address and where to unsubscribe.
</p>

This is a trick learned from practice. Which code do you think is easier to read and work with as you build an HTML email: the code with the HTML P tags are on their own lines:

<p style="font-family: Helvetica,Arial,sans-serif; font-size: 12px; line-height: 18px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
A short sentence telling readers how you got their email address and where to unsubscribe.
</p>

or this code with HTML and copy blended together:

<p style="font-family: Helvetica,Arial,sans-serif; font-size: 12px; line-height: 18px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">A short sentence telling readers how you got their email address and where to unsubscribe.</p>

It is much easier to manage the long lines of CSS style declarations if each HTML tag is on its own line as you code the email. When I have to go back and edit an HTML email, my first task is to put each HTML tag on its own line. It makes keeping track of code much easier.

It’s also true putting HTML tags on their own lines helps you match open and close HTML tags, to ensure every tag is closed properly.

Let’s style a few of these content bits and talk about how it is done. We will begin with the first bit of content, from the top of the email.

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
A short sentence telling readers how you got their email address and where to unsubscribe.
</p>

If you compare this code to Figure 4, the marked up printout of our email design, you’ll see I’ve added the font declarations for family, size, and line-height. I’ve set line-height slightly larger than font-size to ensure there’s minimum amount of space above and below this sentence. As you code your HTML email, do make time to play with this type of setting: change line-height to 24px then refresh your web browser to see the change.

Also notice the CSS declarations are in alphabetical order. While I have a compulsive personality, the reason is more workaday: when you have an email with dozens of these long lines of CSS, it is much easier to tweak if your declarations are all in alphabetical order. If you need to change color, for example, you know to look at the start of any string of CSS code. If the issue has to do with a margin setting, you look in the middle of the string in every case.

Next, let’s look at content in the HTML email itself, to see how we set the gutter, the empty space between the edge of the email design and the content. Here’s the content, HTML tags, and CSS styles for the top navigation links:

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
HOME
</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 1</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 2</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 3</a>
</p>

Notice how the P tag has its margin-left set to 20px to ensure this block of code and content position correctly to match our design. Because the A tag and their links are nested in a P tag, every A tag has its margins and padding set to 0. Also notice the A tag has a text-decoration: none to remove the underline from these links (and how text-decoration is placed alphabetically in the last position for all the styles).

Also notice the target=”_blank” code. This ensures people who view your email in Gmail and other web-based applications will open a new window in their web browser to view the link.

Notice, as well, the P tag has identical font-size value and line-height values. This ensures the top navigation links are a 12 pixel high block which helps when measuring all the vertical elements in the header portion of our design.

Next, here is the other element in our header, the 1-2-3 logo wrapped in HTML H1 tags:

<h1 style="font-family: Georgia, Times, serif; font-size: 48px; font-weight: normal; line-height: 48px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
1-2-3
</h1>

Let’s talk about using CSS styles to measure the height of an element, in this case the header of our email.

In Figure 4, our marked up printout of the email design, the height of the header is 100 pixels high. With the top navigation links set to 12 pixels high (by setting font-size and line-height to that value) with a bottom margin of 10 pixels, for a total of 22 pixels for top navigation, that leaves us 78 pixels for the logo and above it (100 – 22 = 78).

The logo code above, shows the logo is 48 pixels high with a top margin of 20 pixels and bottom margin of 20 pixels, for a total of 88 pixels. Plus the 22 pixels for the top navigation and the header is 110 pixels high. The resulting display for this code looks correct to me because the space above and below the 1-2-3 logo are equal. If I reduce both top and bottom margin for the logo by 5 pixels, the result looks odd to me. The logo looks cramped, jammed in.

I mention this because there are cases where the design in a JPEG or Photoshop file doesn’t look perfect when you code it. You might need to add a few pixels.

Finally, let’s look at code for the copy that appears in our email:

<p style="color: #efefef; font-family: Georgia, Times, serif; font-size: 15px; line-height: 22px; margin-top: 0; margin-right: 10px; margin-bottom: 20px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Donec in lacus in ante facilisis dignissim quis auctor elit. Praesent hendrerit ligula sit amet tortor luctus, ut hendrerit turpis fringilla. Maecenas nec sapien lacinia, mollis nisi ut, euismod turpis.
</p>

Notice margin-left is set to 0, unlike the P tag and 1-2-3 logo because we set the HTML table code for the third and fourth HTML tables (see code above) to cellpadding=”20″. As you add CSS code to your content, change margin-left to 20px and see what happens. There are different ways to get the left space to your content. Once you decide how, based on what displays well across most or all email software, then adjust your code. Typically, cellpadding works in all email software, including the oldest. CSS margin-left works on most older email software.

Here is our content marked up with HTML tags and CSS styles:

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
A short sentence telling readers how you got their email address and where to unsubscribe.
</p>

<h1 style="font-family: Georgia, Times, serif; font-size: 48px; font-weight: normal; line-height: 48px; margin-top: 20px; margin-right: 0; margin-bottom: 10px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
1-2-3
</h1>

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
HOME
</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 1</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 2</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 3</a>
</p>

<h2 style="color: #efefef; font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 24px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Fusce Interdum
</h2>

<p style="color: #efefef; font-family: Georgia, Times, serif; font-size: 15px; line-height: 22px; margin-top: 0; margin-right: 10px; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Donec in lacus in ante facilisis dignissim quis auctor elit. Praesent hendrerit ligula sit amet tortor luctus, ut hendrerit turpis fringilla. Maecenas nec sapien lacinia, mollis nisi ut, euismod turpis.
</p>

<p style="color: #efefef; font-family: Georgia, Times, serif; font-size: 15px; line-height: 22px; margin-top: 0; margin-right: 10px; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Curabitur cursus metus hendrerit iaculis laoreet. Vivamus risus felis, sollicitudin at ipsum eu, placerat laoreet massa. Phasellus eget justo luctus, facilisis urna lobortis, consectetur tellus. Nunc quis euismod purus, dapibus condimentum enim.
</p>

<h3 style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 14px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Side Content Heading
</h3>

<p style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
<a style="color: #ffffff; text-decoration: none;" href="" target="_blank">Link 1</a><br>
<a style="color: #ffffff; text-decoration: none;" href="" target="_blank">Link 2</a><br>
<a style="color: #ffffff; text-decoration: none;" href="" target="_blank">Link 3</a>
</p>

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Footer text and links go here.
</p>

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
UNSUBSCRIBE INSTRUCTIONS/LINK
</p>

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 18px; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
CONTACT US:<br>
FRED FLINSTONE<br>
BEDROCK GRAVEL, INC<br>
123 BENCH RD<br>
BEDROCK, NY 11111
</p>

Don’t forget to test every bit of code you add to your project, to ensure each change you make displays well.

To make this project simpler, I’ve also left out any images. If you do use images, be sure to place them on a server somewhere on the internet. Email delivery services also will upload your images to ensure they display for months (or longer) after your email is sent.

Step 5: Add Email Content to HTML Table Layout Code

Once you have marked up your content with CSS styles, using a marked up printout of your email design, the next step is to copy and paste the marked up content into your HTML table.

If you remember, in our final HTML table layout example, we have bits of content to help identify which part of the table maps to which content. You should replace “Top message,” for example, with the top bit of marked up content, replace “Logo” with the marked up H1 code and content for the 1-2-3 logo, and so on.

Here is the result, a fully code HTML email:

<html>
<head>
	<title>Help Kids Code Project | How to Code an HTML Email</title>
</head>

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

<body>

<!-- First HTML table acts as a pseudo BODY tag to protect email inside -->
<table width="99%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top" bgcolor="#efefef">

            <!-- Second HTML table is the email itself -->
            <table class="email" width="500" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" valign="top">

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
A short sentence telling readers how you got their email address and where to unsubscribe.
</p>

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" bgcolor="#ffffff">

<h1 style="font-family: Georgia, Times, serif; font-size: 48px; font-weight: normal; line-height: 48px; margin-top: 20px; margin-right: 0; margin-bottom: 10px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
1-2-3
</h1>

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
HOME
</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 1</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 2</a> | 
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0; text-decoration: none;">
LINK 3</a>
</p>

                    </td>
                </tr>
                <tr>
                    <td valign="top" bgcolor="#999999">

                        <!-- Third HTML table is the left column of content -->
                        <table class="email-content" align="left" width="350" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top" bgcolor="#353535">

<h2 style="color: #efefef; font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 24px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Fusce Interdum
</h2>

<p style="color: #efefef; font-family: Georgia, Times, serif; font-size: 15px; line-height: 22px; margin-top: 0; margin-right: 10px; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Donec in lacus in ante facilisis dignissim quis auctor elit. Praesent hendrerit ligula sit amet tortor luctus, ut hendrerit turpis fringilla. Maecenas nec sapien lacinia, mollis nisi ut, euismod turpis.
</p>

<p style="color: #efefef; font-family: Georgia, Times, serif; font-size: 15px; line-height: 22px; margin-top: 0; margin-right: 10px; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Curabitur cursus metus hendrerit iaculis laoreet. Vivamus risus felis, sollicitudin at ipsum eu, placerat laoreet massa. Phasellus eget justo luctus, facilisis urna lobortis, consectetur tellus. Nunc quis euismod purus, dapibus condimentum enim.
</p>

                                </td>
                            </tr>
                        </table>
                        <!-- Close third HTML table -->

                        <!-- Fourth HTML table is the right column of content -->
                        <table class="email-content" align="right" width="150" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top" bgcolor="#999999">

<h3 style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 14px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Side Content Heading
</h3>

<p style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
<a style="color: #ffffff; text-decoration: none;" href="" target="_blank">Link 1</a><br>
<a style="color: #ffffff; text-decoration: none;" href="" target="_blank">Link 2</a><br>
<a style="color: #ffffff; text-decoration: none;" href="" target="_blank">Link 3</a>
</p>

                                </td>
                            </tr>
                        </table>
                        <!-- Close fourth HTML table -->

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" bgcolor="#cccccc" height="100">

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
Footer text and links go here.
</p>

                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
UNSUBSCRIBE INSTRUCTIONS/LINK
</p>

<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 16px; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;">
CONTACT US:<br>
FRED FLINSTONE<br>
BEDROCK GRAVEL, INC<br>
123 BENCH RD<br>
BEDROCK, NY 11111
</p>

                    </td>
                </tr>
            </table>
            <!-- Close second HTML table -->

        </td>
    </tr>
</table>
<!-- Close first HTML table -->


</body>
</html>

Notice lines 21, 56, and 78 have tagged these tables with class=”email” or class=”email-content”. This last change ensures our email will display well on phones.

As you can see, we’ve also added the basic HTML code for the top and bottom of emails, as well as a block of CSS style code:

<html>
<head>
	<title>Help Kids Code Project | How to Code an HTML Email</title>
</head>

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

<body>

... email code/content here ...

</body>
</html>

The block of CSS style code is standard-issue @media declaration, on line 7. Any device with a screen width less than 480 pixels will change the width of your tables tagged with class=”email” and class=”email-content” to 320 pixels wide and use the !important notation to force this change, on line 9. The style also will set the tables to clear space both left and right, to ensure the right column content slides down on phone screens. We also could set font-size here, if needed, or any other style targeted to phone displays.

Also note we use table[class=email] notation to get around a problem Yahoo mail has reading CSS declarations.

Also note Gmail and other web-based email services will strip out this CSS block. And older email software will ignore code it cannot understand. This CSS block of code only works for phones and tablets which typically have modern standards-compliant web browsers.

Finally, unlike web pages, the HTML header and footer code does not need to be precise. HTML email is either bundled into a web page for Gmail or similar web services or it is bundled into a block of code sent as email. If you open any email displayed in desktop email software, you’ll discover email is a block of code with at least three parts:

  • A wrapper that describes the email and holds both the HTML email and a text email version
  • The HTML email
  • The text version of the email

Because your HTML email is folded into this larger chunk of code, your and tags do not need to be explicit, as they do with a web page.

Step 6: Test and Tweak Your Email

There are two types of testing for this project, using a web browser as you code and later a more formal test to show how your email displays with a range of common email software.

As noted earlier, web browser tests included refreshing the browser as well as changing the width of the browser to test your email displays well on narrow width phone screens. Testing display based on width is a last step once you have added the CSS @media query.

One key detail to remember about testing: graceful degradation is the goal, not perfection. While it is theoretically possible to code your email to display pixel perfect in every possible email software, some email software might not be worth the effort to tweak your code for hours. For example, it might be worth setting the font size and color of a link in Gmail but not bother setting font values for Lotus Notes if Notes ignores your code and displays a default font. It takes me three or four hours, on average, to code, test, and tweak an email based on a JPEG or Photoshop file. That should be your maximum goal for time spent.

As you code your email, use Chrome and Firefox web browsers to test how well your email displays. Once your code is complete, and displays well in these browsers, you might want to test in Windows if you have a Windows computer. Specifically, test your email in Internet Explorer 7 (or 8) to see if you have any issues. Testing in these older Windows browsers helps identify problems you might encounter with Outlook 2003, 2007, and 2010.

Once you are confident your code displays great in at least Chrome and Firefox, try an email testing service. The easiest way to find one is through an email delivery service. MailChimp and CampaignMonitor both offer tests for free or at a small fee.

 

While this tutorial is long, believe it or not the topic of how to code HTML email newsletters is vast. There are background images, for example, as well as creating print-friendly emails and much more. Below are several useful links to get you started if you want or need to know more on the topic.

I also would point you to one or both Lynda.com courses I created, especially if you already subscribe to their service. My courses include how to code email, as well as useful topics not really covered anywhere else online, for example, how to design text emails, what emails actually look like as code, and how to automate creation of emails with WordPress and Expression Engine.

Learn More

Fogbuz: Responsive HTML Emails: a Different Strategy

Another way to code HTML email: as a single column email. Article includes lots of interesting links for more research. However, their Github code sample leaves you stranded to figure out how to code email content. That’s why this article exists.
http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/
https://gist.github.com/tinabeans/6996367

Guide to CSS Support in Email

http://www.campaignmonitor.com/css/

Campaign Monitor: Responsive Email Design

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

MailChimp: Email on Mobile Devices

http://mailchimp.com/resources/guides/email-on-mobile-devices/
https://github.com/mailchimp/Email-Blueprints

Email Marketing Field Guide

http://mailchimp.com/resources/guides/email-marketing-field-guide/

Litmus: Responsive & Scalable Email Design: What’s the Difference?

http://litmus.com/blog/responsive-scalable-email-design-whats-the-difference

Responsive Email Design Resources and Templates

Be sure to test any code thoroughly on a wide range of old and new email software.
http://www.emailaudience.com/responsive-design-for-mobile-email-ooh-shiny
http://blog.lyris.com/us/email-inspiration-six-great-responsive-email-designs/
http://www.zurb.com/playground/responsive-email-templates
http://notes.envato.com/general/responsive-email-templates-2/
http://marketingland.com/four-responsive-email-layouts-15858
http://marketingland.com/learning-by-example-9-more-responsive-emails-25864
http://marketingland.com/responsive-email-layout-patterns-29378

Lynda.com HTML Email Coding Courses

Two courses I was fortunate enough to be asked to create for Lynda.com. However, you have to pay to use their service. It happens to be amazingly worthwhile to subscribe to their service, given how much training they offer. I did try to include lots of material not found elsewhere online on the topic of coding HTML email, for example, creating templates in WordPress and Expression Engine to auto-generate emails and how to design text emails.
http://www.lynda.com/Business-Online-Marketing-SEO-tutorials/Creating-an-HTML-Email-Newsletter/94626-2.html
http://www.lynda.com/Business-Online-Marketing-SEO-tutorials/Effective-HTML-Email-and-Newsletters/76981-2.html
http://www.lynda.com/Tim-Slavin/850027-1.html

Add a Background Image to Your Email in Two Simple Steps

http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/

Optimizing Your Email for Mobile Devices with the @media Query

http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

Join Me Sample Email

A random HTML email I saved then cleaned up. The code may or may not follow every rule in this article. Therefore, it might interest you as a case study. Any HTML email can be saved locally on your computer but they will require time and patience to carefully clean the code.
https://www.kidscodecs.com/files/join-me-email-clean.html

Lorem Ipsum

Based on Cicero’s de Finibus Bonorum et Malorum (The Extremes of Good and Evil), written in 45 BC, this dummy text has been used by printers and publishers since the 1500s.
http://www.lipsum.com
http://www.gutenberg.org/files/29247/29247-h/29247-h.html
http://en.wikipedia.org/wiki/Lorem_ipsum

How to Code HTML Email

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

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:

How to Code HTML Email Newsletters

View more presentations from Tim Slavin.

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)