10 Design Lessons From HTML Email Templates That Actually Sell

by on 4th November 2010 with 35 Comments

In the past we and several other blogs have outlined some useful technical information for how to code and structure your HTML emails from a developer point of view. But much less discussion has been given to how to actually undertake the design component of email newsletters.

Today we’ll take a look at some of the top-selling email templates from Themeforest and see if we can decipher what their designers did right so you can mimic these basic principles in your own designs.

#1 Keep it Narrow

Email clients vary considerably not only with the way that they interpret code but simply with the way that they display messages. Consider the difference between viewing a message in Apple Mail on a 20″ monitor as opposed to Gmail on a 13″ monitor.

Obviously, the width of your design becomes a major issue. While you can flood the background with a color through a 100% width table, most standards recommend that you use a content width of somewhere between 500-620 pixels.

In the extremely popular AirMail template below, the design stretches to around 550 pixels wide but the actual content width comes in at a mere 480 pixels.

screenshot

The narrow design looks great and will work perfectly across the majority of devices and clients.

#2 Options Are Everything

One major key to creating templates that sell is remembering that a one size fits all approach won’t work. Customers purchasing a design template don’t just want strong design, they want value. They see value in the options you make available.

If your template has one layout and one or two color schemes, you’re not really providing a ton of variety. This locks the purchaser into a fairly limited number of options, which doesn’t make the purchase a wise decision in the long term.

However, if your template allows them to choose from several different layouts and color options, potential customers will appreciate the opportunity to choose from so many different email newsletter variables on a weekly basis, allowing them to switch things up and see what works best for their unique customer base.

As an example of strong variety, consider the BlauMail template shown below. First, you choose from a number of different color and template options (rounded or square corners).

screenshot

Next, you choose from one of three unique layouts.

screenshot

This takes you to the template with the options you selected. To account for all of the variables, BlauMail comes with a whopping 60 HTML files!

screenshot

#3 Create Clearly Defined Sections

Companies use HTML emails as a point of continual contact with their customers and, whether or not it’s the best thing to do from a strategy point of view, they like to put quite a bit of content in them.

Businesses want to let their customers know about sales, promotions and updates in a variety of different areas and need to be able to do so in a non-cluttered space. So rather than creating an email with only one big content area, consider breaking it up into a number of different sections.

The Fresh Email Template below takes this idea to an extreme and physically separates the different sections onto different backgrounds, creating a modular look.

screenshot

This template has 750 purchases to date, putting it at the top of the list on ThemeForest. So if you’re going to take lessons from any template, it should probably be this one!

#4 Simple Sells

While some template designers go all out with creative themes, bold colors and stunning graphics, others can sell twice as many templates using strong layouts and simple but attractive graphics.

The Versatile Email Template below would certainly not win any outstanding design awards and yet it’s extremely popular because it is exactly what many businesses want.

screenshot

The designer hooks in potential customers right away by putting “versatile” in the title and provides plenty of extras as recommended in Tip #2 above. Meanwhile, the design is kept very minimal, which makes the template something countless professionals can use.

#5 Shoot For a Niche

As we saw above, creating a basic layout and a generic design goes a long way because of the huge audience that it appeals to. However, using this technique can make it hard for you to stand out among the competition.

If an all-purpose strategy isn’t working out for you, try to target a sizable niche of consumers looking for something specific. As an example, the TechOffers theme below is actually appealing to several different niches at once.

screenshot

Obviously, there’s the tech component, but the template will also be attractive to almost any customer looking for an e-commerce theme. Finally, the theme has a holiday component with the red ribbon and New Year’s messaging.

This designer suddenly stands out in the crowd to three unique customers looking for a specific type of template. Strategically, this is an excellent move that is paying off in sales.

#6 Make It Easy to Brand

Remember that buying a template is often a compromise for many businesses because the product isn’t being built from the ground up to showcase their brand.

You can help overcome this hurdle to purchasing by providing potential buyers with plenty of places throughout the design to insert their company name, logo, slogan, a personal photo/profile, etc. This simple technique will help customers see that they can really make the template their own not have to give up personalization for affordability.

The Rich Typography email template below has inserted a large logo area in the footer in addition to various contact information and another logo in the header.

screenshot

#7 Curl The Corners

As much as I hate to offer advice that follows design clichés, this popular trend seems to be effective with customers. Curling up the corners of the content area helps create a paper illusion, which of course ties in nicely with the concept of a newsletter.

Notice in the Elegance Template below that this technique is used not just on the edges of the content area but on the images within the newsletter as well.

screenshot

Essentially all that you’re doing here is providing a sense of depth to a flat image and making it more three dimensional. Whatever unique tricks you can use to this same end will be even better.

#8 Try a Simple, Repeating Background

All but one of the examples we’ve looked at so far share one common design trait: solid backgrounds. Simple, solid color backgrounds are definitely a design trend with HTML emails. Thought it’s wise for loading times to cut down on images, none of these templates seem shy about using images in any other context.

As the Modern Business template below and the TechOffers template above show, a simple background can really help bring the email to life and make it feel more like a finished design.

screenshot

#9 Don’t Forget The Social Media Integration

Many business owners can’t begin to describe what Twitter is, but they’re on it. Overzealous marketers have convinced businesses that social media is a gold mine that will bring immense Internet fame.

On a practical level, this means that just about everyone you sell a template to will have an interest in social media and that you should therefore not be shy about working various popular sites into your design.

The Corporate Communication template below features some rather large social media icons in the About section near the bottom of the page.

screenshot

#10 Use Web Screenshots In Your Design

One final trend that I noticed in several top-selling templates was the tendency to use website screenshots as a primary element in the design. Since many businesses use email newsletters primarily as a way to drive traffic to their site, it makes sense that they want to feature shots of their site in the email.

By incorporating sample web shots into the design, you’re helping potential buyers see the your template meets their goals perfectly. In all honestly they could use any template with an image area to accomplish the same goal, but it helps to see the idea realized before you attempt it.

Check out the Innovative – Product Tour template and how it creatively incorporates a basic Safari browser chrome with a sample web page.

screenshot

Closing Thoughts

As always, I encourage you to use these samples of inspiration not as something to ripoff but merely as examples of successful design that you can learn from and use to spark your own original design ideas.

Leave a comment below and let us know what you think of the templates above. Also be sure to share any tricks or tips that you have found to be particularly useful when creating email templates for clients.

Comments & Discussion

35 Comments

  • http://www.startwebdevelopment.com Brad

    Great post, I actually wrote an article about things people should know when designing email templates on my blog. I will add your link to the post. Thanks for the great info!

  • http://www.beebig.ro bbg

    i was rly looking for an article like this one. thx for sharing this. gr8 job!

  • Pingback: CSS Brigit | 10 Design Lessons From HTML Email Templates That Actually Sell

  • http://www.16i.co.uk email marketing company

    Some great tips here – like the “curly corners”! Also keeping it simple helps with deliverability too. Some of the shots we did for IBM and Unisys were the simplest I’ve seen, but it shows these guys know how to do it best – 55px wide, and great Text:Code ratio for low filtering. No point in saying it if nobody hears!! :)

  • http://www.kaliteliforum.org kaliteliforum

    really nice templates, thanks for sharing..

  • http://www.jetwebconsulting.com Email Designer

    Nice templates and great ideas. I have been doing email designs for some time now. One thing about email templates, be sure they look good in every client before sending them out. Not many people realize that each email client displays HTML emails differently. A great tool that I have found is Email on Acid (http://www.emailonacid.com). They show you how the design will look in over 25 clients!

  • http://www.journeytodesign.com Seth W

    This is a fantastic article. Its easy to follow and makes some great points.

    I agree with @emaildesigner that you need to check the html emails with different email clients. This will cut down on your support questions and get you much better ratings.

    Options are important in designing emails. Clients want versatility and the ability to offer their clients new and feature rich options that are simple too.

  • http://wp-garage.com Scott J

    Excellent post and tips to consider. You just pointed out the exact template I have been looking for in BlauMail. I also like the suggestion of incorporating screen shots. That’s one I hadn’t thought of. Thanks!

  • http://www.monicowebdesign.co.uk Robert Dicks

    Some fantastic tips here the curly corners certainly add depth and draw the users eye. I can also highly recommend the BlauMail template, very versatile and visually appealing.

  • http://www.tikikitchen.com Aric Harris

    Great tips, but something that gets lost in these types of tips is Browser and Client testing.

    The designs are awesome, but the designer always needs to plan on alternatives if the main email client is going to be Outlook 2007, or worse… Lotus Notes.

    Most of my clients are B2B, and even go so far as to say that the design needs to be optimized for Outlook 2007. This means background images are gone, CSS is just out of the question and the markup is huge. In this case, a strategy needs to be worked out to allow for the email to degrade gracefully, and the designer needs to be a part of that. Leaving it up to the production person (if the designer and the person building the email are no the same) creates a lot of headache and confusion since the designer may be better attuned to brand guidelines, style guides, and image usage.

  • Joshua Johnson

    Just a note on some of the technical suggestions above, check out our recent article on developing HTML emails. This article covers areas like testing, using tables, etc.

    http://designshack.co.uk/articles/css/10-tips-for-designing-html-emails

    The article above is a follow up meant to focus more on actual design aspects.

    Thanks for reading and commenting everyone, great feedback!

  • Pingback: StartWebDevelopment.com | Resources on how to make a website.

  • Pingback: Diseñar newsletters atractivos | Sebastián Thüer Blog

  • Alex

    A person who knows a thing or two about the email would never buy any of those templates – there are that many things wrong with each of them.

    None of them have any meaningful pre-header, there’s almost no brand image consideration overall and none of them are optimised for mobile (take BlauMail for example – good luck seeing that ‘Mobile Version’ link when reading it on a mobile device as it’ll fall out of screen bounds).

    An email template with a good eye candy doesn’t mean a usable and performing template, which is what you want to achieve in the first place. Yeah, looks sells (and they do look nice), but there’s not much substance behind it.

  • http://christianvuong.ca Christian V.

    thanks for this article! I was actually trying to design a newsletter template last week for my boss and haven’t got it done yet. These tips will help for sure :)

  • Pingback: You are now listed on FAQPAL

  • http://www.swastiksolutions.in Hiren Khambhayta

    Nice collection, with good reference of email newsletter tips.

  • http://www.designshack.co.uk Joshua Johnson

    Wow Alex, strong words! Do you have a link to any superior HTML email templates that you have created?

  • Pingback: What I’ve Read: 10-11-01 to 10-11-14 | CSS Radar

  • http://fromfat2that.com krista

    This is a good collection. Thanks for sharing.

  • Paul

    Thanks for sharing, tips will help! :)

  • http://www.siteseaing.be Nick

    Thanks for sharing these great tips. They will definitely give my emails a boost!Some of them are really obvious that i used to forget them. Thanks!

  • http://www.ritchielinao.com Vicki

    I love this! :) Thanks.

  • http://www.emailwear.net Denis Graur

    Since it’s not really easy design a working email template, these tips ca really help the ones who are new in this. Thank you!

  • Pingback: Top Articles On The Web Design Community In November’10

  • Abhijit

    It’s realy imporve my email designing skill :) Thanks!

  • Pingback: 25+ Email Template Photoshop & HTML Tutorials, Tips & Tools | Tutorials Share | Web & Graphic Design Tutorial Roundups

  • http://www.riaxe.com Sanjeeb Sahu

    Its really helpful for my next templates design..
    Thanks for sharing.

  • http://escorts-in-new-york.info/easiest-ways-to-hire-new-york-escorts-at-the-best-price/ New York Escort Services

    This is really attention-grabbing, You’re an excessively professional blogger. I’ve joined your rss feed and sit up for looking for extra of your fantastic post. Additionally, I’ve shared your website in my social networks

  • Pingback: 10 Design Lessons From HTML Email Templates That Actually Sell | Design Shack » Web Design

  • http://ken.ph Ken

    This is definitely a good point by point reference on things to look out for or observe when creating those templates :) Thanks!

  • http://blog.ileezhun.com Chirag Pithadiya

    This is surely gonna improve my email template design skills.

    Thanks for the great post.

  • http://www.kirangems.com Loose Diamonds Marketer

    I have been really helped by this site. This had helped in designing my emailers a lot. Kudos to the team.

  • Pingback: Make your html newsletter template out of ordinary « Mail newsletter templates

  • http://www.socialtechnow.com jimmy

    good information,i recently created a set of responsive email templates,at mojo themes,plz checkout..
    http://www.mojo-themes.com/item/shopmail-product-offer-responsive-email-template/

Subscribe
Membership
About the Author