Creating HTML Emails: An Overview for Web Designers

Jun 2 2011 by Cameron Chapman | 41 Comments

A lot of the requirements of great HTML emails fly right in the face of what makes great website designs. Until you understand the nuances of HTML email design, it can be a frustrating and fruitless experience. But once you understand and accept that HTML email is a fickle, inconsistent, and bug-prone medium, it’s possible to use it to great effect in marketing both for yourself and your clients.

Below is a gathering of some tried-and-true wisdom from the world of HTML email design that should make diving in just a bit easier. Throughout, interspersed in the narrative, we’ve also included examples of fantastic HTML email designs to give you a taste of what others are doing.

Getting Into the HTML Email Mindset

Before you get started, make sure you give up on the notion of pixel-perfect HTML email design. Get used to the idea that your best bet is controlling how your code breaks, rather than trying to prevent it from breaking at all.

With the variety of ways people check their emails and the number of email clients — desktop clients include Outlook, Mac OS X Mail and Thunderbird and web-based email apps include Gmail, Yahoo! Mail, and Microsoft Exchange Online — it’s nearly impossible to guarantee that your design will look the same.

Behance holiday HTML email.

It’s a Fact: Your HTML Email Design Will Break

Your beautiful HTML email design will break. There’s no getting around it. Someone on that list of 10,000 newsletter recipients will be using some email client that’s so obscure or so old that there’s no way you could have prepared for it. And even the popular apps (Gmail, Outlook, Thunderbird, Mail, etc.) have no real consistency when it comes to how they render HTML.

So you’ll have to get over the idea of trying to get your HTML email to look identical and perfect to everyone who sees it. It’s not going to happen. The best you can do is anticipate how each of the major clients will break your design, and then try to control how it breaks, so that it’s still readable by most of your recipients.

CSS Awards HTML email.

Use HTML Tables for Email Layouts

Designing HTML emails goes against many of the accepted best practices of good web design. For example, although web designers have long given up using tables for web layouts, HTML emails need to be done with HTML tables rather than CSS and div-based layouts. This is because it’s unpredictable to determine how CSS will be treated on various email clients, and div-based layouts (the modern best practice for web page layouts) rely on CSS for positioning and alignment.

Using Photoshop for HTML Table Layouts

If you’ve forgotten how to work with HTML tables for layouts — or if you’re a younger web designer who has never had to work with HTML tables, use the help of Photoshop to get you started. In Photoshop, you can use the Slice Tool.

First, use the Slice Tool to chop your HTML email layout into several components.

Next, go to File > Save for Web & Devices. Choose your file format (JPG or GIF are more widely supported than PNG), and then press Save.

You’ll see a dialog window with some saving options towards the bottom. Under Save as type, choose HTML and Images.

This works fine for laying out the graphical elements of your design, but you’ll want to make sure your text is HTML, not images, so replace them in the markup as necessary.

Additionally, you want to clean up the HTML output because it might add unnecessary HTML junk. An automated tool is not a good replacement for hand-crafted code, but it can at least get you started.

Layout Margins and Padding

One other important thing to remember is that not all email clients treat margins and padding the same. You’re much better off nesting table cells rather than using CSS margin or padding for any vital placement.

BuySellAds HTML email.

Images Need Special Handling

There are a few considerations to deal with when it comes to images.

Image Format

First of all, you’ll likely want to stick to either JPGs or GIFs for your HTML email template because not all email clients support PNGs. Make sure that you specify your image height and width attributes — which is good practice anyways — to prevent any issues in rendering.

Use Alt Attributes

You should always give your images alt attributes; it’s absolutely vital in HTML emails. By default, many email clients do not display images when an email is first opened. Instead, they ask users to actively choose to display images. The repercussion of this extra step is that a lot of users simply won’t bother displaying images. Without alt attributes for your images, the email recipient may lose out on some content.

Below is what an HTML email looks like in Gmail by default. Notice that images in the email have alt attributes that describes the images it’s trying to display.

Avoid CSS Background Images

Background images can also be tricky. For example, Gmail is very particular about how it handles CSS background images (or background colors, depending on how they’re specified in the markup), so make sure you test thoroughly before sending to your list. Outlook 2007 won’t display background images at all without a minor hack.

Kate Spade HTML email.

Important Information Should Not Be Images

As a basic rule of thumb, images should be used for graphical elements, and text should be used for text elements. This is good practice whether you’re designing a web page or an HTML email.

Because images often aren’t shown when an email initially opens, it makes sense for critical information to be in plain HTML text rather than images to guarantee they’re accessible.

Broadsheet Melbourne HTML email.

HTML Email Layouts Are Narrower

The conventional standard width for HTML emails is around 600px. It can be a big change to go from designing for 960px+ web page layouts back to 600px. You’re effectively losing more than a third or more of the screen real estate you’re accustomed to. This is why it’s important to simplify your designs. One column is ideal, though you can get away with two if you’re careful about proportion and layout. Three or more will be a challenge.

It’s okay to go a little bit wider or narrower than 600px, but you’ll want to use 600px as your baseline. Much wider, and you’re almost certainly going to require a large chunk of your recipients to scroll horizontally. And if you go much narrower, you’re not making good use of the space available.

Corbis HTML email.

Keep HTML Emails as Simple as Possible

Simple, minimalist designs often work best. There are a few reasons for this, chief among them being that minimalist designs often have less code and image assets to break.

Focus on creating simple, clean designs that are professional and make great use of a minimal number of images. Look at ways you can simplify your code and your overall layout.

Don’t make the mistake of thinking that a single image with all of the content for your email will solve all of your coding problems. Single-image emails with little to no other content are popular targets for blacklists. So while it seems like a good idea on the surface, it could result in your emails being diverted to junk mail filters or not delivered at all.

IKEA HTML email.

Use CSS with Care

Using CSS in your HTML emails is tricky. We’ve already discussed how it won’t work for layouts, but there are other things to keep in mind when writing CSS for email rather than the web.

Use Inline CSS

First of all, your CSS properties need to be inline rather than declared in your <head> or on a separate style sheet. This is another bad web design practice we must use in HTML emails.

Don’t Use Shorthand CSS

Second, avoid using CSS shorthand because, as you might have guessed, there is varying support for this between email clients and web apps. Some email clients, for example, won’t support 3-character hex codes for color (e.g. use #FFFFFF for white, not #FFF).

Specify each font property. For example, declare font-family, font-size, font-style separately,  rather than in one font declaration.

Old Navy HTML email.

Other Common Issues

There are so many possible issues with coding HTML emails that it would be nearly impossible to discuss them all. This is why testing your emails is absolutely vital. Here are a couple of other things to watch out for.

Text Resizing

Automatic text resizing can cause all sorts of issues, especially in table-based layouts. Doubling up on size declarations can help avoid this issue (the idea being that if an email client ignores a set of properties, it will adhere to the another set).

Link Colors

Link color is another area where email clients can have a tendency to revert to the default blue. So either design your emails so that the default link color is okay, or add an extra span inside your link tags and define the color in both the parent and child element, as shown below:

<a href="link" style="color:#000000"><span style="color:#000000">link</span></a>

Bluebell HTML email.

Using HTML Email Templates

One of the easiest ways to get started with HTML email design is to adapt existing HTML email templates. Because of email delivery issues, HTML emails are, almost by definition, a bit more standardized than websites. You’re working within more constraints and inconsistencies, so building on the tried and tested work of others can be beneficial at the start of your journey.

Simply studying the templates created by professional HTML email designers can help you craft better and less error-prone HTML emails. Then, once you’re more familiar with the process of email design and the inconsistencies you have to deal with, you’ll have a much easier time designing from scratch.

CampaignMonitor’s Free HTML Email Templates

CampaignMonitor has one of the best HTML email template galleries out there. Being one of the leading email marketing web apps out there, they also happen to be highly regarded experts when it comes to HTML email design and have contributed vast amounts of information about the craft (they’ve even written a book about it).

In their HTML email template gallery, they’ve enlisted some of the top web designers out there —  including Elliot Jay Stocks, Meagan Fisher, MetaLab and Simon Collison — to design more than 100 high-quality HTML email templates that are beautiful, functional, and mostly free from glitches and inconsistencies (as much as any email template can be).

They’re definitely the best place to start if you want to adapt a template, or just to learn HTML email design best practices by studying pre-built templates.

Here are just a few HTML email templates they have to offer:

Design by 45royale.

Design by 45royale.

Design by Elliot Jay Stocks.

Design by Meagan Fisher.

Design by Meagan Fisher.

Design by MetaLab.

Design by Mike Kus.

Design by Mike Kus.

Design by Newism.

Design by Simon Collison.

Design by Veerle Pieters.

MailChimp also has a number of free email layout templates you can download. They’re just basic layout designs that you fill in with your own graphical and text elements. They’re a great place to start if you’re more interested in designing from scratch.

Some HTML Email Design Resources

Below, you’ll find a few excellent online resources for HTML email design.

Beautiful Email Newsletters (BEN)

This is a wonderful gallery of HTML email designs from some leading companies.

HTML Email Designs

This is another gallery of HTML emails. They have emails from a huge number of top companies.

HTML Email Gallery

This is another wonderful HTML email gallery that showcases a lot of really great HTML emails from companies around the world.

Rock Solid HTML Emails

This article on 24 Ways covers the more technical aspects of HTML email design.

A Designer’s Guide to HTML Email

This guide on SitePoint offers a pretty thorough, step-by-step method for crafting HTML emails.

Related Content

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

41 Comments

Sharon

June 2nd, 2011

Fantastic advice, thanks for making the solutions clear. Many of these topics (like link colors) were a mystery to me.

Sheri Harvey

June 2nd, 2011

Lots of great info here. Thanks

Nathan B

June 2nd, 2011

I love Premailer – bit.ly/premailer

Haris Tahić

June 2nd, 2011

Nice, big and creative article. I needed 15 minutes to read it carefully. Really nice, Cameron.

Sam Russell

June 2nd, 2011

Something worth mentioning is Premailer – http://premailer.dialect.ca/

It allows designers/coders to code their sites in traditional css (in the HEAD) and it will put inline styles where they should go. I don’t use it much myself, but probably a handy resource to have.

Great article – lots of wonderful designs and links. Thanks.

Young

June 2nd, 2011

Oh God, eBlasts.

Great article Cameron. I’m sure everyone hates coding HTML e-mail as much as I do… As much as every line in this article reminds me of the times I thought “GOOD GOD WHY DO I HAVE TO DO IT THIS WAY” you did a good job covering the basics. The examples you have are also very nice.

Gustavo

June 2nd, 2011

BOOOO! I would never use export HTML from Photoshop, it is the antithesis of being a WEB DESIGNER, shame on you. Although you did have some good material in here I am surprised you would ever recommend that with the exhaustive list of things you need to do to get it to work in all email clients.

#1 thing to remember, display:block on images with a tags wrapped around them.

#2 use- emailonacid.com -the most comprehensive email testing platform.

Dan

June 2nd, 2011

I so don’t agree with the beginning of this article. It is not the fact that email breaks. I’ve been doing email design for over 5 years now and, I must say, there were issues but nothing that couldn’t be fixed.
But if you use PS to generate your code this is how it will end up – email will definitely break.
Same with padding – if you know how to use it you would never bump into any unexpected issues
Alt tags are not vital. They are on example you shown but it falls under “bad practice” email – no-one should ever do image based email.
Great examples… :)

Noel

June 2nd, 2011

Fantastic article Cameron, a great help. I try and avoid using CSS at all when designing HTML Emails. Is this the correct way to go in your opinion?

AbuBakar

June 2nd, 2011

not very long but complete post on the topic. I have been doing web design for a year but never happened to design an email. I learned a lot from your post. thanks

David

June 2nd, 2011

Nice collection of resources. Thanks.

Shane

June 2nd, 2011

Nice overview. I especially appreciate the tip about ‘single image emails’. If i ever get these, they go straight to my junk folder. Still i’ve made the mistake of sending out a few of these. Can’t help but wonder if feedback would have been better had I taken bit more time to craft them.

Jason Beaird

June 2nd, 2011

This is a terrific summary with some great examples. I just gave a talk last week that covered many of the same points. The slides are somewhat useless without my talk notes, but there are several more design examples in it with links to each email’s web archive if anyone is interested.
http://www.slideshare.net/jasongraphix/email-jitsu

John

June 2nd, 2011

Great article! I have been doing HTML design work for clients for the past 10 yrs and there are so many trick that one needs to know in order for it to render correctly in all the most popular email clients. I found a service about a year ago that really helps, http://www.emailonacid.com. When you run a test they tell you exactly what HTML/CSS is not supported in each email client. Its saved me a ton of time, well worth the price. Anyway I hope my $.02 helps and again great tip in this article.

Andrew Margolin

June 2nd, 2011

Not to mention that if you are using something like constant contact and you are sending emails and you have readers on certain versions of outlook express, it is best to slice your tables in a horizontal fashion because it does not recognize the photoshop slicing of table colspan’s.

Nice Article none the less! :) Cheers!

brett melton

June 2nd, 2011

I always thought this would be a cool thing to do for an emailing system. I usually use PHP to help with my emails but I mainly use XHTML to display my emails. Nice Tips and Images.

Brett

Ralph

June 3rd, 2011

Great article, Cameron!

I think if someone is looking for a niche then creating rock-solid HTML emails will be a great choice. As the article outlines creating them can be quite a pain in the ass, but most likely you won’t have much competitors in your area just because of that :)

Pritesh Gupta

June 3rd, 2011

Nice tutorial, yes you are right.
One needs to be careful when it comes to HTML Emails. Different Email Programs read HTML Emails differently. Like, Gmail only supports inline CSS, etc. Tools like emailonacid.com help in testing our HTML Emails a lot.

Charles

June 3rd, 2011

Hi,

Thanks for your article. Maybe more useful than a simple table .
I have never send an html template as an email. So as a beginner I have a stupid question… ( sorry for that )

How can I send an html template as an email ?

I try to paste an html template code from campaign monitor in my email client, Gmail, but what I receive is just the code.
But maybe it’s impossible in Gmail ?

Thanks

Todd Dumas

June 3rd, 2011

We do a number of monthly e-newsletters for our clients, each is a pain, each is tedious, and each breaks. You are article was spot on regarding best practices. I have seen some other firms use inline CSS for layout, but multi-column structures with divs won’t hold. Anyway, nice work summarizing.

Qairy

June 3rd, 2011

thanks..nice article..:)

Stephen Hill

June 3rd, 2011

As others have quite rightly said, any self respecting email designer will never use the slice & dice tool in Photoshop / Fireworks.

Not only does it massively increase the amount of images to text in your email (and therefore give your email a higher chance of not even reaching the inbox), but the code such pieces of software spits out is terrible i.e. they won’t be shy with the use of rowspans, something which are known to have trouble in Outlook 2007 / 2010.

Although I could go on and on with do’s and don’ts – there simply isn’t enough time in the day, that is the problem email designers face each and every day. I always say to our clients that designing an email isn’t about getting it pixel-perfect (that’s a pipe dream), more trying to limit the amount of problems across the massive range of email clients out there.

I speak as a Desginer that has been designing / building emails as my day job for over 5 years now.

Martin Marusa

June 3rd, 2011

Nice article summarizing all the basics.
But I really don’t think that every mail must break. If you follow some rules and do a lot of testing but it can be achieved.

Firas Alikaj

June 4th, 2011

nice article Cameron, and very helpful thanks.

Phil Barnhart

June 5th, 2011

You should also test your designs when images are blocked. Careful not to use long alt text or image names. A large percentage of your audience may have images blocked by preference and your layout should make sense and look attractive even under those conditions.

Ila

June 6th, 2011

Well, great post. Thanks

Rob Davis

June 6th, 2011

I know many are focused on the PS / tables part of the article. I would say, overall, this is a great collection of the basics of creating distributed email. Well done. Thanks.

Alex Ferguson

June 6th, 2011

Really enjoyed this post as I’m getting more into sending out and understanding newsletters.

One thing you missed mentioning anything about was video. Have any thoughts or perspective on best practices?

Justine Jordan

June 6th, 2011

Great summary of some of the tips and tricks for coding email. I agree that using Photoshop to generate your HTML will cause more problems than it’s worth. Stick to hand-coding your HTML using something like Coda or TextMate. Avoid Dreamweaver. Also, realize that your design will probably display slightly different on every mail client. Use something like Litmus (www.litmus.com) to preview your emails.

Bratu Sebastian

June 7th, 2011

Great post, I remember when I sent my first html email to myself to test first, it was a mess :)

Chris

June 8th, 2011

Great article and great collection! I really enjoyed this post.

Josh

June 8th, 2011

Great overview, but honestly i’m just going to stick with Campaign Monitor. Either way you cut it, it just doesn’t seem worth it to put that much effort into making an email look as good as a webpage.

Optimise Web

June 10th, 2011

DO NOT use the HTML output of Photoshop. You will spend longer debugging than writing a table based layout from scratch. No offence Cameron, but no wonder your emails break!

I create emails for retailers so us very image intensive layouts. After lots of experiments I have deduced promoting products using formatted text and images is very difficult. To produce visually appealling product promotions we use text in images. For large blocks of text we use text with inline CSS being careful to style every P tag explicitly.

steve

June 10th, 2011

The slice and dice methods are not automatically Federal Section 508 compliant for Americans with Disabilities. Tables are meant for data . . . not layout. So . . . if you want to use tables for layout you need to understand their impact on assistive technologies.

Tim

June 10th, 2011

Nice, really like the design from Meagan Fisher.

Maybe i´ve got some good add-on on this list. A basic structure for your html emails:
http://htmlemailboilerplate.com/

Rajesh Namase

June 15th, 2011

Nice article summarizing all the basics. It is very helpful.

Kit

June 20th, 2011

Steve, In general, I would agree with you. But now, here is the thing, how else would you want it to be done? We are looking at very outdated HTML rendering in some cases. I don’t think anyone really ever sat down and thought that tables were intended for layout in early web design. It was more of a “cheating” way to get something that there wasn’t support for yet; print style page element layouts. I’d love to be able to make standards compliant email that looked great too, but right now the technology isn’t totally there yet, unfortunately. I wish it was, both for usability/accessibility concerns and for the sheer sake of not having to write nested tables.

Jordan

June 23rd, 2011

Thanks for featuring HTML Email Designs! :)

Pallavi Mangal

June 27th, 2011

Thank you so much
great article..
Valuable information…

Vitek

August 19th, 2011

It’s for me.
Thanks and regards,
Vitek.

Soletraveller

November 28th, 2011

After you designed your email using Cameron Chapman’s great advice. You can follow through to the next step.

Upload it to your server. Go view your webpage (type in your url) on the safari browser. In safari go to “file” then go to “Mail Contents of this Page” and an email will be created with your webpage exactly how you designed it. Repeat this procedure as needed.

Leave a Comment

Subscribe to the comments on this article.