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

Advertisement

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

Screenshot7

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.

35

36

37

38

39

40

41

42

43

44

45

46

47

Screenshot48

Screenshot49

Screenshot50

Screenshot51

Screenshot52

Screenshot53

Screenshot54

Screenshot55

Screenshot56

Screenshot57

Screenshot58

Screenshot59

Screenshot60

Screenshot61

Screenshot62

Screenshot63

Screenshot64

Screenshot65

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.

(al)

Footnotes

  1. 1 http://www.campaignmonitor.com/gallery/entry/2934/haystack/
  2. 2 http://www.campaignmonitor.com/blog/post/1821/redefining-spam/
  3. 3 http://www.campaignmonitor.com/gallery/entry/2784/amy-ruppel/
  4. 4 http://www.guardian.co.uk/world/2005/may/28/secondworldwar.japan
  5. 5 http://www.email-standards.org/clients/apple-mail/
  6. 6 http://www.email-standards.org/clients/microsoft-outlook-2007/
  7. 7 http://inlinestyler.torchboxapps.com/
  8. 8 http://code.dunae.ca/premailer.web/
  9. 9 http://www.mailchimp.com/labs/inlinecss.php
  10. 10 http://inlinestyler.torchboxapps.com/
  11. 11 http://www.campaignmonitor.com/resources/entry/677/image-blocking-in-email-clients/
  12. 12 http://www.email-marketing-reports.com/canspam/
  13. 13 http://arstechnica.com/tech-policy/news/2008/05/myspace-spammers-given-largest-fines-in-can-spam-history.ars
  14. 14 http://24ways.org/2009/rock-solid-html-emails
  15. 15 http://24ways.org/2009/rock-solid-html-emails
  16. 16 http://www.campaignmonitor.com/templates
  17. 17 http://themeforest.net/category/marketing/email-templates
  18. 18 http://www.mailchimp.com/resources/html_email_templates/
  19. 19 http://www.campaignmonitor.com/gallery
  20. 20 http://spammeltdown.com/
  21. 21 http://www.beautiful-email-newsletters.com/
  22. 22 http://www.flickr.com/photos/dmadray/sets/72157617876767799/
  23. 23 http://www.campaignmonitor.com/css
  24. 24 http://www.campaignmonitor.com/videoinemail/
  25. 25 http://www.campaignmonitor.com/resources/entry/674/using-forms-in-email/
  26. 26 http://litmusapp.com/email-testing
  27. 27 http://www.campaignmonitor.com/testing
  28. 28 http://www.mailchimp.com/features/power_features/inbox_inspector
  29. 29 http://www.email-standards.org/
  30. 30 http://fixoutlook.org
  31. 31 http://www.email-marketing-reports.com/iland/2008/07/42-html-email-design-resources.html
  32. 32 http://www.b2bemailmarketing.com/
  33. 33 http://emailmarketingvoodoo.com
  34. 34 http://www.retailemailblog.com/
  35. 35 http://www.campaignmonitor.com/gallery/entry/2973/design-collectors/
  36. 36 http://www.campaignmonitor.com/gallery/entry/2982/noise-13/
  37. 37 http://www.campaignmonitor.com/gallery/entry/2836/dekalb-tyre/
  38. 38 http://www.campaignmonitor.com/gallery/entry/2937/authentic-jobs/
  39. 39 http://www.campaignmonitor.com/gallery/entry/2954/bgroup/
  40. 40 http://www.campaignmonitor.com/gallery/entry/2880/desktop-create-2009/
  41. 41 http://www.campaignmonitor.com/gallery/entry/2356/the-studio-at-grayrock/
  42. 42 http://www.campaignmonitor.com/gallery/entry/2612/fontshop-industry-focus/
  43. 43 http://www.campaignmonitor.com/gallery/entry/2669/interaction-newsletter/
  44. 44 http://www.campaignmonitor.com/gallery/entry/2699/hammerpress/
  45. 45 http://www.campaignmonitor.com/gallery/entry/2740/juxt-interactive/
  46. 46 http://www.campaignmonitor.com/gallery/entry/2766/disgrace/
  47. 47 http://www.campaignmonitor.com/gallery/entry/2785/seamless-creative/
  48. 48 http://www.campaignmonitor.com/gallery/entry/2978/http-wwwidahostewcom/
  49. 49 http://www.welove72.com/_email/0809_Digital_Heart/newsletter.html
  50. 50 http://emailer.emailroi.com/r.pl?oN9qABPkZMyZiWtb_913353a8f9eddb09
  51. 51 http://www.ccd-design.com/refs/newsletters/heroes-over-europe/
  52. 52 http://view.email.threadless.com/?j=fe9011707262007b76&m=feeb1c78776d0d&ls=fde915777362027a7c1d7375
  53. 53 http://oldnavy1.m.delivery.net/w/webView?cid=17918697084&mid=1795296875&pid=746334&vid=131&ee=RVJJQ0FCQU5LU0BHTUFJTC5DT00_&si=&mv=H&bv=H&oc=H&sc=&k=1h0Wvh
  54. 54 http://www.barnesandnoble.com/email/hosted.asp?r=1&PID=31808
  55. 55 http://thelomographer.com/2009/nl_diana_doll/
  56. 56 http://www.wolda.org/news/14.html
  57. 57 http://my.armitagemail.co.uk/T/ViewEmail/y/6A1F154F85F099D8
  58. 58 http://www.flickr.com/photos/advolocaru/3878979220/
  59. 59 http://www.flickr.com/photos/advolocaru/3512572374/
  60. 60 http://view.mail.loyalcustomerclub.com/?j=fe901c737066007b76&m=feee1d76716303&ls=fdef16737662017a71107873&l=f
  61. 61 http://www.ingage.ie/teamworx/090407/090407.html
  62. 62 http://www.ecommr.com/2009/05/lands-end-e-mail-marketing/
  63. 63 http://iconinc.createsend.com/T/ViewEmail/r/C2173CCD6E448C6B
  64. 64 http://type-together.com/newsletters/2009-12.html
  65. 65 http://www.veer.com/hear/archive/ve.gsa.0110_v.html

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

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

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

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

    2
    • 4

      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!

      0
      • 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.

        0
    • 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.

      0
    • 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.

      0
  4. 8

    Wow! Nice tips. Thanks a lot Patterson!
    :)

    0
  5. 9

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

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

    0
  7. 12

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

    0
  8. 13

    This is really useful resource of html emails : http://www.campaignmonitor.com/css/

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

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

    0
  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

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

    0
  13. 18

    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.

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

    0
  16. 21

    Incredible post! Lots of great examples and content on email marketing and design. I love the different sources you’ve given here! For a few more examples of email designs, check out this article on email designs http://sarahlynndesign.com/2010/01/email-designs-that-will-rock-your-inbox/.

    -1
  17. 22

    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 …

    0
  18. 23

    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!

    0
  19. 24

    Waouw !
    Amazing post ! Great thanks smashing !

    0
  20. 25

    The perfect tool I found is http://www.emailonacid.com/acidtest/start
    It was all free but since a few month, you need to pay if you wish to preview your mail on all the clients.

    0
  21. 26

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

    0
  22. 27

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

    0
  23. 28

    Great post; the sample emails were extremely helpful.

    0
  24. 29

    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

    -1
  25. 30

    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.

    :-)

    0
  26. 31

    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!

    0
  27. 32

    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

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

      0
  28. 34

    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!

    0
  29. 35

    Very nice article, thanks…8)

    0
  30. 36

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

    0
  31. 37

    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
  32. 38

    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.

    0
  33. 39

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

    Here is the work we’ve done for this customer : http://media.toucouleur.fr/P2B_mail_registered_user.png

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

    0
  34. 40

    There is also another great resource that is available to everyone on Emailing clients: http://www.emailinstitute.com/

    0
  35. 41

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

    0
  36. 42

    very nice article, 10q

    0
  37. 43

    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, http://www.danielneumann.com/blog/safe-css-styles-for-html-emails/

    2
  38. 44

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

    0
  39. 45

    Hi,

    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 http://www.campaignmonitor.com/gallery , 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!

    0
    • 46

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

      1
  40. 47

    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!

    0
  41. 48

    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!

    0
  42. 49

    Also check out http://htmlemailgallery.com for email designs.

    1
  43. 50

    Thank you for this article. I had to do HTML newsletter last year for the first time and it was almost like learning to do HTML once again. This one would have been very helpful back then. ;-)

    0
  44. 51

    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.

    0
  45. 52

    I was just working on tables for one of these today! Talk about good timing. As much as I cringe at tables, they really are the way to go for email campaigns. Very helpful stuff.

    0
  46. 53

    Thank you, thank you, thank you. I’ve been struggling with many of these problems myself.

    This article has helped me more than you know.

    Smashing, if you were a hot Norwegian babe, I’d marry you.

    0
    • 54

      Glad to know it came in so handy Andrew! I’d love to help you out re: hot norwegian babes, but there doesn’t seem to be any around here right now.

      0
  47. 55

    From Spam Filters point of view – the Plain text version should have exactly the same content as a rich version. Formatting plain text to make it more friendly for readers can cause extra problems.

    0
  48. 57

    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
  49. 58

    thank you for the great article.

    0
  50. 59

    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.

    1
  51. 60

    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.

    0
  52. 61

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

    0
  53. 62

    Podveg Razvedcheka

    January 20, 2010 4:03 am

    Good expamples for inspitation! Thanks

    0
  54. 63

    Thanks Mathew Patterson,
    Really this is very Helpful!

    0
  55. 64

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

    0
  56. 65

    Another site for html email inspiration: http://www.htmlemaildesigns.com/

    0
  57. 66

    Mohammad Koubeissi

    January 20, 2010 6:57 am

    Great Post.

    I just released http://beautifulemails.com to showcase email designs and educate others about email marketing in general.

    0
  58. 67

    Thanks,…
    in right time, i just working on it…

    0
  59. 68

    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.

    0
  60. 69

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

    0
  61. 70

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

    0
  62. 71

    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

    0
    • 72

      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?

      0
      • 73

        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…

        0
  63. 75

    Very informative, love the inspirational part!

    A Definite Bookmark

    0
  64. 76

    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 – http://www.emaildesignreview.com/ – collating good examples and helping to show best practice in email design

    cheeers!

    0
  65. 77

    It’s not impossible to create a graphic heavy design that doesn’t rely on embedding text into the graphics. http://www.fortnumandmason.com/emails/2009/09February003/email1.html

    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.

    0
  66. 78

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

    0
  67. 79

    Hey,

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

    0
  68. 80

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

    0
  69. 81

    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
  70. 82

    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.

    1
  71. 83

    Awesome, awesome post. Thanks!

    0
  72. 84

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

    0
  73. 85

    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
  74. 86

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

    0
  75. 87

    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.

    0
  76. 88

    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.

    0
  77. 89

    Nikhil Nilakantan

    March 31, 2010 9:45 am

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

    0
  78. 90

    HTML email design gallery: http://www.email-gallery.com

    0
  79. 91

    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

    -3
  80. 92

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

    0
  81. 93

    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.

    0
  82. 94

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

    0
  83. 95

    Hello;

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

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

    -2
  84. 96

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

    -1
  85. 97

    Hi,
    please send me

    -1
  86. 98

    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
  87. 99

    thanks you ! I looked too good posts.

    0
  88. 100

    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.

    1
  89. 101

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

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

    0
  90. 103

    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
  91. 104

    Great post!

    Very informative. Keep it up!

    0
  92. 105

    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
  93. 106

    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 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
  94. 107

    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
  95. 108

    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.

    0

↑ Back to top