• 9 Nov

    A Guide to Creating Email Newsletters

    Information, Internet, Web Design

    Share




    Email newsletters are hotter than ever.

    They’re a great extension to your business’ communication toolkit and offer you and your clients an excellent channel by which you can reach potential and existing customers.

    In this article, we’ll explore common design patterns of email newsletters and learn which approaches work well, so that you’ll be prepared to create one for yourself and your clients.

    We’ve also included a compilation and analysis of different newsletter designs so that you can learn from them as well as tips on what to do and what not to do.

    If you know of any other tips, please share them with us in the comments area.

    Which Came First: Chicken or Egg?

    Before you create and send your email newsletter, you’ll need subscribers. Making this process as easy and intuitive as possible is important. After all, users are giving you permission to contact them. You wouldn’t want to mess that opportunity up!


    Not Too Many Fields

    You don’t need a user’s social security number to send them an email! It’s most frustrating when someone signs up for an email newsletter only to be confronted with a form that asks for their address, age, phone number, mother’s maiden name, favorite pet… All we really need is their email address and, if we want to push a bit further, their name.

    Seth Godin, in his article Permission Marketing, offers good insight into getting viewers to sign up and follow you:

    Permission marketing is the privilege (not the right) of delivering anticipated, personal and relevant messages to people who actually want to get them.

    In other words, the viewer wants to listen to you. They are giving you their attention, so at least respect them and don’t ask for unnecessary data.

    With that in mind, let’s look at some examples of good newsletter sign-up forms:

    Joshua Porter’s sign-up form is an excellent example of what to do right. First, he puts the sign-up form close to his social icons, indicating that this is an extension of his communications with you, the user.

    Next, he offers a short blurb explaining what the newsletter is about. This gets you and your users on the same page, so that they’re clear on what to expect from your content.

    Finally, he asks only for the user’s email address and name, followed by a big button with a verb label: “Subscribe.” Very simple, yet packed with just the right information!

    Threadless also puts its newsletter sign-up form in the social area of its home page. The location is prominent, and Threadless provides information on how often and when the newsletter will be delivered. Also, notice the simplicity of asking only for an email address: no name, no social security number, no favorite pet!


    We’ve Got Subscribers!

    Your sign-up form is now a success, and you’re ready to send out some content!

    Before we move to the design stage, let’s figure out what the focus of our newsletter is. For example, if you are giving away coupons, you could use more graphics and buttons than usual. If it’s text-heavy, you’ll want it to be as readable and scannable as possible.

    Let’s examine two newsletters with different goals. The first is from Barnes and Noble, offering promotions for its stores. The second is from Sitepoint, which gives its newsletter a magazine-style layout and structure.

    The first thing you’ll notice about the Barnes and Noble newsletter is that it is designed like a website. It’s literally an extension of the main website, complete with top-level navigation.

    You’ll also see that it’s timely; right next to the logo it says “This week,” reminding you that the offers are for a limited time only and that you should make your purchase quickly.

    Notice how easy it is to scan the page. All of the paragraphs are short, and the images and content hierarchy make the design feel comfortable even in your email browser!

    Finally, the designers have put a clever call to action at the bottom of the page. The numbers in big red type attract your attention, sitting beside buttons with verb labels, pushing you to take advantage of the promotion.


    Sitepoint goes for a completely different layout because it has a different goal. Its goal is to build a following for its content, to be able to extend its advertising space.

    It adopts a magazine style, starting each issue with a letter from the editor, followed by a table of contents (in-page links) that guides you to the concise articles in the email.

    One important design decision made by Sitepoint was to include a photograph of the editor at the top of every email. This approach makes the email feel more personal, like it’s coming from a human who took the time to organize the content.


    HTML or Plain Text?

    Now that we’ve discussed your business goals for the email newsletter and how to support it with the design, let’s briefly consider the construction.

    Back in the old days (i.e. three years ago), composing email newsletters in plain text was safer and more common. You would also see full-length articles incorporated in the email (as long as today’s blog posts).

    Since then, people have discovered that they don’t really like reading long emails, and that scannable content that functions as a gateway to the main website makes more sense.

    With this in mind, the most logical design would be a hybrid of images and HTML text. Jakob Nielsen has this to say about how much time users spend reading a newsletter:

    Users spend 51 seconds reading the average newsletter. The layout and writing both need superb usability to survive in the high-pressure environment of a crowded inbox.

    Once you’ve got a good hybrid design, you will have to dive in and code the newsletter (unless you have a great coder sitting next to you). A great resource for best practices and insight on the state of HTML emails is Campaign Monitor’s tips area:

    Not only can you get started with one of the templates, but you can also consult a comprehensive checklist of supported CSS and HTML features in all modern email clients.


    Email Newsletter Software

    Now that we’ve got a solid grasp of what’s involved in creating an email newsletter that serves our business goals, we will choose the right software for our design.

    You could, of course, manually write the scripts to create the newsletter, subscribe users and send out the email. But you likely have a business to run, and using tools that were created for these tasks would save you a lot of time.

    Here are the three most popular email newsletter services today. They are all low-priced and feature-rich:

    Campaign Monitor, which we mentioned earlier, not only has great resources for designers but also great prices: a flat delivery fee of only $5, plus $0.01 for each subscriber.


    Mail Chimp is another popular email campaign service. It has a great analytics feature for your email newsletter campaigns and a free plan!


    Emma offers email marketing with style. It even plants five trees for each customer who joins. If your business is growing, Emma allows you to easily adjust your pricing plan.


    Inspiration

    By now, you should have a good understanding of what’s involved in creating an email newsletter campaign for you or your client.

    Now for some more fun. Let’s look at some email newsletters for reference and inspiration…

    Apple looks good, as always. Its email newsletter is fresh, scannable and beautifully balanced. Notice the attention to detail, specifically how the buttons are color-coordinated with the images.


    Zappos’ approach is similar to that of Barnes and Noble: its navigation at the top is an extension of the website, and it highlights its popular free 365-day shipping service.


    Target also focuses on scannablilty and clickablity. Notice the email discount, rewarding you for following the newsletter.


    Personal success guru Brian Tracy offers a clean, easy-to-read email newsletter. His approach is simple yet focused on his brand and main goal: helping you to achieve success.


    Master chef Jamie Oliver has a more artistic email newsletter, keeping the visual language consistent with his upbeat and personal approach to cooking. The buttons match the background nicely and create a fun feel.


    Think has followed sensible art direction for its newsletter. The design is consistent with that of its blog.


    Clarus Wines beautifully illustrates its newsletter, giving it a human touch. The soft gray offers respite from your cluttered inbox.


    A great example of borrowing real-world analogies (in this case, an event poster) and translating it to the web, Blick Shared Studios offers an attractively designed email newsletter.

    If your interested in seeing more great examples, check out Campaign Monitor’s Inspiration Gallery.


    When Should I Send?

    We’re almost wrapped up, feeling inspired and ready to extend our communication with clients through an email newsletter! Just one more topic to cover, and that is what day to send it. 37 Signals has a humorous take on the question:

    Want something to blow up? Tell the world about it on a Tuesday morning. Avoids the Monday avalanche people face and gives you the rest of the week to get play.

    Want something to fade away? Tell the world about it on a Friday afternoon. It’ll fade into the weekend.


    Written exclusively for WDD by Noam Almosnino, a web designer and blogger who helps businesses and individuals connect with their customers online!

    Do you have tips to share with us from your email newsletter experiences? Please post them in the comments below…



  • 49 Comments »

     
    #1
    Mars
    November 9th, 2009 at 8:53 pm

    lovely article you got here mate, this is very useful for us, thanks for sharing

     
     
    #2
    Noam Almosnino
    November 9th, 2009 at 9:04 pm

    Thanks Mars, glad you found it useful!

     
     
    #3
    Design Informer
    November 9th, 2009 at 9:09 pm

    Great post. I like the examples that you showed.

    Also great that you decided to show the Sign-Up forms as well.

     
     
    #4
    Scott
    November 9th, 2009 at 9:10 pm

    Thanks for this! I was just wondering how to create a good e-mail newsletter, since it’s so useful to have an e-mail signup for any site or blog, but subscribers will quickly unsubscribe, in my experience, if the newsletter isn’t useful and visually appealing.

     
     
    #5
    Mvestor Media
    November 9th, 2009 at 9:29 pm

    Thank you for this! I really enjoy the all in one approach and now I can focus on this for my company. Also, an idea popped into my head while reading this…don’t under estimate the social media networks. Put your RSS, twitter, FB, linkedin etc in these newsletters. They don’t have to be huge, but at least throw in the small icons for those who find them familiar.

     
     
    #6
    Web Design Maidstone
    November 9th, 2009 at 9:58 pm

    Personally I think most of these examples are too wide and too graphical in most instances. You need to get through the spam filters and graphically heavy copy doesn’t help. … certainly in cases of using leased lists

     
     
    #7
    Garth
    November 10th, 2009 at 9:50 am

    Pity no answers to this point. I would love to see ana analysis of open rates, clickthrough stats etc for the examples given. Sometimes the most effective designs don’t appear designed at all. Great article – thanks.

     
     
    #8
    Thomas
    November 9th, 2009 at 10:48 pm

    Great and helpfull Tips. From this site i don’t see it and do create an Email every Day. But too much is too much.

    THX
    Thomas

     
     
    #9
    Christian Brennan
    November 9th, 2009 at 10:52 pm

    Thanks for this post. Very informative and in-depth. I am starting a new campaign this week and I feel like this will really come in handy.

     
     
    #10
    Melody
    November 9th, 2009 at 11:11 pm

    For highly trafficked websites, email newsletter software can cost a pretty penny..but I guess it wouldn’t matter cause the site had the traffic/advertising revenue anyway..

    Is it better to have an email submit option then the reader clicking on an image link?

     
     
    #11
    Kim Smith
    November 10th, 2009 at 12:12 am

    Great article and resources. I’ve used both MailChimp and Campaign Monitor and they are both excellent email systems to use.

     
     
    #12
    Stephen
    November 10th, 2009 at 12:26 am

    What a good read. I am just in the process of trying to convert almost 4,000 members from printed Newsletters to receiving them by e-mail and so this is a very useful article for me to explore in more detail.

     
     
    #13
    Blue
    November 10th, 2009 at 12:31 am

    I’ve found that with the variety of email clients available and their subpar html support, coding in Tables instead of Divs is still a necessary evil of newsletter design if you want to have a broad reach. It’s also a good idea to preview your newsletter with images disabled for clients that block images by default. Also, don’t forget to give your images alt text for when your images do get blocked. And as much as we designers don’t like it, there’s still a place for text-only — people who read email on our phones. FYI — programs like MailChimp can generate a text-only version automatically for you, so USE it.

     
     
    #14
    Noam Almosnino
    November 10th, 2009 at 7:53 pm

    Hey Blue, great tips, thanks!

     
     
    #15
    RoaldA
    November 10th, 2009 at 12:32 am

    Nice, this is helpfull! Ty!

     
     
    #16
    Jesse
    November 10th, 2009 at 12:57 am

    Thanks for this – good collection of tools for email marketing.

     
     
    #17
    Jonas
    November 10th, 2009 at 1:03 am

    Plain text or HTML? This should not be a question for the guy who sends the newsletter. To offer both are necessary. Personally, I don’t like HTML emails with scripts and tracking cookies, maybe worms or other kind of malware…and I also do not like my mail client connect to the internet. Plain text or HTML is a question of security and user-friendlyness.

     
     
    #18
    Tim Read: Ripplenet web design
    November 10th, 2009 at 1:29 am

    Thanks for a great overview. I don’t know how you find the time to get it all together!

     
     
    #19
    George Be
    November 10th, 2009 at 2:07 am

    The three most used newsletter on line systems are:
    Constant Contact
    I-Contact
    My Newsletter Builder
    Some are Free for qualified non-profits, small groups, personals, etc.
    Where did you get your ranking?

     
     
    #20
    Gcas
    November 10th, 2009 at 5:58 pm

    Thank you, George! You’re absolutely right about the ranking. I can speak for Constant Contact and iContact when I say that they are incredibly affordable, user friendly and full of features which I think are lacking in the three services described above.

    In the interest of full disclosure, I do work for one of those two top companies.

     
     
    #21
    Bones
    November 10th, 2009 at 2:12 am

    A good, well resourced, article. I think that another important point is newsletter frequency. Too often, and they go straight into the bin, too infrequently, and your reader forgets who you are.

     
     
    #22
    Noam Almosnino
    November 10th, 2009 at 7:58 pm

    Bones, great point, you definitely need to find the balance between frequency of sending. As a subscriber, I’ve found once or twice a week to be good and not annoying.

     
     
    #23
    HTML Email Designs
    November 10th, 2009 at 4:42 am

    Nice article showcasing some excellent examples. If only there were standards to the html in emails, like for the web. The difference in rendering of html among different clients is vast. It really limits creativity for email designs and increases testing time for every new template developed.

    Thanks for sharing.

     
     
    #24
    Laura
    November 10th, 2009 at 5:04 pm

    Never a truer word spoken. I cringe when people ask about HTML emails. They are evil, HTML email standards – like with web – would really improve things a lot!

     
     
    #25
    Tom Ross
    November 10th, 2009 at 4:54 am

    This is a great article, I love how the various examples have been broken down to include their motives and goals. You may have just inspired me to start my own newsletter! :)

     
     
    #26
    Luc
    November 10th, 2009 at 12:03 pm

    Thanks! This is very useful. I make emailers most of the time. But how come Gmail doen’t support styles when it’s a newer than yahoo mail?

     
     
    #27
    Darshana Gunawardana
    November 10th, 2009 at 2:10 pm

    This is a very good collection for email marketing.
    Thanks…. :D

     
     
    #28
    Gcas
    November 10th, 2009 at 6:00 pm

    I’d have to add something about trying to run your own campaign: Your ISP will not appreciate it, and it can even get your IP blacklisted with companies like Spamhaus. It’s never safe to try to run a campaign with more than 50 subscribers or so on your own. Other than the top companies’ ranking, great resource!

     
     
    #29
    Joe
    November 10th, 2009 at 7:12 pm

    Tks! You´ve readen my thoughts!

     
     
    #30
    Jon Heller
    November 11th, 2009 at 2:42 am

    Great point about the number of fields.

    I wouldn’t be so quick to knock on plain text emails though. My company has done multiple tests on our over 100k member list and advertisements in plain text have trounced fancy pretty HTML ones.

     
     
    #31
    Demian
    November 11th, 2009 at 8:28 am

    Hi!
    I love this article. I have a question maybe someone might be able to help me with. Anyone ever embedded video in a newsletter with base64 and set it to autoplay?
    Thanks

     
     
    #32
    Ivan Tolmachev
    November 11th, 2009 at 1:09 pm

    Useful, bookmarked

     
     
    #33
    genkiz
    November 11th, 2009 at 1:29 pm

    Is there a free/ opensource solution available?

     
     
    #34
    Jannis Gerlinger
    November 11th, 2009 at 5:00 pm

    These examples are awesome!
    I like it that way.

     
     
    #35
    Ms. Freeman
    November 11th, 2009 at 8:52 pm

    I have been thinking about letting go of my current email marketing company and moving over the Mail Chimp. I have all the information here on how to do that. Thanks:) I can see why this blog is such a success. You provide so much information there is no reason to search other blogs.

     
     
    #36
    Lana
    November 13th, 2009 at 2:34 pm

    we using very handy online-software http://litmusapp.com/
    It’s very handy and (as far as I remember) not very expensive.

     
     
    #37
    lance
    November 13th, 2009 at 6:22 pm

    Great tips on how to create e-mail newsletters. I like the way how the article is presented. :)

     
     
    #38
    Web 2.0
    November 13th, 2009 at 7:28 pm

    I will be creating one email newsletter for my client very soon… Thanks!

     
     
    #39
    Mark Carter
    November 16th, 2009 at 1:27 pm

    Hi, I came across this page orginally at:
    http://m.webdesignerdepot.com/2009/11/a-guide-to-creating-email-newsletters/

    Whilst there you couldn’t click on the thumbnails and get a larger view of the inspiration designs. I thought that was a bit odd .. then noticed the url.

    What is the htt://m. … url in relation to your main website?

    many thanks,

    Mark

     
     
    #40
    Walter
    November 16th, 2009 at 8:24 pm

    You’ve reached our mobile version somehow :)

     
     
    #41
    Martin R. Krause
    November 17th, 2009 at 5:32 pm

    Great post. I was missing some important point though.

    First: E-Mail-Newsletters have to be coded using old school table based layouts. This is due to MS Outlook that in the year 2009 cannot handle floats.

    Secound: I don’t know how it is in the US but in the EU sending out e-mail newsletters is a major law issue. You have to provide double opt.-in (with confirmation via a separate sign in mail) and single opt.-out. And you may not track people’s clicking behavior individually. With most US newsletter services (like those mentioned in this article) it is not possible to switch off the click monitoring. So be careful when you got EU recipients for your newsletter.

     
     
    #42
    Kris James
    November 18th, 2009 at 5:03 am

    Thanks for this extremely useful article. I’m about to get into email newsletters myself so I’ve found this at a perfect time.

    Many thanks!
    Kris

     
     
    #43
    Steve Buell
    November 19th, 2009 at 12:55 am

    You also might want to consider using the “Text Email Newsletter” (TEN) Standard http://www.headstar.com/ten/ for the included option of receiving text newsletters.
    It greatly simplifies the scanning/reading of the content.

    @Mark Carter. The “http//m.” is the mobile version of the page. Larger images won’t display well on handheld devices.

     
     
    #44
    BooshMedia
    November 20th, 2009 at 10:28 pm

    I’ve been looking around for something like this and thankfully you have come up with the goods. Thank you Webdesigner Depot

     
     
    #45
    Carla
    November 22nd, 2009 at 10:44 pm

    I haven’t thought about making my newsletters in the same format as my actual website, but I will definitely try that for my next newsletter!

     
     
    #46
    luis angel
    November 24th, 2009 at 1:39 am

    Nice post, it’s important to say that the newsletter have to be coded with tables and with inline css styles. Make some testing for each email client it’s also indispensable.

     
     
    #47
    Email Newsletter Programs
    January 11th, 2010 at 8:56 pm

    Some great examples here – inspirational! Will refer back here for future posts. Many thanks.

     
     
    #48
    Sarah
    February 18th, 2010 at 12:32 am

    Great article, and some great pointers that I will definitely use. Thank you!

     
     
    #49
    Emlak
    March 3rd, 2010 at 1:19 pm

    Thanks for this! I was just wondering how to create a good e-mail newsletter, since it’s so useful to have an e-mail signup for any site or blog, but subscribers will quickly unsubscribe, in my experience, if the newsletter isn’t useful and visually appealing.

     
    Name (required)

    E-mail (required - never shown publicly)

    Web-site

    Your Comment (smaller size | larger size)

Home| Advertising| About| Contact

© 2010 All Rights Reserved