Aug 27 2009

Designing For eMails

CSS support by email clients is sparse and poorly implemented which makes email design an interesting beast. Stripped to it’s barebones, think in terms of ‘classic’ web production with inline styling and using of tables for layout.

The following resources and pointers may come in use for when you’re designing….

Helpful Resources

Campaign Monitor’s ‘Guide to CSS support in email clients’ – breakdown of major browser CSS support
Campaign Monitor’s eMail Design Guidelines – helpful page on designing for emails
Email Standards Project Acid Test – promoting web standards in emails
HTML to eMail Converter – checks & converts your code to inline styles ready for mailing
The Email Standards Project – fighting for better HTML support
Litmus App’s Email Testing – preview your emails

Points to Remember

Structure
1. In General
  - Use Campaign Monitor’s CSSsupport guide to find which styles could be used in your design.
  - Test in as many clients as you can possibly try, both the online (Gmail, Yahoo, and Hotmail) and desktop clients (Outlook, Mail.app, Thunderbird etc.).
  - Keep your design between 440px and 600px to fit into as many screen/client panes as possible.
2. HTML
  
  &

  CSS

  - <head>, <title>, <meta>, <link>, <body> and sometimes <style> ([gmail](http://www.gmail.com/), I’m looking at you) can often be stripped out by clients so use inline styles as best you can. Apply your <body> styles to a wrap-around div instead.
  - In a similar vein, don’t link to external stylesheets. Many email clients don’t support it.
  - Use class selectors (eg. td.classname instead of .classname) as some clients strip the preceding .‘s.
  - Target each style as well as you can so not to change an online email client’s entire look (eg. a:link would become td.classname a:link).
  - Background images can be buggy but so long as you check thoroughly it may be possible to use them.
  - Margins are ignored in [Hotmail](http://www.hotmail.com/).
  - If using floats, remember to clear them the old fashioned way, with a clearing div.
  - Use extra table cells instead of padding.
  - Make good use of bgcolor on your table cells.
  - Remember, CSS layouts should degrade gracefully and can if produced properly. Tables are not the be all and end all of email design!

  3. Images

  - Remember to use full paths to images, not relative paths. (e.g. http://www.example.com/email/images/logo.gif).
  - Always use ‘alt’ text (although some clients strip the alt out) & include width and height so as not to throw off your design when images are disabled.
  - Transparent .png’s are not very well supported so pointless to use them.
  - ~~Feel free to bring back the old spacer.gif~~ Images are generally switched off by most email clients these days so it may just make your design cluttered with junk when first opened.
  - Never use images for Important Information. Many email clients have images turned off as default.
  - Test your design in as many clients & preview panes as possible with images on & off.

  4. Content

  5. Typography

  - My personal for font-size is 0.8em. Line-height is also widely supported.
  - Place a div within each table cell with font information.

  6. Information

  - Always include a text based link to a web version of your email at the top.
  - Always include an ‘unsubscribe’ link at the top & preferably a short description of how you have permission to use their address. If peopple know they *can*escape they are more likely to feel free to keep receiving your quality publication.
  - Always include a plain-text version of your email (using MIME). It’s just polite.
  - Keep your main focus to the top left 200-300px of the email (ie. ‘above the fold’). The use of preview panes is prevalent so make sure your information is passed on quickly and effectively.
  - Paragraph tags can mess up a little with margin not being supported by [Hotmail](http://www.hotmail.com/) so try to use the line break tag ( <br /> )instead.

  7. Spam

  - The


    CAN-Spam Act

    of 2003 may not be legally enforced in your vicinity of the world but does have some helpful tips regardless:

    - Unsubscribe compliance
      - A visible and operable unsubscribe mechanism is present in all emails.
      - Consumer opt-out requests are honored within 10 days.
      - Opt-out lists also known as suppression lists are only used for compliance purposes.
    - Content compliance
      - Accurate from lines (including “friendly froms”)
      - Relevant subject lines (relative to offer in body content and not deceptive)
      - A legitimate physical address of the publisher and/or advertiser is present.
      - A label is present if the content is adult.

Research Articles

email-marketing-reports.com – interview with David Greiner – an interesting read
messagingtimes.com – article on preview panes) – a short critique of a cafepress mail-shot
xavierfrenette.com – css support in webmail – interesting read but possibly out of date
campaignmonitor.com – article on nested tables – …and the reasons why perhaps you shouldn’t
alistapart.com – article from 2004 – a little dated but still has a few pointers (included above)
css-tricks.com – article from 2007 – which is less dated and also has some pointers (included above)
email-marketing-reports.com – an brief blog on the ‘p’ tag.

Addendum 16th Dec 9: