Jan 8 2009

HTML Email design Guidelines

Text:Image ratio

  • Emails containing large amount of images get a high SPAM score as the images can be used to hide SPAM messages. I suggest using at least 80:20 text:image ratio. If it is necessary to use a lot of images, there are techniques to make them less harmful.
  • Always optimise the image file size. Make sure you use GIF and JPG correctly to get the lowest file size. Use JPG only for photos and images containing gradient colors. GIF - for plain sharp images.

Layout

  • A standard email should not be wider than 600px.
  • <table> is the most appropriate form of email layout.

CSS

  • Go easy on CSS! There is absolutely no need to use CSS excessively. There is a thin line between an email that reaches the recipient and the email that ‘junks’. Many leading email clients got a poor CSS support. For example Outlook 2007 is using MS Word HTML rendering engine which means basic CSS support, no background images etc.
  • Use only inline CSS.

A great article by CampaignMonitor about CSS support across different Email Clients:
http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_support_in_emai.html

Link to HTML

  • Never assume that the email will look exactly the same on all email clients even though you did all the necessary tests. Always include a “view online” or “can’t see this email?” link at the top for those that are struggling to see your message.

Multipart Email (HTML and Text)

  • If possible always send multipart emails. If the recipient can’t see the HTML he will see the Text email. Think about those that use handheld devices to read their email!

Images

  • Always use full path for the images.

For example: <img src=”http://yoursite.com/image.jpg” /> instead of <img src=”image.jpg” />

  • Never put important information into the images. When designing an email always think what will the creative look like with the images missing, because this is what most recipients will see before pressing on “Download images”
  • Alt tags are very important to describe the missing image. Never use spam messages in the alt tags like “Call now to claim your FREE DVD!!!” etc.

Image size parameters

  • Be aware of what the missing image size parameters will do to your design. Also keep the filename neutral (don’t use “click_here.jpg”)

Image format

  • The image format itself does not affect the email delivery in any way. It’s the image size that matters. Images containing solid colors should be saved as GIF’s and gradient images (photos) should be JPEG, JPG, PNG.

Can’t see this email?

  • It does not matter how well you designed the email. There always be someone who is using a prehistoric email client and can’t see anything.

Source Code

  • Keep the source code as tidy as possible. Remove all comments.
  • Make sure the URL is as neutral as possible. www.your.site/greatfreeoffer.html. Make sure that the landing page URL is not Blacklisted. Happen to me three times so far when I spend hours of trying to resolve deliveribility issues by adding text and removing images when in fact the clients website was blacklisted.

“Textual links should be colored and underlined to achieve the best perceived affordance of clickability” Jakob Nielsen has written a great article about link colors. It is good practice to keep the URL’s blue as everyone will know that this is a link. This helps when dealing with “click here” buttons. Example “click to visit our online shop” can be changed into “visit our online shop”. It is a clear call to action that can not be misunderstood.

http://www.useit.com/alertbox/20040510.html

Unsubscribe link

  • It is a legal requirement

4 comments   |  tags: , , , , , , , , , , | posted in HTML email