Coding HTML Emails ⋆ Neal Chester, Pro Web Designer / Developer for Hire

If you haven’t coded for email clients, you’ll learn that you have to go back to tables and use a lot of repetitive inline CSS. The following is the gist of coding HTML emails:

Use tables and inline CSS styling.
Use basic HTML (old-school) styling attributes first. The only one to drop is the font property.
Don’t use CSS floats, but instead, use tables.
Tweak cellpadding and cellspacing before using CSS’s margin or padding.
When positioning text and images within cells, use align and valign before using div tags.
All img, <table> and <td> tags should have heights and widths.
All images should have an alt value so that when images are turned off the image content can still be understood. Also, if the “alt text” is on dark background, the font color for that cell should be light so the “alt text” can be clearly seen.

Now, What I will list are the challenges I came across in getting my design to render correctly in 4 major email clients:

1) Google Gmail: Gaps below images

I noticed in Gmail that gaps were being added below every image I had in the layout. I first checked the individual cells to make sure padding and spacing was removed and that any white space was gone, but this didn’t seem to get rid of the problem.

I couldn’t understand what the issue was until I found a solution. A needed to add display:block to every <img>tag that I didn’t want the spacing on. This solved the problem. Example:

<img src="img/my-images.jpg" width="100" height="50" alt="no gaps" style="display:block"/>

Update (June 8th 2015): Gmail coverts height to min-height on images and this really screws up trying to make images responsive. Currently there’s no solution to it.

2) Windows Live Hotmail: 100% width issue

My layout required a 100% width table which held a background. Inside that table, it centered a fixed width table of 600. The 100% width table would serve as a background, expanding to the edges of the email’s view area, while the 600 table box held the content.

Hotmail wouldn’t expand the outer 100% box, reverting to the width of the 600 width box, thus screwing up the design. But I found a solution. I needed to add some CSS to the <head> section. Now of course, some email clients strip away the <head> code, but Hotmail doesn’t. Here’s the solution:

<style type="text/css">
   .ReadMsgBody { width:100% }
   .ExternalClass { width:100% }
</style>

3) Yahoo Mail: Link colors

Even though I styled my anchor links to display a certain color, Yahoo kept changing them to blue. So I added ! important to the inline styles and I also wrapped the links in a <font color="ffffff"> tag, but none of this worked – Yahoo still persisted. I later found a solution: Adding a <span> tag around the text within the anchor, with an attribute and color variable, got me the results I needed. Here’s an example:

<a href="#" title="Don't screw with my link colors, Yahoo!">
   <span style="color:ffffff">Link</span>
</a>

4) Microsoft Outlook: Gaps above and no background images

It’s funny how Microsoft products seem to be hardest to develop for. All the other major email clients displayed backgrounds except for Outlook. The background was a major part of the design and a solid color just wouldn’t do.

Someone eventually came up with a hack. The following must be added right after the <body> tag like so:

<body style="padding:0; margin:0">
   <!--[if gte mso 9]>
      <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
      <v:fill type="tile" src="img/background-image.jpg" />
      </v:background>
   <![endif]-->
...

This is a conditional statement (like Internet Explorer), so you don’t have to worry about other email clients seeing this code. The above code renders your background on the body and tiles it as well. It was a great fix for me and I got the visual results I wanted after playing around with the image a little. Since I already had a image displaying in the background of the table, I would ended up creating another image just for Outlook to display in the body.

After beating the missing background issue, my design rendered perfectly, but Outlook was giving me another problem: it was adding gaps above images like Gmail, but Gmail’s fix wasn’t working. Removing white space didn’t solve the problem either.

It turns out that I had to use separate tables for even the smallest things. Instead of creating a table with individual cells that housed a set of images, I’d have to create a whole new table just to house one image, which eliminated the gaps. This created a ton of unnecessary code, but when you’re working with email, this is the way you have to go.

The bottom line is, I was able to get my email design to display correctly in all the major email clients all with the help of Google search and the good people over at Campaign Monitor. One email client I didn’t mention was Apple Mail, but it didn’t give me any problems. I can now say I can confidently design emails that look great for anyone.

Working with Exact Target

The following doesn’t apply to most designers, but I thought I post my experience working with Exact Target email software.

A had a job where I had to use an e-blast system called Exact Target. My task was to design and code blank email templates, add them to the system, and the copywriter would fill in the copy for the weekly e-blasts.

Initially, I styled the blank areas (div, td etc) thinking that all the content provider had to do was fill in content, but this wasn’t the case. I found out that Exact Target added its own styling to the blank content areas thus overwriting any pre-styled formatting. The solution was to import pre-content, an option in Exact Target. Basically I created pre-styled dummy content for each blank area and saved it.

The solution kept the formatting consistent and the copywriter didn’t have to style their content every time. All the copywriter had to do was import the pre-saved dummy content – whether this was a heading, paragraph or sub-heading – and then begin overwriting it with their own content. Everything worked out.

Working with iContact

iContact is a good editor for email design, but you have to be careful. For one client in particular, I use the editor exclusively—no HTML writing. You have to watch out for:

Hard line breaks (pressing enter to great a new line) result in double spaces between images and paragraphs in Outlook. It’s best to do two soft line-breaks (pressing enter and shift) to create a new paragraph rather than, pressing enter by itself.
Also, Outlook doesn’t support image borders or margins so I have to put the spacing within the image itself.

Microsoft still needs to get their CSS support up and rendering together.

Coding HTML Emails