Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. 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. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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


“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 an HTML newsletter 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.

  1. Respect your reader. Don’t waste their time or attention.
  2. Ask nicely first.
  3. Focus on relevance.
  4. Design with a goal in mind, so that you’ll know if it worked.
  5. Make unsubscribing easy.
  6. Code like it’s 1999 (literally) and use inline CSS.
  7. Always include a plain text version.
  8. Don’t assume that images will be viewed.
  9. Follow the law.
  10. Test everything before sending, because you can’t take it back.

1. Respect Your Reader. Don’t Waste Their Time or Attention. Link

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:

Haystack announcement1

2. Ask Nicely First Link

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:

A clear reminder of how people signed up at a tradeshow booth

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.

3. Focus on Relevance Link

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.

ISPs and email providers now consider relevance in their definition of spam2, giving you even more incentive to focus on relevance.

4. Design With a Goal in Mind, So That You’ll Know If It Worked Link

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:

Amy Ruppel illustration3

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.

5. Make Unsubscribing Easy Link

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.

A clear unsubscribe link

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.

6. Code Like It’s 1999 (Literally) and Use Inline CSS Link

While most of us have put down our tools of trade from the browser wars, the fight goes on in the jungles of the email client, like those soldiers who don’t find out about the peace treaty until decades later4.

Instead of a handful of browsers, we find more than a dozen major email clients, with HTML and CSS rendering ranging from great5 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 Styler7 — the latter converts CSS rules into inline style attributes.

7. Always Include a Plain Text Version Link

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:

Plain text well formatted

8. Don’t Assume That Images Will Be Viewed Link

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!

Call of Duty email with images on, and off

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 blocking8.

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.
  • Specify height and width for images to ensure that the blank placeholders don’t throw your design off.
  • Test your design with images turned off before sending.

9. Follow the Law Link

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 Reports9.

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 ever10, 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.

Tips, Tricks And Resources To Build Your Email Link

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 Ways11, 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 Emails12” 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).

HTML email templates and design galleries:

Campaign Monitor’s research on HTML rendering in email clients:

Testing tools:

When you’re sick of dealing with problems…

  • Email Standards Project
  • The Fix Outlook campaign

Everything else…

  • 42 HTML Email Design Resources25
    A summary of the best HTML email design resources, covering overviews, guidelines, standards, templates, checklists, design tools, galleries and more.

Planning for Email Newsletters Link

Planning for email newslettersWe’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.

Measuring the Success of Your Newsletter Link

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.

Learn More About Email Marketing Link

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:

Instant Inspiration For Your Email Campaigns Link

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.




























Get Out There And Do It Link

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.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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.

  1. 1

    Alex Carvalho

    January 19, 2010 7:53 am

    I would love to see a tutorial with step by step, made with the best procedures, nothing complicated… from design to coding. Great, great post!! Thank you again!

  2. 2

    Very useful! We were just looking for this for our client.
    Great examples!

  3. 3

    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.

    • 4

      Nadja von Massow

      January 19, 2010 5:54 am

      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!

      • 5

        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.

    • 6

      While all very true, if the designer codes with proper degradation, you can produce almost anything creatively and fallback on degradation. Though the Outlook background issue is a pain.

    • 7

      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.

  4. 8

    Wow! Nice tips. Thanks a lot Patterson!

  5. 9

    Nice to have the email newsletter I did for Armitage Online included -Thanks. Great set of tips and resources.

  6. 11

    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.

  7. 12

    Rajat Bhadani

    January 19, 2010 5:23 am

    I recently have a few of our clients asking us to design html newsletters and so this will be very helpful

  8. 13

    This is really useful resource of html emails :

  9. 14

    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!

  10. 15

    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.

  11. 16

    That’s like smashing Article. I was waiting for a long time to read such content on Content king web site. [that’s SM]..
    Thanks a lot

  12. 17

    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.

  13. 18

    Rafael 'bsides'

    January 19, 2010 6:22 am

    Very good article. Been looking for it for ages. Email Marketing is really a pain to get it working for a not-so-super result overall.

  14. 19
  15. 20

    It’s nice to see something on Email here… I’ve been doing it for a few years now but there’s a lack of new material to read on the subject. I suppose because the landscape hasn’t changed much.

  16. 21

    Very funny because I just spent a lot of hours designing our newsletter.

    First, beautiful css and html.
    Then, tested it on Gmail and Outlook 2007 and lost all hope on humanity.

    I laughed at your #6 because I did write on my Skype status: “code the web like it’s 1999” :)

    My advice is : table, in-line style, deprecated tags and good luck …

  17. 22

    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.

    Again though, great article!

  18. 23

    Waouw !
    Amazing post ! Great thanks smashing !

  19. 24

    Thank you for this! It’s a terrific roundup of all the angles that must be considered before launching an email campaign – I’m bookmarking this one for future reference. :-)

  20. 25

    This post is absolutely amazing. You’ve managed to cover a lot of issues. I’ll definitely use your advices. Thanks a lot!

  21. 26

    Great post; the sample emails were extremely helpful.

  22. 27

    Great article, nice to see some information in regards to buidling emails.

    Its good to emphasise the importance of inline styling, it is easy to forget that even styles within the head tag will not be read by Gmail.

    Thanks Smashing Mag

  23. 28

    Nice write up.

    I have been doing email campaigns for few years at work. The testing part is most important of all. Test alot test often, It can’t be redone when sent.


  24. 29

    The showcase is great, but I fear that many of these designs don’t respect rule #8 – Don’t Assume That Images Will Be Viewed.

    They’re more like graphic posters than HTML newsletters… though they do look sharp!

  25. 30

    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 =)

    • 31

      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 :-)

  26. 32

    Nice article, but then ruined by using a load of examples that are completely useless with the images turned off.

    Sticking to examples that actually follow the guidelines would be more helpful!

  27. 33

    Felipe Theossi

    January 19, 2010 8:15 am

    Very nice article, thanks…8)

  28. 34

    “While most of us have put down our tools of trade from the browser wars” what?! Since when?!! Haha

  29. 35

    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.

  30. 36

    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.

  31. 37

    We just finished on our Champagne’s projet with Plus-de-bulles.

    Here is the work we’ve done for this customer :

    We made our design 100% flexible for various text lenght on first block. We are currently finishing the same work for the order process.

  32. 38

    There is also another great resource that is available to everyone on Emailing clients:

  33. 39

    Thanks – that what I was looking forward to read about. In one post! :)

  34. 40

    very nice article, 10q

  35. 41

    Nice article. I would love to see a side by side comparison of those beautiful email with the images turned off.

    Its always amazes me how different every email app treats code. Here is a helpful list of CSS styles that are safe to use,

  36. 42

    Renato Bonadio

    January 19, 2010 10:35 am

    “””Great””” post! Tks Mathew!

  37. 43

    Mathew Patterson

    January 19, 2010 10:41 am


    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.

    The galleries I listed, especially , focus on emails which do follow the guidelines, so check there for more consistent designs.

    I really appreciate all your feedback and comments, thanks for reading!

    • 44

      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. :/

  38. 45

    Great article. I’ve been developing HTML email newsletters for about a year now, but always finding areas that need improvement or fine-tuning. This article is a great resource!

  39. 46

    Yay! What an article. After lots of frustrating hours of building Outlook2007-ready newsletters it’s a pleasure to read your article. It’s great, I like it!

  40. 47

    Also check out for email designs.


↑ Back to top