E-mail Design & Development Guidelines – Part 1

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.

Design for the Inbox
Pending guidelines will help you achieve the highest level of compatibility across all of the major email clients, which means that most of your subscribers will be able to view clean copies of your messages with a clear CTA. However, there are some specific challenges with some of the major email clients that you should pay careful attention to, as they threaten the success of your campaigns.

Outlook 2007 –
Approximately 75% of subscribers use Outlook as their primary email client. This client is particularly popular amongst the workforce. Previous versions of Outlook used the IE-based rendering engines but the latest version uses Microsoft Word, which will cause some rendering issues if you aren’t careful. Outlook 2007 has a number of features that it doesn’t support, including:

  • CSS background images
  • Forms
  • Flash, Javascript, or other plugins
  • CSS positioning or CSS floats
  • Animated Gifs
  • Image bullet points

If you use animated GIFs in your message, be sure that the first frame is not blank as this is the only frame that will be seen by your subscribers using Outlook 2007.

Gmail –
Following the HTML best practices outlined above will help you overcome these problems with Gmail. Like Outlook 2007, Gmail has very little support for CSS, including:

  • Background images, colors, and positions
  • Borders, even when using nested table with background color
  • Margins and padding
  • Width and height
  • Font styles, sizes, and weights
  • List styles and images

If you include a “.com” at the end of text, Gmail will automatically link that text to a Google search for the domain. To avoid this, remove the “.com” or add a space between the text and the “.com”.

Gmail isn’t the only email client with these issues as Hotmail, Yahoo! Mail, and Lotus Notes all have similar issues. However, it has been slow to make changes to support CSS. For more information on CSS rendering in emails, visit the Email Standards Project.

For users with certain security settings, Gmail will also display a warning message within your e-mail if you include text that refers to a URL, but links to another URL. For example, if text within your e-mail displays as “walmart.com,” but links to hangout.net, the warning message will display. However, this will only occur with major websites as text.

MSN Live Mail and Yahoo! Mail –
It’s important to note that MSN Live Mail (Hotmail) and Yahoo! Mail sell ad space in the area surrounding your message so the preview panes are tiny. This challenges the design process and you must be aware of how much of your message will appear in the preview pane.

Yahoo has begun selling keyword ad space within messages. This means that certain phrases may link to content if you have not established a predetermined link. The issue is new and no best pratice exists to combat the ad placement within your message. In some cases, you may be able to link content to override the use of ad links withing content. The best approach is to test your e-mail with Yahoo to screen for keyword linking.

When using Hotmail and Firefox, stacked images will render with a white line breaking the images. To avoid this, use empty white space around all images when possible. However, you may aslo add style=”display:block” within an img tag to avoid there is only one image within a row. When several images appear within one row, you may need to seek other alternatives for design or coding.


3 thoughts on “E-mail Design & Development Guidelines – Part 1

  1. […] a future spam trap. It took almost decades for the US to develop regulations (CAN-SPAM) followed by best practices around e-mail […]

  2. […] 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 […]

  3. […] CSS as many email clients strip it out or over write it. If you must use CSS, keep it to a minimum and only use simple […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: