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

Points to Remember

  1. 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

Addendum 16th Dec 9: