Email Marketing Design Guide

• Resources
• Articles
• Video Walkthroughs
• Email Design Guide
• Blog
• Complete Feature List

You just designed your company's website. You're up-to-date on W3C and accessiblity standards. Now you want to apply that design knowledge to your email marketing campaign. Not hard, right?

WRONG. E-mail and web design and two completely different venues. All of the modern accessibility standards you've applied to your web site (think floating divs, padded elements, hundreds of CSS classes and IDs, utter destruction of tables) don't mean a thing when it comes to email design.

Email clients are a finicky bunch and some of the latest and greatest applications are stuck in the stone-age when it comes to HTML/CSS standards. So in order to save yourself time, and much frustration...forget everything you know about web design. Well, maybe not everything, but anything you might have picked up in the last 10 years.

Imagine its the year 2000, and nested tables and inline CSS are all the rage, because when it comes to email design, those ideas are what will get you through the day. If you haven't bolted for the friendly confines of W3C standards yet, keep reading for some basic email design guidelines.

• Keep It Simple
  The more complicated your design is, the more places email clients have to screw something up. Strive for a simple design that gets your message across and is also visually appealing, but without all the bells and whistles of a full-blown web site. Most likely the goal of your email marketing is to get people to go to your web site. So do just enough to get them to click on your link, then let your site speak for itself.


• Keep It Small
  This goes for your images as well as your layout. You want your images small so that they can load quickly and you don't want email clients wrapping your 900-pixel wide design down to 600. So start with 600 pixels as your maxiumum width. That will give you the best chance of having your email display correctly. Along with keeping your image file sizes small, you also want to make sure that your images themselves are small. Don't link to a 500 pixel image when you only want it to be 100 pixels wide. Some email clients will display the actual size of the image regardless of whether you specify dimensions.


• Tables Are Your Friend
  Nested tables are your new best friend. Without them, you hardly have a chance of your design even being decipherable. Brush off all that knowledge about tables that you've tried to push out of your head and put it to good use. Use simple HTML tables and over-emphasize anything you want them to do. If you want a 400-pixel wide table, make sure you set a width for each cell. Don't assume that the email client will figure out what size to make the cell, because it won't. On the contrary, if you want padding in your cells, don't do it on an individual basis. Instead, use the table cellpadding attribute to set a constant padding value.


• Back to Basic CSS
  Stylesheets = no, CSS classes = no, CSS IDs = no, CSS shortcuts (border: solid 1px #000) = no, CSS positioning = no. Simple, inline CSS is the only thing you need to know here. Style everything within its element tag and if something doesn't isn't displaying correctly add an extra span with the same style properties.


• Image-Light Design
  Most websites today are very image-heavy, but for emails you want design that is image-light. First things first, most email clients will automatically block images, so the first thing that your contacts will see is an image-less message. Keep this in mind when you design, as you want to give the best first impression that you can, even with images blocked. Next, make sure your images are linked through absolute URLs (i.e. <img src="http://test.com/img.gif" />). One aspect of outdated web design you'll want to stay away from is using spacer images. Some email clients don't recognize them as images, which can cause all sorts of problems. As far as background images go, it's probably better not to use them. Many email clients won't display them. It's better to use a background color, but instead of setting a color for the body tag, wrap all of your content inside a table and use inline css to give the table a color.

These are just a few basic tips to get started on designing your emails. There are many more intricacies and quirks regarding email design, far more than can be covered in one article.