« Back to list view

E-Mail Newsletter HTML Layout Cheat Sheet Checklist

Parts taken from http://www.campaignmonitor.com/css/

Premailer moving styles inline: http://premailer.dialect.ca/

http://www.email-standards.org/

Especially for Outlook 2007 restrictions

Tipps

  • General
    • No percentages, stick to pixels
    • Use css classes, not ids
  • Colors
    • Set link color with body attributes link="#3c5677" vlink="#3c5677"
    • Use classic color notation #aa4400
    • Headline colors need !important (Hotmail), but then it doesn't work in Outlook 2010
    • Custom body text color needs to be set for <p>
  • Use oldschool table layouts
    • Setting font-size on <body> does not affect tables
    • outlook 2007 needs the font-family set on table and td
    • <table cellspacing="0" cellpadding="10">
    • <td width="80">
    • Set the width in each cell, not the table
    • Nest tables instead of margins
    • Padding for td seems to be okay
  • Images
    • Disable image borders <a href="link.html"><img src="image.jpg" border="0" /><a>
    • Don't use space images, because of image blocking
    • Prefer JPG
    • PNGs: Always use transparent backgrounds.Colors do mismatch otherwise in various mailers

Does not work

  • Gmail and other webmailers remove the styles set in html head
  • Yahoo does not support a anchors
  • Apple mail a anchors do work not work well. It jumps to far down.

supported / not supported

<style> in head

selectors

  • element
  • :visited
  • .classname
  • (#id)
  • element child

color and background

box model

  • no height
  • no padding for p & div
  • width works on tables and cells, but not on p, div and inline elements
  • no max-widh
  • no min-width

lists

no list styles