42 HTML email design resources

Last updated June 12, 2009

A summary of the best HTML email design resources, covering overviews, guidelines, standards, templates, checklists, design tools, galleries and more.

(Sharp-eyed observers will note that there are around 50 resources now listed. But 42 is a better number, so it stays in the title.)

There are numerous such resources, of course, but these are among the most useful...do suggest others in the comments.

Overview articles, collections, guidelines

Email anatomy: outlines the structural anatomy of a marketing email and gives you a nice framework around which to hang your design approach.

Similar posts covering strcture are The anatomy of an email and The perfect newsletter structure.

How to code HTML email newsletters: Extensive advice on use of HTML, CSS, tables (or not) etc.

Campaign Monitor: First port of call for HTML email resources. Check out their blog and HTML email design guidelines.

The Principles of Beautiful HTML Email: Looks at what makes "good, modern HTML email design."

A designer's guide to HTML email: Advice given in the context of a newsletter redesign project.

Email design for mobile devices: Articles and links on how to approach design in the context of mobile email.

Coding an HTML Email: Three-part article on how to turn a design into HTML.

Design and layout: ...category at the BeRelevant blog.

9 best practices for email design: Another good overview, this time from Vdot Media.

6 easy ways to improve your HTML emails: Selected tips for newsletter publishers.

HTML email coding/delivery: Free 60+ page guide from MailChimp.

Standards and support

Email Standards Project: Working to get email client developers to support a set of minimum standards for HTML email. Includes details of how each of the main clients currently in use shape up in this regard.

CSS support in email: Extensive guide from Campaign Monitor.

Forms in email: Details on which clients support forms, from Mark Wyner and from eROI.

Multimedia in email: Collection of articles and links on best practices with regard to videos in email.

Animated gifs: Another roundup from Campaign Monitor, this time of which clients support animation.

Email templates

Michael Fasani: Sample code and rules for robust emails that he says work well in various display environments.

The Holy Mail: Glen Lipka's universal template.

MailChimp: Free HTML email templates, tested for cross-client conformity and with coding tips to boot.

Campaign Monitor: 30 free "safe" templates.

CarbonGraffiti: Ten "safe" templates in various formats (postcard, columns etc.).

CakeMail: Basic and advanced newsletter templates.

Checklists

The Email Experience Council: Their email design roundtable recently put together checklists for email coding and email design, which you can buy from their whitepaper room.

DaveChaffey.com has a 24-point creative checklist for B2C and B2B newsletters.

Email design tools

Design preview tools: Inbox Inspector, Campaign Monitor and
Litmus

HTML Email Analyzer: Firefox add-on that checks your email for potential problems relating to coding, deliverability and copywriting.

Fingerprint: Gives you information on which email clients your subscribers are using.

Premailer: Converts CSS styles to inline style attributes, plus other features.

More preview tools here, most of which are part of wider testing and service packages.

Design inspiration

BEN - Beautiful Email Newsletters: Design showcase for aesthetically pleasing commercial emails.

Spam Meltdown: Hundreds of screenshots of emails arranged by design and topic themes (e.g. "rounded corners" or "coupons").

Email Design Gallery: Showcase of attractive emails, arranged by layout and messaging type.

Retail Email Blog: Reviews and screenshots of emails from leading online retailers. Check the Design Hall of Fame.

Smith-Harmon: Blog showcasing creative designs. Also check out their Email Design Look Book 2009.

Email Gallery: Emails for inspiration, by Alex Volocaru.

The Email Wars | Email Design: Another marketing blog written by an agency, but featuring a range of good (and often cutting edge) design.

Make it Pop: More advice on (and examples of) creative email design and development.

MarketingSherpa's Email Award Winner Gallery: Details of all the winning email campaigns, selected for their actual success in driving action or reaching goals, rather than how pretty they are. Also has links to award winners from previous years.

Image blocking

Image blocking and suppression in emails: Articles and links on how to design with blocked images in mind.

Usability

Nielsen Norman Group: big report with email newsletter design guidelines from a usability perspective.

What about text?

Which is better? This post and this one list the reasons for and against text/HTML as your preferred format.

More on HTML/CSS in emails | Tags: email design, html email, image blocking, css in email

Sign-up for the Email Marketing Reports NEWSLETTER
Twice a month, free, packed with email marketing advice and all the posts from this blog.

Email:      First Name:     
    More info and sample

 feed | email | Twitter | Facebook

The main website for everything email marketing
Email marketing search engine
Introduction and email advertising basics
Service listings and sources of statistics
Advice on email design and delivery issues

Top 21 email marketing info sources
Outlook 2007 and HTML design
42 HTML email design resources

follow me on Twitter