Tips to Make Great Looking Emails

It’s important to understand how emails are different from web-pages. Many of the current best practices for the web don’t apply to the world of email. To top it off the recent version of MS Office 2007 regresses behind previous versions in terms of functionality. Below are some tips and links to other sites that should help you go in the right direction.

  • Design Narrow! Your text area is 700 pixels wide. While most internet uses have screens at least 1028px across, they still only check their email around 500-750 pixels across. AOL has less than 300px width to there reading pane in some settings!
  • No Flash, JavaScript, Movies, or Animated Gifs They won’t work in many email clients (most notably Outlook 2007).
  • Inline CSS is preferred over a style tag with references because some email clients will cut this tag out.
  • Many CSS Functions are disabled by email clients. This includes:
    • Positioning, Float Functions
    • Background-Image
    • For a comprehensive list visit Campaign Monitor
  • Tables over DIV tags Since the positioning functions of CSS aren’t available to us, we need to make up for that by using tables where column layouts are needed.
  • Design for the top 300 pixels Many emails never get opened anymore and are restricted to the preview pane of the email client. This means you need to fit anything important in the top 300 pixels, and ideally within the top 150.
  • Small headers Large graphics are fun, but if they violate the previous rule. Nix the graphic large header image.
  • No Background Images This includes in CSS and in tables as they are removed in Outlook 2007 (setting the template background image will not be removed however). Images set using the system will have the best likelihood of appearing in most email clients.
Share and Enjoy:
  • email
  • Twitter
  • Facebook
  • Print
  • PDF

Leave a Reply

Powered by WP Hashcash