The complete email design guide
You may know how to create a modern and accessible web site already. You know the rules, latest options, etc. However can you really take all that knowledge and use it for email design? The short answer is no. Due to the variety of email clients and limited support of CSS, there are some very specific rules & dos/don'ts when it comes to email design. This guide will help explain the many points you should be aware of when using your own HTML to create an email so that it displays properly.
Before we begin, it's important to note that email design is not the same as web design. If you care about W3C standards or use the latest in CSS, you need to forget all of that when approaching email design. Basically you can think as if it is year 2000.
Layout
- 650px or less design width
The general rule for email size is to keep it 650px or less in width. This allows the email to display correctly (overall) in most of the email clients and display configurations. - Simple layouts are best
With email design simple is better. If you try to do a complicated design you will encounter a lot testing and debugging email client issues. If you are looking to complete a more advanced design be ready to use a lot of tables and to set a good amount of time aside for testing. - Use basic HTML tables
To create the overall layout you will need to use standard HTML tables. CSS floating and layout techniques will not render properly across all the email clients. - Be careful with table cell padding
Outlook will take the padding from any cell in a row and apply it to all of the cells in the row. This could result in some visual changes that you do not want. You should try to either apply the same padding for all cells in a row OR place an inner div or table (that has padding) within the cell that you would like to have padding. - Avoid using colspans=”” in your tables
Some email clients do not fully support those and others will have display issues for the other cells if you have a colspan.
CSS
- Do not use external stylesheets
They will not work in a lot of the email clients and you should be including all of your CSS using inline CSS within your HTML. - Do not use CSS classes - always use inline CSS
Many email clients do not support CSS classes. Instead of declaring CSS classes you should use inline CSS. An example would be <div style="color:#cccccc;">content</div> instead of <div class="cssclassa">content</div> - Don't use CSS shortcuts
CSS allows you to normally set properties in groups. Such as style="font: 12px, Arial" Instead of grouping such attributes you should set each part individually. Such as style="font-size:12px; font-family:Arial" - Avoid using CSS float or position options
Some email clients will disregard both the float and position CSS options. Try to use tables instead.
Images and video
- Use absolute image source URLs
Instead of including an image such as(<img src="img.gif">) you must include the absolute URL to the file such as (<img src="http://site.com/img.gif">) - Always use alt tags (<img src="http://site.com/img.gif" alt="Company ABC">)
Most email clients disable images by default. So unless you have alt tags your subscribers will only see a blank box. With an alt tag your subscribers will see the text you put in the tag. - Do Not Embed Videos and/or Flash
It is not a good idea to embed videos directly and/or flash into your email. Many email clients will not support such code and many spam & virus detection programs will flag your email as spam/malicious. Instead of embedding your video/flash into your email take a screenshot of what the video of flash player looks like and embed that. When they click on it you can have the video/flash open in their browser. - Animated GIFs are not fully supported
Ask yourself whether you really need an animation in your email. While most email clients support animated GIFs, Outlook 2007 does not. Email clients that do not support animated GIFs will likely show the first frame of your animation sequence. - Be careful with spliced images
If you have a larger image that is spliced and placed into your HTML using table cells or img tags right next to each other you will need to test thoroughly. Some email clients may add extra space between your images and cause your email to look bad. - Avoid using images to help with your layout
Some people use 1 or 2 pixel images to help align items within their layout. Some email clients/filters will think that is a potential read/open tracking image and penalize the email for that. - Test your email with images disabled
Since most email clients show emails with images disabled by default it is very important you check to see how your email looks with images disabled. - Watch your files sizes
Just as with regular web design you want to be aware of image file sizes for your email. Try to keep them low to ensure they will download quickly for your subscribers.
Background
- Background images are not fully supported
If you are using a background image keep in mind that some email clients will not show them. If you still wish to use a background image use the HTML background options instead of using CSS to declare a background. - Full body background colors
Many email clients (such as Gmail) do not show a background color that you set for the main body (<body> tag) We suggest if you are setting a background color in the body tag to also have a wrapping div with a background color that surrounds your content. This way even if the body background color is not supported you will have something pretty similar shown.
Miscellaneous
- Do not put anything above the opening <body> tag
Anything you put above the body tag will likely be stripped and not used. - Do not include javascript
It is likely that it would be stripped in most email clients and some spam filters may detect it as malicious code. - Avoid Microsoft Office like the plague
The HTML generated will almost guarantee issues. Additionally when you copy and paste from Office you will be pasting in their formatting and will likely have design issues.