Coding for Email

Dec 27th, 2013

Introduction

Making email templates can be a real pain in the keister! When possible, use something like Mailchimp's responsive email builder instead of trying to exactly replicate a design from Photoshop; avoid having to read this article at all if you can! If you really must create an email based on a .psd or just an image and if a strict design is needed, read on.

The main thing to understand is that emails are made using HTML coding techniques from the 1990's. Don't try to code an email like you would a website, because even though web standards are great, it just won't work on all popular platforms. Just pretend like you are coding up your Geocities site. :)

Table of Contents

Helpful Resources

These resources were very helpful to me. I recommend reading through them all.

Things to consider before starting.

  • Always have some good music playing so that at least some part of the experience is enjoyable :)
  • Suppression of images is commonplace
  • Support for standard CSS positioning is inconsistent
  • Width should be between 600px and 800px; I recommend 600px.
  • Using tables for layout is necessary to acheive accurate email rendering
  • Some web based email systems, notably Gmail, strip out the entire <head> section as well as any <style> sections.
  • JS, flash, video, forms support is inconsistent
  • There are more platforms to be concerned with than regular web development
  • The whole email should be encapsulated in a table. The cellpadding and cellspacing should be set to 0 and the width and bgcolor should be specified.
  • Don't use margins, use padding; Outlook.com (formerly Hotmail) strips out margins.
  • Using <br /> tags for vertical spacing is recommended when possible. When that's not possible, then Responsys recommends using empty tables for vertical spacing.
  • Div tags are helpful for creating space around text, as the <p> tag has inconsistent support (this is according to Mailchimp. I've used p tags without problems.).
    • <div>s should be used within a <td> tag
    • Use padding on the <div> tag, not the <td>
    • Use padding on the <td> tag, not the <div>
      • Mailchimp recommends using padding on the div instead of the td but I've noticed that Outlook 2007+ strips out padding on the divs but not on the td tags.
  • Images should be displayed as block level elements. ( img {display:block;} )
    • Mainly for Gmail and Hotmail users on FF, Chrome, and Safari but also for others, this avoids having extra space automatically added to tables and is recommended by Responsys.
    • It's OK to render images inline when needed. For example, icons that are placed inline with text.
  • Using images in <td> tags: if the image is less than 19px tall, you need to specify height and line-height in the <td> tag and in the image tag like this:
<table cellpadding="0" cellspacing="0">
  <tr>
    <td height="12" style="height: 12px; line-height: 12px;"><img src="http://example.com/spcr.gif" width="1" height="1" style="display:block;" border="0" /></td>
  </tr>
</table>
  • Specify font size in pixels.
  • Although Mailchimp's templates use <table align=left> and <table align="right">, you may find that causes problems in Outlook
    • If you don't need a responsive layout, then instead of using two tables, put your data into two <td> cells
  • Avoid CSS shorthand notation ( https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties )
  • Use web safe fonts.
    • For serif, use Geogia, Times, or Times New Roman;
    • For sans, use Arial, Verdana or Tahoma
    • For others, consider using an image instead.
  • Always use hex for colors
  • Use escape codes, even for an apostrophe (use a single quote: &rsquo;)
  • Styling <a> tags is recommended because email providers use their own styling on links.
  • Use XHTML transitional DOCTYPE.
  • Outlook specifically:
    • doesn't support background images
    • no animated gifs
    • limited CSS support
    • unpredictable rendering behavior
    • Responsys recommends avoiding the use of padding on <td> cells. They recommend using spacer tables instead. However, I haven't noticed a problem doing this and Mailchimp's templates all do this. Using padding on td cells works in all tests I've run on Litmus
    • Some versions of Outlook will create weird spaces around the 1800 pixel mark so best to keep height under that.
  • If border-radius is used, border-collapse should also be used
    • ie. border-collapse:separate; border-radius:4px;
  • Try to use only even value widths to avoid sub-pixel calculation differences.

Mailchimp Templates

https://github.com/mailchimp/Email-Blueprints

For responsive emails with simple layouts, the responsive-templates folder contains some great easy templates. In particular:

  • base_boxed_body_image_2column_query.html
    • has good one and two col examples
    • Lotus Notes 8.5 : text is all aligned center and widths are not constrained.
    • Gmail : some text is center aligned when it should be left
  • base_boxed_3column_query.html
    • contains a nice 3 col example
    • Gmail : some text is center aligned when it should be left

For non-responsive emails, there are a ton of examples in the templates folder. Although responsive emails are nice, these non-responsive layouts look pretty good on all platforms.

For complicated layouts, responsive or not, Mailchimp's modular template can be used.

  • modular-template-patterns.html
    • great code comments
    • problems with <table align=right> and <table align=left>:
      • Layout breaks badly with large amounts of white space in Lotus Notes 6.5, 7
      • Avoid using align=left or align=right on <table> elements if the table only contains an image as there are bound to be problems in Outlook and possibly with Apple Mail 5.
      • If possible, avoid using align on tables at all.

Workflow

Photoshop

  • Make copy of creative doc
  • Make sure width of document is: 600px-800px - if you have a choice, use 600px.
  • Lock movement (don't lock everything) on all visible layers to avoid accidentally move something
  • Set guides for all major rows; do not mark columns at this point.
    • Make sure row guides are at least 20px apart
      • See note above about 19px problems if you really need a short row.
    • These guides mark the boundaries of each "MODULE ROW" (see modular-template-patterns.html)

IDE / Text Editor

  • Start a working directory and create a git repository there to track your work.
    • It's easy to make a mistake and not catch it for a long time. Using source control really helps.
  • Make copy of modular-template-patterns.html
  • Change DOCTYPE to XHTML Transitional
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Change the <title> to match the email subject line
  • Make images display as blocks by default
    • img {display: block;}
  • Remove the 'Outlook Conditional CSS' that is meant to protect against the page break bug
  • Remove all MODULE ROWs except the first.
  • If the #emailBody is not set to 100%, remove the 'CENTERING TABLE' as it is not needed.
    • "The table "emailBody" is the email's container. Its width can be set to 100% for a color band that spans the width of the page."
  • At this point, you should have a very simple html file that only has one validation error.
    • Using the height attribute on a table isn't valid W3 markup but it works well for email platforms.
  • Set width on #emailBody to match layout.
  • Set width for the flexible container and flexible container cell.
    • table.flexibleContainer
    • td.flexibleContainerCell
  • At this point, test it in the browser.
  • Make sure to understand everything in the code so far before continuing.
  • This is a good starting point for future emails so create a backup at this point and call it something like starter-email-template.html
  • Remove code comments from the body except for <!-- MODULE ROW // --> and <!-- CONTENT TABLE // -->
    • These will be removed later but can be helpful during development.
  • For each row in the design that spans the whole page (the rows marked in photoshop with guides), duplicate the generic MODULE ROW code
    • Add a unique id to the first <td> in each MODULE ROW.

At this point, your project will probably diverge from the example that you can download below. The example files contain a .psd and a reference image of a design for a client project. The text and images have been changed to make it generic. Also contained is a fully coded HTML file for the design. This file was not made to be responsive. To make it responsive, a considerable amount of extra effort would be needed; nesting tables and extra CSS would most likely be required. You can get the .html, .psd, and other files by grabbing the .zip fle here: http://jeffymahoney.com/docs/email-templates/email-template-demo.zip

Testing

  • Validate with the W3C. http://validator.w3.org/#validate_by_input
  • Use a service such as http://litmus.com for quickly getting screenshots in the most popular email platforms.
    • There is a free 7 day trial, however, I've found a way to get unlimited free tests:
      • Visit: https://litmus.com/email-testing
      • Scroll down the page a bit to the section titled "Try an email test, free!"
      • Enter in your code there. If you are wary of giving your email address here, then use a fake one... you will be automatically signed in and don't need to check your email.
      • Once signed in, wait until all screenshots are ready and then use the download options to get a .zip with all the screenshots.
      • Of course, you could also pay the $79/month fee and use the service normally.

Before handing code off to QA or the client.

Remove code comments.

Tags

Theming

Article Type

General