I started a series of posts about e-mail design and development years ago and here’s where I’ll pick up right where I left off…
Unified standards, specifications, and best practices have made it possible for web designers to increase the accessibility and usability of the sites they’re designing while ensuring that the sites look the same no matter what browser is used. Unfortunately, no such standards presently exist for email design which is why emails face a number of rendering issues that differ among ISPs.
Throughout the next few months, these posts will act as a guide, not a strict set of design and development rules, to optimize e-mail performance. There are definitely exceptions. There are very few hard and fast rules and I am a HUGE fan of testing, testing, testing.
Size and Layout:
- Use HTML “non-breaking space” tags in place of multiple spaces ( )
- When possible, use dashes “-” in place of bullet tags, such as <li></li> and <ul></ul> tags. These will not always render correctly with different ISPs.
- Design HTML messages with a maximum width of 600 pixels so the message can be viewed in the preview pane and by your recipients who still set their resolution to 800×600. Also, many ESPs add content around your message, further reducing the amount of space for messaging without side scrolling.
- Keep important messaging, such as the main topics, calls-to-action, navigation (as text), and logos, within the top 300 pixels so they remain above the fold.
- Limit the size of an email to 40k, including images, to prevent long download times and deliverability issues. Ideally, a message will be 5K or less.
- Use tables in your HTML code for maximum control over placement of text, images, and the width of the message. However, avoid nested tables if possible as they might not render properly in all email clients. An e-mail should not contain more than four “levels” of tables (referring to tables within tables).
- Limit the use of rowspans and colspans as they might not render properly in many email clients. Also, avoid row and column heights, especially base on percentages rather than pixels. These rarely render correctly within all clients. However, column widths should be included when possible.
- Set the height and width of your images to help your message maintain its proper layout even if images are turned off. Some browsers will extend the height of an image if the height attribute is missing.