Why You Should Care About Email Design

How do you make your responsive email work in such conditions? By using dirty little CSS tricks, of course. TutsPlus' series on building their emails features a few of those tricks, while Campaign Monitor suggests mobile-first emails. You can also use templates and patterns and libraries and resources and quite a few HTML email frameworks

State of email design

The State of Email Design Stinks

Building HTML Emails - tips from Lee Munroe

Creating HTML Emails

Premailer has several tools for cleaning up your HTML email code. Which images are best for HTML emails?

Email Standards Project

Foundation for Emails

How to Code HTML Email Newsletters

Ultimate Guide to CSS Support

Zurb has a great set of responsive templates and good documentation on using them.

HTML Table generator - very helpful for laying out email newsletters. Also consider reading Creating a Centered, Responsive Design without Media Queries.

Email design preview, Email inbox preview, Email design preview, Email design testing | PreviewMyEmail.com

PutsMail - It's a mail test tool to test your mails before sending them

Plain Text

Don't forget a plain text version of your email. Make sure you read the Text Email Newsletter Standard (TEN Standard).

Consider switching to all plain text emails.

Why you shouldn't design your emails.

Further Reading

How To Whitelist Emails | WhatCounts

How to Measure your Email Marketing

Call Me E-schmail: Conquering the Beast that is HTML Email 

My Current HTML Email Development Workflow

Email Sales Metrics: How to Find and Track the Numbers that Matter

ZURB U | Bulletproof Centering in HTML Emails

How to redesign an email digest

Newsletter Design: 10 Awesome Hacks For Emails That Convert

Creating Curated Email Newsletters

How to Develop a Series of Transactional Emails for your Company

Really Good Guide to Email Design (includes a checklist). This information is good for beginners.


You might want to checkout Postcards by DesignModo - they have an online builder for free to generator beautiful emails.

Optimize Images for Emails on Retina Displays

High-pixel density displays are becoming more and more common, but an increase in pixels per inch can make small images look fuzzy and unfocused. Fabio has a simple way to avoid using ugly images in emails:

Double the size of the image, and then constrain its width with either CSS or the width attribute on the img tag. The result is an image that maintains its sharpness on new device screens and works across many email clients.


This page contains information I gathered and thought were very useful. See more notes on programming.

Just to let you know, this page was last updated Sunday, Jun 16 19