HTML emails are a great way to keep clients posted on the latest updates related to your business or product, but they’re a bit tricky. Creating HTML for email isn’t like creating HTML for browsers. There are no standards as such so you can forget much of what you know about HTML. Also, CSS support in email clients is inconsistent. As a result, we must resort to ancient techniques, such as using tables, and inline CSS.

We created this list, hoping that you will be able to find useful links that you can use for your next HTML email design and development project.

Turn Your PSD into a Solid HTML Email

Turning a Photoshop file into a living web page is a common task for web designers. We all have our own processes for extracting visual elements, grabbing colors, and building layouts in lovely, standards-compliant HTML and CSS. HTML email is a different and darker story...

Code an Email Newsletter from PSD to HTML

Last week we learned how to go about designing HTML emails. This week we’re going to turn the PSD into a functional HTML email. To code a HTML newsletter you can either code it from scratch, or use an already existing template...

Getting Started with HTML Emails

As a freelance web developer, coding HTML emails are one of the more challenging tasks that I have to deal with. Fortunately, when one of my first clients asked me to design and code his email newsletter, he was patient enough to let me go through the long and frustrating process of figuring it all out. You might not be so lucky, so prepare yourself with this tutorial...

6 Easy Ways to Improve Your HTML Emails

Like many other web designers, I thrive on coding beautiful yet flexible web pages that display virtually identical in every web browser. Unfortunately, designing email newsletters sends you back ten years. Deprecated tags, tables, inline styling, oh my! In this article, I’ll list six methods that will immediately improve your email layouts...

Rock Solid HTML Emails

Before getting into the details, there are some uncomfortable facts that those new to HTML email should be aware of. Building an email is not like building for the web. While web browsers continue their onward march towards standards, many email clients have stubbornly stayed put. Some have even gone backwards...

12 Fixes for the Image Spacing in HTML Emails

Have you ever noticed the small spacing below images in Hotmail and Gmail? Every browser renders this spacing except for IE 7 and lower. Just after writing this blog post: The Mystery of Hotmail's Strange Image Spacing, and after lots of hair pulling, we realized that the culprit for this pesky occurrence was actually the DOCTYPE...

Adding Background Images to Your Email in Two Simple Steps

We often get asked about the best way to add a background image to an email newsletter. Well, the good news is that there's a reliable way to get a repeating background image to surround your content in most major email clients, including Gmail and Outlook 2007! In this post, we'll walk through two techniques which can be combined to give your design some background image love...

10 Email Mistakes You Can Easily Avoid

As we move into the last month of the year, let’s take a quick look at how you can improve your email newsletters and appeals  in 2011. Consider the following email pitfalls. Which of these is your nonprofit guilty of committing?

How to Optimize Your Email for Mobile Devices

As more research regarding both the sales and usage of mobile devices - specifically smartphones - becomes available, many marketers are asking, "How should I be optimizing my email for mobile devices?" There are several strategies available that range from "ignore it" all the way to the creation of elaborate solutions to deliver device-specific content to mobile users. But how do you know which is right for you and, more importantly, your subscribers?

The 10 Basics of HTML Email Newsletters

They’re becoming ever more popular as a form of cheap, affordable and effective marketing but HTML emails can still be a pain in the “arse” mainly due to the dated rendering by most email clients. They’re something I’ve found myself doing ever more frequently recently so here are my 10 basic tips for putting together your own HTML email newsletters...

Design and Build HTML Email Without Losing Your Mind (and Soul)

This article gives you the information you need to plan, design and build an HTML emails that renders well and is actually useful to recipients. It’s a quick and dirty guide to effective email newsletters. If you’d like to get started right now, here are the cheat notes to get you on the right track. Read on for more detail, examples and resources...

The Principles of Beautiful HTML Email

As web designers, we're used to designing for the particular constraints and capabilities of web browsers, and there's a ton of great advice out there to help. HTML emails are a different story, though they've often been the black sheep of the web design world, and have either been ignored or actively repelled...

Free HTML Email Templates from Campaign Monitor

Every email template has been thoroughly tested in more than 20 of the most popular email clients like Outlook 2010, Gmail, Lotus Notes, Apple Mail, the iPhone, and more. They're ready to roll and are completely free...

Free HTML Email Templates from MailChimp

Here are 36 basic, flexible email templates you can use to get started. They've been thoroughly tested to render properly in all major email programs. Just download the templates and customize them any way you want to with your favorite text editor. Totally free. Because MailChimp loves you...

Excellent HTML Newsletter Templates – Best Of

A well designed email template can be the difference between success and failure. Whether it’s to update customers about a product, or to share information, having a well designed template can be a great starting point to guide your readers and give them a clear coherent flow when they read your email. This is crucial, considering how important the first impression is...

35+ Free HTML Email Newsletter