Creating Emails & Email Newsletters

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

Can I Email

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 emails before sending them

Mailtrap - email testing tool

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

MailTracker - Free email tracking for Gmail

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.

Improving Your Subject Lines - Campaign Monitor

How to make email confirmation a little easier for your users - Medium

Background images for emails - Campaign Monitor

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

Using HTML Tables For Layout

Divs have positioning and box-model issues in different clients — in particular, those that use Microsoft Word to render (i.e. Outlook). You can use divs if you want, but it’s safer to code like it’s 1999 and stick to tables. This means:

• instead of
  ,
• #FFFFFF instead of #FFF,
• padding instead of margin,
• CSS2 instead of CSS3,
• HTML4 instead of HTML5,
• background-color instead of background,
• HTML attributes instead of CSS,
• inline CSS instead of style sheets or

Responsive Emails

MJML - The Responsive Email Framework

Mobile email design (part 1) » STYLECampaign

Antwort Email Templates

Responsive HTML Email Templates

Understanding Media Queries in HTML emails

1500+ Collection of Responsive Email Templates

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.

Inspiration

Campaign Monitor's Best Email Marketing Campaigns