Archive for February, 2010

HTML email design — tips for designers

Wednesday, February 10th, 2010 by

HTML email design elements should be simple, minimal and non-essential. This is the second article in a three-part series on HTML email. You can also download these HTML email design tips in PDF. Check out MailChimp’s comprehensive how to HTML email marketing guide for a lot of great best practices. We’ve condensed and reorganized many of those HTML email tips to specifically address designers.

Design HTML email for the unique medium.

  • Use simple static images because interactive elements like Flash, movies, and Javascript won’t work.
  • Use graphics minimally because image-heavy emails can look like spam.
  • Make your images non-essential because webmail programs will frequently turn off image-loading by default. Your email should communicate well even without the images.
  • Avoid using background images and tiling because some email programs, like Outlook, won’t show them. You can use them if they don’t matter.
  • Set your canvas to 500-600 pixels wide to fit smaller preview windows.
  • Design the recognizable brand to fit into the top leftmost 200×200 square because of tiny preview panes in some email programs. Give subscribers a reason to open the email in a full window.
  • Make the first line of text relevant and unique because it will show in Gmail and future programs that show a snippet of the first line along with subject lines.
  • Design plain-text formatting with headings, lists, links, dividers, etc.
  • Read SitePoint’s HTML email design principles.

Include essential elements.

  • From name should be recognizable.
  • Subject line shouldn’t look spammy.
  • To line should be personalized with a name, not just an email address.
  • One-click opt-out link should be easy to access, perhaps at the top.
  • Link to an archived web version just in case the template breaks.
  • Link to a privacy policy page.
  • Street address, phone number and other contact information adds legitimacy.
  • Reminder how the subscribers got on your list.

Also in this series

How to code HTML email — tips for coders

Wednesday, February 10th, 2010 by

When exploring how to code HTML email, keep in mind that the code should be low-tech, long-hand and well-tested. This is the third article in a three-part series on HTML email. You can also download these tips on how to code HTML email in PDF. Check out MailChimp’s comprehensive how to HTML email marketing guide for a lot of great best practices. We’ve condensed and reorganized many of those HTML email tips to specifically address coders.

Code HTML email templates like it’s 1999.

  • Code HTML/CSS by hand rather than in a WYSIWYG editor to ensure the code is clean and only includes supported elements.
  • Use low-tech and simple table layouts without nesting or merging cells because CSS layouts with positioning don’t work.
  • Code only long-hand inline CSS styles instead of external or head stylesheets. CSS short-hand like “font” may not work, so write out individual properties like “font-size.” Try a tool like Premailer to make your styles inline.
  • Use CSS primarily for text styling. Put general text styles on parent td cells but don’t rely on style inheritance from parent table cells to children cells. Use inline CSS on heading and paragraph tags to overwrite inherited styles.
  • Avoid font tags because they don’t yield consistent font sizes.
  • Wrap everything in a master 100% width table for background colors and other body styles because head and body tags are stripped out by webmail.
  • Avoid conflicting with webmail CSS ID and class names by not using any or using unique names, like “clientname-footer”, rather than generic names, like “footer.”
  • Reference images with absolute instead of relative paths because they’re hosted on a web server.
  • Use alt text in a header image to ask people to “please turn on images” so that they know they’re missing out when their webmail turns off images.
  • Add CSS text styles to table cells even if they contain only images because alt text will be styled when images are turned off.
  • Take a look at MailChimp’s sample email templates to see code that works.
  • Check out CSS Tricks’ s HTML email screencast for a how-to video.

Test HTML email code everywhere.

  • Test with images and CSS turned off using the Firefox Web Developer Toolbar plugin.
  • Set up many webmail test addresses and install several desktop email programs for testing. For a fee, try MailChimp’s Inbox Inspector for final tests of your template.
  • Avoid spam filters in testing by avoiding the word “test” and dummy text like “lorem ipsum.” Make every aspect of the email production-ready before testing it.

Discover email program inconsistencies on your own, but start with these.

  • Gmail doesn’t honor background-repeat styles, so plan for backgrounds to repeat in all directions.
  • Gmail breaks when using single quotes around multi-word font names in font-family declarations. For example, don’t use “font-family:’Lucida Grande’,Verdana,sans-serif;” but rather “font-family:Lucida Grande,Verdana,sans-serif;”.
  • Gmail doesn’t like percentage values for CSS line-height. Outlook 2007 creates too much line-height when em sizes are used. Use pixel sizes.
  • Gmail and Hotmail don’t display background images declared with CSS, so use the background attribute of the table and td tags.
  • Hotmail seems to ignore margins when margin-top CSS is used. Try using padding instead.
  • Hotmail and AOL on Macs add extra line-height around images unless the line-height of the container is smaller than the font size. Try 70% of the font size like this: 12px font size, use 8px line height (12 x .7 = 8.4)
  • Yahoo uses non-standard align and valign default values on table cells, so set them explicitly.
  • Yahoo has styles that make cellspacing ineffective on tables. Use cellpadding instead.

Also in this series