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
- no css background images, but works with table background="background_image.png"
https://www.campaignmonitor.com/blog/email-marketing/2010/06/adding-background-images-to-your-email-in-two-simple-steps/ - <font color="#aabbcc"> </font>
- <td bgcolor="#aabbcc"> </td>
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