How to Design an Email

Although email may seem like an old fashioned solution, it is incredibly profitable. For each dollar spent on email marketing, $40 were earned in return. That is more than any other marketing channel out there.

Building an email

It is not like building a webpage. Email browsers are really primitive and you need to use some really arcane techniques to make your emails work. No HTML5 or CSS3, for one thing. No external style sheets, for another.

Just keep these three things in mind:

  • Keep it simple: the more complex your design, the more likely it will not work  in one of the popular clients with poor standards support.
  • Code just like it’s 1999: nesting tables, inline CSS, etc.
  • Test your designs regularly: what works in Hotmail one week may not work the next.

Just like web design, you need to do some research

You have to try and find out what email clients your subscribers are using. If you have the time there are a number of tools that can tell you. Knowing which email clients you’re targeting not only makes the building process easier, it can save you lots of time in the testing phase too.  Just remember that pixel perfection in all email clients is a pipe dream.

Use tables for layout

A lot of the popular clients do not support float, margin, or padding, so you need to use tables as the framework of your email. While nested tables are widely supported, consistent treatment of width, margin and padding within table cells is not. For the best results, keep the following in mind when coding your table structure.

  • Set the width in each cell, not the table
  • Err toward nesting
  • Use a container table for body background colors
  • Avoid unnecessary whitespace in table cells

CSS and general font formatting

Gmail is the culprit for this one. By stripping the CSS from the <head> and <body> of any email, we’re left with no choice but to move all CSS inline. The good news is this is something you can almost completely automate. Free services like Premailer will move all CSS inline with the click of a button. I recommend leaving this step to the end of your build process so you can utilize all the benefits of CSS.

  • Avoid shorthand for fonts and hex notation: declare the font properties individually and use the full hex numbers, not the shortened ones.
  • No @fontface support yet 

Paragraphs

Just like table cell spacing, paragraph spacing can be tricky to get a consistent result across the board. Many designers revert to using double <br /> or DIVs with inline CSS margins to work around these shortfalls.

The best approach is to set the margin inline via CSS for every paragraph in the header your email, like so:

p { margin: 0 0 1.6em 0; }

Then use Premailer to being it all inline for each paragraph later.

Links

Some email clients will overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each link inline like so:

<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>

Next, add a redundant span inside the a tag.

<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>

To some this may be overkill, but if link color is important to your design then a superfluous span is the best way to achieve consistency.

Images in HTML emails

The most important thing to remember about images in email is that they won’t be visible by default for many subscribers. If you start your design with that assumption, it forces you to keep things simple and ensure no important content is suppressed by image blocking.

With this in mind, here are the essentials to remember when using images in HTML email:

  • Avoid spacer images: stick to fixed cell widths to keep your formatting in place with or without images.
  • Always include the dimensions of your image
  • Provide fallback colors for background images
  • Avoid PNGs
  • Don’t forget alt text
  • Use the display hack for Hotmail
    For some inexplicable reason, Windows Live Hotmail adds a few pixels of additional padding below images. A workaround is to set the display property like so.
    img {display:block;}
    This removes the padding in Hotmail and still gives you the predicable result in other email clients.
  • Don’t use floats, use the align attribute.

Video in email

With no support for JavaScript or the object tag, video in email (if you can call it that) has long been limited to animated gifs. However, some recent research into the HTML5 video tag in email showed some promising results.

Turns out HTML5 video does work in many email clients right now, including Apple Mail, Entourage 2008, MobileMe and the iPhone. The real benefit of this approach is that if the video isn’t supported, you can provide reliable fallback content such as an animated GIF or a clickable image linking to the video in the browser.

Of course, the question of whether you should add video to email is another issue altogether. If you lean toward the “yes” side check out the technique with code samples.

How wide should my emails be?

You’ve probably noticed that the majority of email newsletters you receive these days are designed with a fixed width as opposed to a fluid layout.

This is because the majority of email clients and web-based email providers don’t use the full width of your screen to display an email message. Whether it’s advertising on Gmail, a menu in Hotmail or your Inbox in Outlook, a chunk of screen real estate is often already being used.

Remember, your recipients are busy and impatient, so horizontal scroll bars are even more of a no-no in email than a web page. Because of this, it is a good idea to keep your emails to a fixed width of no more than 550-600 pixels. This should ensure that in the majority of cases, your subscribers can view your email as you intended.

What about height?

Obviously the height of each email you send will vary depending on the amount of content. At the same time, it’s good to keep in mind that a lot of your recipients may scan your email in a preview pane before they decide to read the entire thing.

The average preview pane is around 300-500 pixels high, so make sure you include any important bits of your email in this area. First impressions count. A good way to check how your email looks in a variety of email readers is to use the design and spam testing tool over at Campaign Monitor, which gives you screenshots of your campaign as it will appear.

What about Flash?

Flash support across the most popular email environments is absolutely dismal. No Flash for anyone.

Leave a Reply

Your email address will not be published. Required fields are marked *