Emails
Examples (click to enlarge)
Three versions shown below, including two 600px wide (with and without property buttons) and one 680px wide (without property buttons):
 |
 |
 |
General guidelines
- The design of HTML emails is far more restrictive than that of web pages. Customers view emails in a very wide variety of environments, such as desktop email apps (e.g. Outlook, Mail.app, etc.), web apps in the browser (e.g. Gmail, Yahoo! Mail, etc.), and email apps on mobile devices (iPhones, Blackberry, etc.).
- Campaign Monitor recommends a maximum overall width of 600px.
- No plugins (e.g. QuickTime, Flash, etc.), no JavaScript, no forms.
- Use nested HTML tables for layout, not modern CSS. Only very limited CSS is permitted, for instance to style text.
- I don't believe it's documented in their Email Content Guidelines, but YesMail once told us to not use merged table cells (i.e. colspans or rowspans). So, use lots and lots of nested HTML tables.
- Anything in the <body> tag will be stripped out, so you must set individual font styles for each and every text element. Page background color can only be changed by a full-width HTML table wrapping everything.
Technical resources for designing and building HTML emails
- YesMail Email Content Guidelines (Microsoft Word document)
- Campaign Monitor
Fireworks format
Photoshop format