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.

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

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

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

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

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

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 appalling6. 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 Premailer8. You can also use some nifty tools for CSS inline styling, such as The Automatic CSS Inliner Tool9 or Inline Styler10 — the latter converts CSS rules into inline style attributes.

7. Always Include a Plain Text Version

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

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

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

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

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 ever13, 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

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

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 Ways14, 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 Emails15” 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…

Everything else…

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

Planning for Email Newsletters

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

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

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

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

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.



  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
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65

↑ 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

    Here you can find a good collection of free newsletter templates : . 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.

  2. 52

    Fantastic work. Thank You very much. I am working in an NGO and we’ve been needed this work. That’s awesome and explains the subject well. Thanks again.

  3. 103

    La prima volta che mi hanno chiesto di fare una newsletter, ho fatto esattamente questa faccia O_O !!!

  4. 154

    Podveg Razvedcheka

    January 20, 2010 4:03 am

    Good expamples for inspitation! Thanks

  5. 205

    Thanks Mathew Patterson,
    Really this is very Helpful!

  6. 256

    Thanks. Useful for the newbies. I design and code email campaigns, so some of these email campaigns are inspiring.

  7. 307

    Another site for html email inspiration:

  8. 358

    Mohammad Koubeissi

    January 20, 2010 6:57 am

    Great Post.

    I just released to showcase email designs and educate others about email marketing in general.

  9. 409

    in right time, i just working on it…

  10. 460

    Wow I lost my mind last month while designing my first email newsletter. this is verrrrrry helpful, thanks a loooooooot
    thumbs up :)

  11. 511

    This is a fantastic article. Email newsletters have always been difficult and troublesome and this article has many useful pointers. Many thanks!

  12. 562

    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

    • 613

      Actually Dan we still hear of a lot of companies using plain text, and individuals who prefer to see it. Some email clients also use the plain text version to generate previews too.

      What if you are emailing someone with an older Blackberry, that can’t see HTML at all? The point is that it takes so little extra effort to do, and it could help out a bunch of your subscribers.

      Why wouldn’t you do it?

      • 664

        Because it’s pain in the neck. My company used to do text version but we resigned as there was no need to do this any more. As I said very few people open text version…

  13. 766

    Very informative, love the inspirational part!

    A Definite Bookmark

  14. 817

    a great article! 100% agree with the points about all image emails – they look pretty but they don’t work well – this is email not DM or web, and there’s different things to consider.

    Also want to throw my hat in and plug by email marketing design blog – – collating good examples and helping to show best practice in email design


  15. 868

    It’s not impossible to create a graphic heavy design that doesn’t rely on embedding text into the graphics.

    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.

  16. 919

    Excellent article. I learned all this stuff the hard way.

  17. 970


    I am already following these guidelines…….. And, I am quite happy with my performance. :)

  18. 1021

    nice article, nice information to possess.
    Design is always a top issue! Trust me

  19. 1072

    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 – – 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!

  20. 1123

    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.

  21. 1174

    Awesome, awesome post. Thanks!

  22. 1225

    good article. yes, funny most example have way too many images to be good newsletters. nice design, but fail in usability.

  23. 1276

    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

  24. 1327

    It’s unbelieveable. Great work. Thanks a lot.

  25. 1378

    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.

  26. 1429

    There’s so many comment’s here that it makes me not want to leave a comment… But… I appreciate the collection of email blast designs. Great inspiration.

  27. 1480

    Nikhil Nilakantan

    March 31, 2010 9:45 am

    Great article and a comprehensive set of examples. Very helpful. Thank you for putting this together.

  28. 1531

    HTML email design gallery:

  29. 1582

    I am quite agreen with the write’s says about the experiencial knowledge of better living.For home improvement I have glance those sits.I found they benifit for life. I want to buy something to home see for use. Hope you give me a good views

  30. 1633

    very nice work Mathew, Thanks you so much for this great article. Very very useful .
    thanks again

  31. 1684

    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.

  32. 1735

    Don’t have a client who needs this service at the moment but I wanted to be able to offer it. Great overview! Thanks!

  33. 1786


    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 You can read my articles, and I encourage you to request my free e-book “7 Principles for a Successful Newsletter.”

    Please let me know how I might help.
    Scott Koegler
    scott @

  34. 1837

    Hello, Dear ladies / gentalmen, Happy New Year, Good luck to U !

  35. 1888

    please send me

  36. 1939

    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.

  37. 1990

    thanks you ! I looked too good posts.

  38. 2041

    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.

  39. 2092

    There’s also another cool email design testing and email analytics service called

    It let’s you to test your emails on 37 email clients including Facebook messaging system.

  40. 2194

    Everyone here is working too hard. I regularly use a service called Using, I can launch an entire email broadcast in under one minute. 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.

    Louisville, KY

  41. 2245

    Great post!

    Very informative. Keep it up!

  42. 2296

    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 . it magically transforms regular email into beautiful newsletter style email Just send an email to 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.

  43. 2347

    Allyson Steffey

    March 19, 2013 1:20 pm

    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 They have covered each and every little things which are needed for Email or Newsletter. . – where you can find email design best practices article.

  44. 2398

    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.

  45. 2449

    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.


↑ Back to top