HTML Email Newsletter Toolbox – Tutorials, Templates and Inspiration

Whatever your personal feelings are about HTML emails, they do work effectively as a communications and marketing tool. And worst of all, you can’t ignore them, you just know that at some point a client is going to ask you to create a template for them.

If you have never designed an HTML email template before you may be thinking: “Whats the big deal? You use some basic HTML with a little CSS, no problem at all!”. Little do you know that the actual design of the email is the least of your problems. When designing a web page you do need to cater for only a handful of browsers, each with there own particular little quirks. With emails, you need to design them to display properly in 50+ (!) email clients, with each one not willing to cooperate with.
There is no fun when designing an email template. You have to roll up your sleeves and test, and then test some more.

A well designed email template can be the difference between a companies success and failure, so its has to be designed right and formatted correctly.
To help you with this we have collected a huge array of email design Best Practices, tutorials (both HTML and CSS), testing tools, ready made templates (there are only a few, as most of the free templates out there look like they were all designed in the 90s) and finally some email inspiration.

Don’t forget usability and accessibility rules when designing emails, perhaps you should read these articles first: Design of Email Newsletters – Alertbox and Email Newsletters: New Results From Eyetracking and User Research.

Email Design and Best Practice Guides

Design and Build Email Newsletters Without Losing Your Mind (and Soul) – Smashing Magazine

Design and Build Email Newsletters Without Losing Your Mind (and Soul) - Smashing Magazine
This article gives you the information you will need to plan, design and build an HTML newsletter that renders well and can actually be useful to recipients. It’s a quick and dirty guide for effective email newsletters.

A Guide to Creating Email Newsletters – Webdesigner Depot

A Guide to Creating Email Newsletters - Webdesigner Depot
In this article, you'll get the opportunity to explore the common design patterns of email newsletters and learn which approaches work well, so that you’ll be prepared to create one for yourself and your clients.
They've also included a compilation and analysis of different newsletter designs so that you can learn from them as well as offer tips on what to do and what not to do.

20 Email Design Best Practices and Resources for Beginners – Nettuts+

20 Email Design Best Practices and Resources for Beginners - Nettuts+
Even for experience designers, building email newsletters isn't easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesn't work as it should in every email clients – Styles don't display, images aren't visible, etc. This is where these twenty best practices come in handy.

A Guide to CSS Support in Email

A Guide to CSS Support in Email
Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.
Campaign Monitor have put together a downloadable guide that will save you the time and frustration of having to do it all yourself. With 23 different email clients tested, they cover all the popular applications across desktop clients, web apps and even mobile email.
You can download the guide here:

HTML Emails – Taming the Beast – Carsonified

HTML Emails – Taming the Beast - Carsonified
Most of designers and developers tend to think that if you can design a web page, then hell, an HTML email will be a piece of cake! Well…almost. But before you decide to plunge into HTML email design head first, there are a few guidelines to follow that can ensure the best results for you and your clients.
The guidelines fall roughly into these recommendations: how you should design your email, how you should code it and finally the essential content you should include.

The Principles of Beautiful HTML Email – Sitepoint

The Principles of Beautiful HTML Email - Sitepoint
HTML emails have often been the black sheep of the web design world, and have either been ignored or actively repelled. Despite that, HTML email usage continues to grow, and it has continually proven to be an effective tool for businesses to communicate with customers.
An email inbox is a very noisy place, with tons of messages, folders, calendars, and other distractions. Your subscribers may only ever read the subject line, or perhaps see your email through a tiny preview pane, so you need to design it accordingly and make the best use of the screen space and time the reader gives you. So, what makes a good, modern HTML email design? Read on to find out…

Best Practices For Bulletproof E-Mail Delivery – Smashing Magazine

Best Practices For Bulletproof E-Mail Delivery - Smashing Magazine
Have your e-mails already been flagged as spam, although you’ve sent a seemingly legitimate proposal to your client? Have you ever wondered why the efficiency of your newsletter campaigns suddenly dropped down? In both cases you deal with a problem which is harder to get done with than you think it is: bulletproof e-mail delivery.
This article suggests over 20 bulletproof techniques, best practices and related services you can use to ensure best e-mail and newsletter delivery rates.

10 Tips For Your First Email Campaign – Digital Web Magazine

10 Tips For Your First Email Campaign - Digital Web Magazine
Here are ten tips you could give to any new customers that are wanting to send out their first email campaigns. Share them with your clients before you begin your next email marketing projects, and you might prevent more than a few headaches!

Stupid HTML Email Design Mistakes – MailChimp.com

Stupid HTML Email Design Mistakes - MailChimp.com
It's astounding how many professional web designers (and programmers!) make silly mistakes in their HTML email campaigns. With the exception of just a few little tweaks, HTML emails are really just miniature web pages. So there's really is no excuse for the mistakes that keep on cropping up.
If you're a web developer, and you're totally new to designing HTML emails, read this article before you start offering email marketing services to your clients.

Using CSS in HTML Emails: The Real Story – CSS-Tricks

Using CSS in HTML Emails: The Real Story - CSS-Tricks

Newsletter Design Tutorials

How to Code HTML Email Newsletters – Sitepoint

How to Code HTML Email Newsletters - Sitepoint
This article will bring you up to date on how to code HTML email so that it will display well in most email clients and describing the results of the authors hands-on experience creating HTML email newsletters for clients, as well as bits of technical information from the Internet.

How To Code HTML Emails – MailChimp

How To Code HTML Emails - MailChimp

Optimizing CSS presentation in HTML emails – Campaign Monitor

Optimizing CSS presentation in HTML emails - Campaign Monitor

Using CSS In Email Newsletters – Groundwire

Using CSS In Email Newsletters  - Groundwire

Learn How to Style Articles for Print and Email – Nettuts+

Learn How to Style Articles for Print and Email - Nettuts+

Ensuring your HTML Emails Look Great and Get Delivered – Carsonified

Ensuring your HTML Emails Look Great and Get Delivered - Carsonified

6 Easy Ways to Improve Your HTML Emails – Nettuts+

6 Easy Ways to Improve Your HTML Emails - Nettuts+

Create a Free Email Newsletter Service using WordPress

Create a Free Email Newsletter Service using WordPress

Rock Solid HTML Emails – 24 ways

Rock Solid HTML Emails - 24 ways

Build a ‘WordBurner’ Email Newsletter Manager using WordPress and FeedBurner – Nettuts+

Build a ‘WordBurner’ Email Newsletter Manager using WordPress and FeedBurner - Nettuts+

Fantastic AJAX Newsletter Module – Nettuts+

Fantastic AJAX Newsletter Module - Nettuts+

Sending Nice HTML Email with PHP – CSS-Tricks

Sending Nice HTML Email with PHP - CSS-Tricks

Basic HTML Email Templates from MailChimp.com

Basic HTML Email Templates

Basic HTML Email Templates
Here are four basic, flexible templates that you can use to get started with email development. They've all been tested and render properly in all the major email programs, like Outlook 2007, Lotus Notes, Gmail, and more.

Six Basic Newsletter Templates from CakeMail

Six Basic Newsletter Templates from CakeMail
The basic templates above have been created by CakeMail, they are free to use, distribute and modify under a Creative Commons Attribution Share-Alike license.

Advanced HTML Email Templates

30+ Free HTML Email Templates – Campaign Monitor

30+ Free HTML Email Templates - Campaign Monitor
Campaign Monitor offer 30 free and professional email templates which have been tested in all the major email clients, so all you have to do is add your own content.

Excellent HTML Newsletter Templates Collection – Hongkiat.com

Excellent HTML Newsletter Templates Collection - Hongkiat.com

Free Newsletter & Email Newsletter – Templates Box

Free Newsletter & Email Newsletter - Templates Box

35+ Free HTML Email Newsletter – Dzinepress

35+ Free HTML Email Newsletter - Dzinepress

Free Newsletter Templates and Layouts by Interspire

Free Newsletter Templates and Layouts by Interspire

Free html newsletter templates

Free html newsletter templates

Email Testing

Testing Software for Web Professionals – Litmus

Testing Software for Web Professionals - Litmus
Litmus will show you exactly how your email is seen through the eyes of your readers, whatever email system they might be using. Within a few minutes you can perform a thorough test which would eitherwise be time consuming and expensive to do by hand.
Litmus runs your email through a wide range of spam filters. From consumer desktop filters, to high-end gateway systems used by ISPs and large corporations. If your email doesn't pass them all, Litmus shows you exactly what caused the problem so you can fix it quickly. (Please don't abuse this).

Email Testing and Email Preview – Email on Acid

Email Testing and Email Preview - Email on Acid
Your customers use a variety of clients to view their emails from desktop programs such as Outlook, Entourage, Thunderbird and Mac Mail to web-based programs like Gmail, Hotmail and Yahoo. Each email client has its own rules on how it renders CSS, plain text and HTML messages and many times these rules vary considerably from one version to the next.
The Email on Acid test not only renders your code in the top 15 most popular email clients but it will also show you exactly which lines of code where not supported by each client.
This test can be used to efficiently optimize each of your emails prior to sending so that you maximize rendering, user readability and performance.

How to test HTML emails – Campaign Monitor

How to test HTML emails - Campaign Monitor
This article will outline the process for testind HTML emails, including what to look for when you test, how to test for various viewing scenarios, what techniques/utilities to use for debugging and finally what email clients to use.

Email Design Showcase

Ben – Beautiful Email Newsletters

Ben - Beautiful Email Newsletters

HTML Email Gallery

HTML Email Gallery

The Ancient Art of Email Templating

The Ancient Art of Email Templating
Written and designed by Mailchimp, the Email Design and Coding Tactics from the Ancient Web Masters, is a look at the lighter side of email newsletter design. Very funny!

Author: (582 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments