You know, we use ad-blockers as well. We gotta keep those servers running though.
Did you know that we publish useful books and run
friendly conferences — crafted for pros like
yourself? E.g. our upcoming SmashingConf Barcelona,
dedicated to smart front-end techniques and design patterns.

“We really love this new website you’ve built! Now we’d like to send out an email to all of our customers, friends and anyone, and it should look exactly like the website except with a spinning mailbox at the bottom, and have my photo, and my cat’s photo…” Ever had that conversation with a client?

You’ve built plenty of websites in your time and could knock off a blog template in your sleep, but HTML email? Seriously? HTML email has the reputation (often well deserved) of being a horrible design medium.

The mere mention of it sends some designers into physical shock (try it if you ever get stuck in a tedious conversation about XHTML vs. HTML 5). The truth remains that businesses and individuals the world over send and receive email in HTML format by default every day, and many of them genuinely prefer it to plain text.

So designers have a choice. We can stick our fingers in our ears, cover our eyes and hope it all goes away or we can learn to make the best of a challenging design medium and produce something that raises the quality level a bit.

This article gives you the information you need to plan, design and build HTML newsletters 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 email inbox is a noisy busy place for a newsletter to land. Hundreds of other emails are already on the pile, with folders, calendars and notes on all sides. The typical user is probably not waiting with bated breath for your email to arrive.

So when your email does arrive, make sure it doesn’t waste their time. Get to the point quickly, instead of burying the value under a mountain of greetings and headers and hilarious photos. Figure out why someone would want your email, and then tell them what that is right away.

One excellent example of getting to the point is the recent Haystack announcement. No need to guess what Haystack is for when you read the top of this email:

When you are excited about something, you want to tell everyone. Clients often assume that everyone they have ever met, and many they have not, would love nothing more than to receive their latest news. Of course, this is not the case, and laws are in place to back them up.

If you are using an external email service, it will have its own policies on what permission you need in order to email people. Know which policies apply to you and your clients before you send. Explicit permission is best: ask people directly if they would like to receive emails about your topic. If you can show an example of what they’ll get and let them know how often they’ll get it, all the better.

People might forget actually asking to receive your email, particularly if they don’t send emails very often or signed up as a result of entering a competition. A short message at the top of your email will help people remember and make them more likely to read on. Here’s an example of a well-executed permission reminder:

In this case, the recipient gets an explicit reminder of the time and the place they gave their permission. Following up soon after the sign-up also ensures that the recipient doesn’t forget.

In 2006, Return Path conducted a survey that showed that “knowing and trusting the sender” was the biggest factor in whether recipients opened an email, so avoiding complaints of spam isn’t good enough.

Even if you have met your legal obligations and have the explicit permission of your recipients, they don’t necessarily want to read your emails. Have you ever agreed to receive “special discounts” on an item, only to be bombarded by endless advertisements for different items from the same company? Sending valuable, relevant information to your subscribers is vital. You might not want to send information to everyone on your list just because you can. Consider carefully whether the information is useful to them and what they expect from you.

Approach newsletter design as you would a website. Know why you’re sending the email and what result you want to achieve. We’ll cover this in more detail in the planning section below. The email below makes it very obvious what action its authors would like their subscribers to take:

Sit down with your client or boss and ask them plainly, “What is the one thing you want people to do when they get this email?” You might have to force them to pick only one to begin with! Designing to meet 10 different goals is hard, but you can design to support just 1 or 2. As we’ll discuss later, you can measure whether you’ve reached your goal in plenty of ways.

We’re all tempted to hide the dull disclaimers and terms and conditions in Tiny Gray Font Land at the bottom of the page, but putting the “Unsubscribe” link there is a bad idea. There’s no point in emailing people who are not interested in your content any more. If your content is no longer relevant to them, let them unsubscribe easily. Making it hard will likely only lead to complaints of spam and leave people with a bad impression of your company.

Much better to make it clear and prominent; that way, if they decide in future that they would like to receive the information you’re offering, they will be confident in signing up.

It doesn’t have to be boring either. One of my favorites is, “You can unsubscribe instantly, but if you do we may scream, cry and then call you at 2:00 am begging you to come back. It’s your choice.” Not appropriate for every client, but you can have fun with more casual emails.

Instead of a handful of browsers, we find more than a dozen major email clients, with HTML and CSS rendering ranging from great9 to appalling. So, to get decent results across a lot of clients, we’re back to using structural tables. Joy! Read on for tips and tricks to make coding the HTML and CSS in your design a not entirely frustrating experience.

Some email clients strip CSS out of the head but leave style blocks in the body (as invalid as this is). Gmail goes further and strips out all CSS from the head and body but leaves inline styling.

So, once you’ve completed your design, you will need to go through and add inline styles to your elements. Some email services help you with this; or you could use Premailer. You can also use some nifty tools for CSS inline styling, such as The Automatic CSS Inliner Tool or Inline Styler11 — the latter converts CSS rules into inline style attributes.

Some people just don’t like HTML in their emails. They might be using older systems, or their system is locked down and they just can’t view HTML. Provide a plain text alternative to every email, so that the reader’s own email server or program can choose which version to display.

Again, your email service probably provides that capability. Plain text can be hard to read, so spend some time making it scannable and useful. Here is a recent example from Mark Hurst at Good Experience:

If you have used Outlook or Gmail, you’ve seen that “Images in this email are not displayed” message many times. In many of the major email clients, your images will not be shown by default. Readers have to click a link or button to download and display them. Here is a recent email we saw. On the left is the intended design (well, the top half of it), and on the right is how it appears in Gmail by default. Not exactly clear!

You may be able to work around this with some types of embedded images, but they have their own issues, too. No matter how perfect your images are, they may have no impact, or even a negative impact, on the success of your email.

If your client insists on a pixel-perfect design, an all-image email may seem like a good option. But if images are not shown to the user, and they see no text, all they’ll get is a big fat annoying blank message. Always ensure that your email has HTML text as well as plain text. Many people might not realize they can choose to show images, and some just won’t bother. So you can’t assume that people will actually see your images at all. For a full rundown on what the default settings of each email client are, check out current conditions in image blocking.

How do you work around this? Here are a few ideas:

Avoid images for important content such as headlines, links and calls to action.

Add a prominent text-based link to a Web version of your newsletter.

Get recipients to add you to their address book or whitelist.

Use the alt attribute for all images to give Gmail users a better experience.

Review any relevant commercial email regulations for your country. The best known of course are the US CAN-SPAM laws, but there are many others. For a great starting point, visit Email Marketing Reports.

You might need to include a physical building address in your email or include something like “[advertisement]” in your subject line. Many email marketing tools help you build templates with these required elements, to ensure your client does not send out emails without them.

Even though you may not be at risk for the largest CAN-SPAM fine ever12, you could easily get into trouble with your email service if recipients complain and you have not adhered to the law. Legitimate providers have little tolerance for people who send emails that don’t meet legal requirements and could close your account or blacklist your server.

10. Test Everything Before Sending, Because You Can’t Take It Back Link

While reviewing current email client standards is a great start, nothing beats actually testing a newsletter in as many clients as possible. Several services help with design and spam testing, and the service you use may already have this built in. Make sure every link is working and that any personalization appears as expected. We always spot problems two seconds after hitting “Send,” so send some test emails to people who can give you feedback, and save yourself the despair of sender’s regret.

Though harder to find than general advice on Web design, plenty of help is available online for building a successful newsletter. Over at the excellent 24 Ways13, Dave Greiner has a great list of technical tips and tricks that is worth reading in full (the comments, too). Here are a few of the best tips:

Use tables for structure, instead of CSS.

Nested tables are more reliable than padding and margins.

Avoid CSS shorthand. (Use full definitions.)

Don’t use PNG images because Lotus Notes 6 and 7 do not show them.

Explicitly set a margin for every paragraph, because the defaults vary a lot.

Read the “Rock Solid HTML Emails14” article for all of the tips and follow-up comments. Your next step should be to bookmark the following links and save a bunch of time (and maybe your hairline, too).

We’ve covered some of the big design and technical factors that make HTML email a unique challenge, and this might be all you need.

Designing is not about lumping together HTML, CSS and a few images, though. It’s about solving problems, and email newsletters require planning, just like websites. Building an email is technically tricky but not impossible.

Building a newsletter that actually achieves its purpose is a different thing entirely. Your client (or boss) is paying you not so much to “design” as to help them sell more products, get more donations or win back clients.

If you don’t understand what an email is for, you won’t be able to give it the best design, unless it’s by accident. Here are a few questions to ask your client before putting mouse to pixel.

Who are you sending these emails to?

What is your main reason for sending these emails? (To drive sales? Build a relationship with subscribers? Start conversations?)

What type of emails are you planning to send?

What type of content do you want to send?

How often do you want to send emails?

Would you like to match the emails to an existing visual design?

Do you have examples of other emails that you like?

With answers in hand, you can set some measurable goals. One measurable goal might be to “Get 10% of subscribers to click through to the sales page,” or “Get the email forwarded to at least 100 new people this month.”

Keeping these goals at the front of your mind as you layout the newsletter changes the way you design. Suddenly you have something to help prioritize the content and a standard for deciding what stays in and what’s left out.

The work really begins once you actually send the email and can start measuring results against previous efforts.

Once you’ve set one or more goals, you’ll need to set up tools and processes to determine whether those goals have been met.

These might include sales figures from a particular department, reports from your email service provider or analytics from the website. If you use a specialized email sending service (such as Campaign Monitor, which is the one I use), you’ll get plenty of information in your reports.

Some common metrics:

Open rates = How many of those who received your email actually read it.

Click rates = How many of those who opened the email clicked a link.

Forwards = If your software has a “Send to friend” function, you can see how many people used it.

Unsubscribes = How many people have unsubscribed from your newsletter.

Conversion rate = How many of those who clicked through to your website went on to buy your product, download a trial or perform some other trackable action. Software such as Google Analytics can be used to record such actions and connect them to their source, including if it was your email campaign.

Statistics from one campaign are hard to interpret. For example, what is a good click-through rate for your particular audience? That’s very hard to know. When you send your next newsletter out to that same audience, you’ll have something to compare it to, and you’ll know whether you’re getting better.

You can use those statistics and metrics to persuade your client to listen to your proposals. If a picture is worth a thousand words, then a graph showing a solid climb in click-through rates is worth at least 3,000 words and a cup of coffee.

Make a change, test the result, make another change and then test again. If your software supports A/B testing, then you can easily compare two subject lines or pieces of content in a single campaign and save yourself a lot of time.

Once you have the newsletter down, you may be interested in learning more about how email marketing works. Adding email marketing as a service to your own Web design business or freelancing skill set could really pay off. Convincing clients to pay a fair rate for design can be tough, but email marketing is much more easily measurable. If you can show your client that they are making x amount of money from each email, charging them accordingly isn’t so hard.

Here are some of my favorite email marketing websites to get you started:

Here are just a few top-class HTML email designs, selected from the Campaign Monitor customer gallery and other sources. Use these to spark your own ideas; but remember, they belong to the original designers and clients and so are not for copying. Click each image to view the gallery entry and full email. Please notice that some of the designs featured below were selected not by the authors of this article, but by the Smashing Editorial team.

The next time your client asks you to design an email newsletter, you’ll have all the tools required to do a great job. Even if you don’t personally like HTML email, you’ll be in a position to give every one of their subscribers a helpful and readable newsletter.

Either we step up and get it done or the marketing team, armed with a CD of 10,000 clip-art images, will do the job for us… and we all know how that ends up. If you have any questions or comments, leave a comment below; I’ll address as many as I can.

Mathew Patterson looks after all the customers at Campaign Monitor, the popular email newsletter web application for web designers, and is currently writing a book on HTML emails. He also speaks at web conferences on related topics.

Mike

With regards to point 8, so many of those “inspirational” designs would fail.

An interesting thing to note is that Outlook 2007 cannot use (to the best of my knowledge) background images on anything but the main containing element (usually the body tag). Oh, and woe be unto those who need to make sure their EDM works in Lotus Notes, quite possibly the most evil e-mail environment on this planet.

Nadja von Massow

I completely agree, Mike. These examples are visually appealing and interesting, but being a frequent reviewer of email campaign creatives myself, 80% of these examples would fail on several fronts.

Having said that, they are showing that web designers ARE INDEED injecting creative juices into email campaign development and are showing that html restrictions don’t mean boring creatives. Thanks for a great write-up!

Jeff Ente

Mike nailed it. It would be very interesting to see what many of these beautiful emails would look like with images suppressed. I’m guessing that many of them would not look enticing enough.

My own experience has been that approx 33% of my clicks come from people who never display images (it sort of makes sense and even I try to read emails without displaying images). You have to remember those people.

Matthew Lux

This is true, you cannot use background images in Outlook 2007. Huge downfall of microsoft. Killed me when we had to redo all the templates we made in 2006 with background images and trying to explain to clients why will need to change how the template looked and that it wouldnt look as “cool”. It does however make template very basic and easy to create.

0

6

Steve

Very nice article with a lot of helpful tipps, but if you want to get CSS-Support by Thunderbird, Gmail & Co. you need to know which application supports which CSS-Element, therefore I always watch at the Email Standards Project!

Mathew Patterson

I wrote this article and I’m happy to answer any follow up questions. I will address the main concern raised so far, about some of the examples relying too much on images – I agree!

Quite a few of the examples in this final article (the ones that are almost all images) were actually added by the Smashing Magazine editorial team, and were not in my submitted article. They are visually very appealing, and that can be great for inspiration, but you would not want to implement them exactly as shown.

John Faulds

That’s pretty poor form if you ask me. You’re the expert and SM should avoid making editorial decisions that impact on the credibility of your article. That’s like an art curator putting on an exhibition of surrealist paintings and throwing in a few of their pre-schooler’s finger paintings because they think they’re cool. :/

Andrew Armitage

Huff

As a professional e-mail designer, I must add the following advice: Consult an expert. I’ve seen numerous beautiful e-mail campaigns going terribly wrong because the sender was to stubborn to spend five minutes of listening to advice.

Mike is right about Outlook 2007, but there are numerous workarounds that could help there. Not all of them would look as good in the inbox as they do on the page, but with a clever usage of body backgrounds, tables, background colors and transparent gifs most would be okay.

John

Paul

If you think Notes is bad, try using Groupwise! You’ll be yearning for Lotus within minutes.

For me, when I receive an email that shows up as missing images in gmail, I just delete it without reading it. I’m actually much more likely to read a plain text email as it doesn’t tend to jump out immediately as a sales pitch.

0

19

Mike

I’ve done a few email newsletters now, but starting out can be a real frustrating task. I use Campaign Monitor and it is awesome and has a lot of good resources to help you get your emails looking good in all email clients.

Thomas McGee

Thanks for the info, this is very useful as I design E-mail campaigns pretty frequently. Something that has made them much more effective over time (from the marketing end of things) is having them much more targeted. It’s nice to tell your clients from time to time what is going on with your company, but the problem is (unless you have a huge following with dedicated fans) the majority of folks don’t care. This is a great reason to offer your clients a special, or something that they have to take action on, strait from the E-mail.

Mike

Having done lots of html emails, I have to say that inline css doesn’t always work. If you’re using sub-par email messaging vendors, you’ll have to stick with real old school tags a la “font type” lameness. Just a heads up =)

2

33

hollsk

This is absolutely true – I used to think “oh, I can get away with but really in all clients you just can’t. We tend to use both inline styles *and* font tags for the most consistent rendering across clients. My bread and butter these days is mainly creating email campaigns for B2C and B2B clients so after a while you do get used to the various pitfalls and horrors that they can throw at you.

Things are even worse for devs these days because people read emails with images on them in their iPhones :-)

Anthony

lolo

I dont understand how the examples have images in the them and can still be consider a great email that follows the rules above. Am I missing something. I can see the image is considered one backround images to does that mean email can diplay backround images… Im probably just missing something i skipped over reading.

0

38

Dan

We’ve designed a number of e-mail marketing campaigns and use Email on Acid to test how the delivery will look across the different e-mail platforms. The tool is tremendous…and quite honestly should be used by more interactive companies. I can’t tell you how many advertising e-mails I get from big name brands that have broken images or gaps in the design. Email on Acid would help to cure that.

Ralynn

I’d have to agree with Mike and most of the comments regarding bg support in Outlook. I’ve pretty much given up on bg imgs due to shotty support.

In the Tips&Tricks above it was urged to “Explicitly set a margin for every paragraph…”. I’d like to point out, however, that it is important that we do not rely on set margins, as they generally collapse in various clients [namely gmail and Outlook ’07].

Spacer imgs or blank table cells with fixed widths work well in lieu of inline css margins. Inelegant? Possibly. But undoubtedly efficient and light-weight. This problem occurs also in setting tr or td height. Defining line-height seems to work well in this instance.

Side note: We test our email newsletters using Litmus Test Tool [ http://litmusapp.com/ ]. It’s a great test tool, if you don’t mind the occasional glitch in rendering.

Mathew Patterson

Glen

Woah, this is awesome. There’s never anything half decent on the construction of html emails. I’m so glad someone took the time to give us such incredible info on something every designer loathes and wishes could be done better.

0

56

Ben

Jeff Barson

The comment about testing your email is absolutely true, you can’t take back an email.
However, we’re using a new service from a company called Sendside (sendside.net) that send’s actuall URLs instead of HTML emails. The result? You can make a change to the URL that you control and it updates every communication in real time. (You can also recall these messages.) It’s worked fantastically well and I know that universities (Stanford and UCLA) are using it to send with.

1

58

Simeon Stoichev

Here you can find a good collection of free newsletter templates : http://freemailtemplates.com/ . There is a .psd source in the archive so you can make changes on the design. I tried one of the templates. It was a good foundation for my newsletter.

Hutch

Dan

Is text version really so important? As far as I’m concerned it was important 5 years ago and now it’s different. It is enough if a newsletter isn’t image heavy and every text area is proper text. Very few people read text version
On general great article with awesome examples

Natasha

One other thing to note, is that some computers will strip out all CSS, whether its in the head or the body of the email, so it’s always wise to put some deprecated styles into the html as well as inline CSS just in case.

David

Cas Johnson

Great article, Matthew. I agree that it was mucked up at the end by showing a lot of examples that wouldn’t pass muster on the “image to text ratio” and “background images” tests, but it’s nice to see people pushing the envelope with their designs. Hopefully someday soon the Email Standards Project helps bring us to a point where we won’t be bemoaning the lack of support for background images and other email client-specific anomalies. *crossing my fingers*

We’ve been using Campaign Monitor for a couple of years now and have nothing but praise for the service – our clients LOVE the graphical reports more than anything else.

If I can go off the rails here for a sec, we’ve got some award-winning designs we sent via Campaign Monitor – http://connectbyemail.com/designs/ – with which we’ve successfully followed ‘almost’ all of your suggestions given in your article to make them user and email-client friendly.

Thanks again for some great advice!

0

80

Rob S.

Mostly unrelated comment, though perhaps relevant from a design perspective…

This is the third time I clicked through to this article (it keeps showing up in my Twitter feed), but the first time I scrolled down and realized there was free information. The previous two times I saw the ad for the Smashing design book, and I thought that was the entire post: Design and Build E-mail Newsletters… $29.90 US.

It was only when I saw a particularly trusted source link to the article in a Tweet that I knew it must be more than a link to a $30 book.

Dean L

bari

I have found in past experiences most viewers don’t want to leave their information for a newsletter – because of these reasons:
1. Can’t be bothered with receiving so many e-mails
2. Viewers value their privacy

I have had constant contact for over five years and found in the end – if viewers will contact you if they really want to.
But – great article

0

84

Cemil ÇELİK

Gerardo

I tested one of the mail sender suggested, but the mail sent from them are totally spammed (by Mail, by Gmail and so on…).
On my experience only plain text mail arrive to clients.
Better if there are less than 10 lines of text.

afrej bouchaib

Linda Lee

Excellent overview of the process.
This is another area where I find my clients struggling.
Newsletters are not such a great draw anymore.
I suggest offering a tip sheet or a free video tip or even a free download vs. having to do a newsletter. People feel so overwhelmed with email as it is.
Great article.

BYJ

Scott Koegler

I was browsing your web site to find your newsletter, but for some reason, have not found the signup link.

If you do have a newsletter, I would be interested in reviewing it and offering suggestions for improving it. If you don’t already produce a newsletter, I would be happy to discuss assisting you with creating and managing a successful newsletter.

Please review my free information at YourCompanyNewsletter.com. You can read my articles, and I encourage you to request my free e-book “7 Principles for a Successful Newsletter.”

Van Fan

Jennyfer Clark

kat

Great looking stuff — though as several other commenters mentioned too, I couldn’t help but wonder how useable these designs are when images aren’t displayed.

What’s really impressive is great looking emarketing in the B2B world. It’s a lot harder to command attention when promoting important, but less exciting products and services like software or insurance.

I can see SVA, Armitage and Wolda looking nice sans images. For a future post, it would be great to see samples shown with and without images side-by-side.

0

96

mirkira

Deirdre

Regarding point 5 I completely agree from personal and client experience, people hate nothing more than getting emails with no clear reason for why their getting it or how they can unsubscribe. This article makes it so easy to understand, well done but as other commenters mentioned too, I can’t help but wonder how useable these designs are when images aren’t displayed.

Ken Sado

Everyone here is working too hard. I regularly use a service called eSimply.com. Using eSimply.com, I can launch an entire email broadcast in under one minute. eSimply.com allows me to email broadcast directly from my high resolution PDF files and the page(s) display perfectly in my clients native email programs. I do not waste time messing with html, inline css, and all the problems that everyone else has. If even output a text version and converts the annotation layers to hyperlinks. My email delivery rate has never been higher. I highly recommend using them.

Ken
Louisville, KY

-2

101

Jasmin C.

Vishal

Matt,
This is good stuff. You cover all the bases here. The template examples are also great. But if you cannot afford a great design like this, you can use http://www.mygroupid.com . it magically transforms regular email into beautiful newsletter style email Just send an email to magic@mygroupid.com and experience the magic.
But it is not for everyone. If you can afford a graphic designer or have enough time to spare on editing email templates yourself, you may want to skip MyGroupId.

0

103

Allyson Steffey

Such a great post.
Email design is most important part for any email marketing campaign. And for that you should have proper knowledge of designing because without it you wouldn’t create attractive design. I have just seen the article about email design best practices on Emailmonks.com. They have covered each and every little things which are needed for Email or Newsletter. .http://www.emailmonks.com/design/email-newsletter-designs.html – where you can find email design best practices article.

0

104

Tee

Hello, I’ve done some research on email newsletter builders like TinyLetter, FeedBlitz, FlashIssue and many more but I cant quite find what I need. I am sending out a tri-monthly email newsletter to a community group. I am needing to upload word and pdf files, pictures and also videos from time to time. There is not a website or blog for the group yet, just a newsletter. My problem is that it takes so long to create a newsletter from scratch so a app would be great. But what app is best for my needs considering the elements that I have and dont have? Please give me some direction, thanks.

0

105

DL

I really like #2 of the reminder of when the interaction occurred and/or when permission was given. Brilliant.

We have started looking for ways to make our newsletters more interactive. Animated GIFs is definitely a fun way! We’re also experimenting with Lucidpress for newsletters with interactions, videos, etc. and so far the results are promising. (Here’s a quick guide on getting started with their digital or print newsletters: How to Make a Newsletter). What’s not there yet is deep analytics and we’re a data-driven company, so hopefully that comes along as well.

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

Please provide us with your email address:

As designing static pages has become untenable, many have started to approach design in a modular way.
In this book, we’ll identify what makes an effective design system that empowers teams to
create great digital products.
Pre-order the book now →

Today, too many websites are still inaccessible. In our new book
Inclusive Design Patterns, we explore how to craft
flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages.
Get the book →

Meet the new Sketch Handbook, our brand
new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with
practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work.
Get the book.

Trends don’t matter, but techniques do.
With SmashingConf Barcelona, we’ll explore problems,
smart solutions and lessons learned from actual projects.
Taking place on October 17–18 at the Palau de la Música Catalana.
To the tickets →