We’ve created a fair number of emails in our time, here at dt. After countless product updates, newsletters, special offer announcements and multiple other newsworthy events, we’ve picked up lots of tidbits along the way that help us ensure we’re getting the best possible response from our email efforts – and today’s your lucky day, because we’re going to share them!

Yep, all of them.

To keep things simple, we’ve broken this cornucopia of email knowledge up into three main categories:

Read on for instant email design enlightenment!

Layout & Format Considerations

Just like with web pages, the layout of an HTML email is critical in determining where your readers’ focus is directed. However, given the strict constraints of the email landscape, an even greater emphasis should be placed on how all the elements of your message fit together.

1. Keep everything within 600px wide
If there were just one email design guideline we could give you, it would be this one. Forcing your subscribers to scroll from side-to-side is the kiss of death for an email’s response rate. Why? Numerous eye-tracking studies have discerned that the average Web user’s reading habits skew more towards scanning (more on this shortly) rather than word-for-word reading. This means that stuff on the left gets more attention than stuff on the right – and stuff that doesn’t appear at all might as well not even exist.

2. Keep Your Calls-to-Action High
Since the majority of your subscribers likely only see the very top portion of their email messages thus making snap judgements about whether the content is worthy of their time, you’ve got precious little time to elicit a response. If your message passes muster, make sure to give your readers the opportunity to act immediately.

3. Tell us a story
The most effective emails weave a compelling and cohesive story between the subject line, the header and the content. Each of them should dovetail with the other, and provide just a little more info than the previous item. Check out this amazingly creative email from Brooks Brothers that perfectly illustrates a tight interaction between the headline, the hero image and the content, with the result being a truly memorable message.

4. Use HTML text/fonts
Unfortunately, the wrathful email gods have decreed that web-embeddable fonts shall not set foot in your recipents’ inboxes for the foreseeable future. So stick with the basics – Arial, Verdana, Georgia, and all the other usual suspects.

5. Plan for no images
The vast majority of email clients block images in messages unless the user opts to see them – that means your beautiful images will never get seen unless the rest of the content (i.e. the HTML text) is descriptive enough to persuade recipients to allow images from you to be shown. Headlines and body copy play crucial roles in this decision, so avoid embedding critical content in images, or at least back them up with alt-tags which display even with images turned off.

6. Clear, large CTAs
Design isn’t art – everything we create is intended to elicit action on the part of the user. To this end, prominent calls to action are critical for virtually every kind of email. Make sure they stand out, make sure they’re powerful, and make them look clickable. Everything about your CTAs should make people want to click on them – to do something, see something, make something happen. As a side note, larger CTAs may be more than a cosmetic consideration, now that mobile email consumption is on track to surpass that of desktop use – now’s a great time to make sure those buttons are big enough for touchscreen use.

7. Repeat your CTA
Don’t force your subscribers to scroll all the way to the top of your email just to take the action you’ve spent the last 600 pixels trying to persuade them to. A brief repeat of the main call-to-action at the end of your email can be super-effective at getting that elusive click.

8. Make it clear who’s sending the message
Most people are a little suspicious of strangers who don’t clearly identify themselves, and the same goes for email – make sure it’s clear right from the get-go who exactly is talking to your email subscriber. Make sure your logo is prominently displayed at the top of the email, and even better if your email ties in with your overall brand.

9. Quick Getaway – Treat your email like a homepage
Given how limited a window of time/space you have to persuade subscribers that your email is worthy of their time and attention, your goal should be to get them away from the email as soon as possible. Make sure to review your email design, and remove anything that keeps them lingering. Overly complex layouts, long copy paragraphs and superfluous design elements should almost always get the axe in favor of clean, simple messages that get straight to the point.

10. No more than 3 columns max
Given that you have a max of 600 pixels in width to work within, creating a layout with more than 2 columns limits what you’re able to create that’s still visually impactful. Do yourself a favor and keep it to no more than 2-3 content areas laying side-by-side.

11. Images on the left, text on the right
Assuming you followed our advice about the number of columns above, your next question may be how to arrange said columns. Studies have shown that readers’ eyes are attracted more strongly to striking imagery over text – even if the text is important. With this in mind, put the image on the left, so it’s the first thing your readers see – once they’ve satisfied their visual curiosity, they can continue reading your oh-so-important headline.

12. F is for Fast – Remember the F Reading Pattern
You can thank Web usability guru Jakob Nielsen for this gem. Nielsen tracked 1.5 million eye movements of 300 Web users, and found an astonishing thing: they don’t read!

Well, not everything, at least. Nielsen’s study found that Web users skip over content that appears unimportant, resulting in an F-shaped reading pattern. Relevant words and images on the left side of the screen tended to get more attention than things on the right. So what conclusions can we draw from this?
Lead with most important/relevant content
Start with keywords in subheads, and use bolded words & type treatments on the far left to break up the content

Images & Content

It’s one thing to get your email’s layout tuned just right, but the actual content that fills those spots is equally, if not more important. Set yourself up for success in creating an engaging message.

13. Stay on target – keep the message focused
Think about when you send a colleague an email – how many topics do you typically cover in one message? If you answered more than 3, you should probably rethink your (ab)use of the medium…

Emails are focused messaging channels meaning that the most effective content is limited in scope. Trying to cram too many different topics into one message results in a diluted response. Limit your message to no more than 3 different topics to concentrate your subscribers’ responses. Remember, you can always send a separate email.

14. Beauty is in the bandwidth of the beholder
It’s tough enough that your email likely appears to subscribers sans-images at first – the last thing you want is to successfully persuade them to trust you by opting to show your beautiful images… only to sit there waiting for your gargantuan hi-res photos to download.

Make sure you optimize your images for output – but don’t downgrade them so much that the compression introduces artifacts. As broadband penetration grows around the world, this is becoming less of an issue, but for now, exercise a little restraint with the file size.

15. Don’t use background images
Just how sweet does that lovely CSS3-shadowed type look when laid against that awesome wood texture you just yanked from iStockphoto? Hate to break it to you, but it’s actually pretty un-sweet, given that background images are stripped out of many of the major email clients. Avoid setting type against gradients, photos, patterns, or anything else that would require an image file to render. Remember: solid-color backgrounds only.

16. The magic of animation
Did you know that – despite the many limitations of email – you can embed animations in your emails? Wait, wait, close down Flash, and archive that Javascript snippet. If you want to do this, you’ll need to embrace that favorite medium of meme-fiends, the animated GIF. You could be forgiven for raising a quizzical eyebrow – the use of animated GIFs is, after all, pretty rare given the time-intensive nature of creating them frame-by-frame, and how easy it is for their file size to balloon with even simple effects.

But they say that restrictions foster creativity, and the few examples that are around literally grab your attention with their uniqueness:

17. Make your buttons ‘button-y’
As with any of your call-to-actions, make sure your buttons have weight and presence above all other elements in the message – especially since you don’t even have hover or down states to rely on in this context.

Image credit The Bridal Photographer

Image credit St. Theresa Catholic School

18. Paint a picture
Use large, stunning photographs and imagery to visually convey your main point in the message – this is especially important for retail emails, since image quality have a direct impact on your conversion potential.

This makes a lot of sense when you think about it. While shopping online, the only things a customer has to go on before clicking that chunky orange “Buy” button are the images and words on the page. They can’t touch the product or inspect it from any angle. Human beings tend to be tactile creatures, so the better your images, the closer you’re getting your customers to a real experience with the product. Tons of examples of retailers using top-notch product photography are popping up all over the Web these days, and a lot of these techniques are finding their way into the emails:

19. Look them in the eye
Using awesome images is great, but using awesome images of people is even better – the numbers prove it.

20. Make it quick
Keep your copy sections short – preferably 3 lines or less. Remember, there’s a whole landing page ahead of your recipients that can take on the whole burden of fully explaining your message, so you only need to tell them enough to decide to click through in the email.

Production & Finesse

In addition to the design tips above, knowing some of the challenges and pitfalls of their production can save you a lot of headaches down the road.

21. Test it on-the-go
As CampaignMonitor compellingly explains, as of this very month, your emails are now more likely to be viewed on a smartphone or mobile device, than on a desktop – so you’d better be making sure they look their best under those circumstances. Grab a colleague with an iPhone or iPad, and check it out!

22. Encourage engagement on other platforms
Let’s face it, no matter how awesomely designed your email is, it’s just not going to resonate with some folks. So give them a soft out: add links or icons for them to follow you and/or subscribe to your other main communication methods. Let your audience choose how they want to hear from you.

23. (Don’t) keep ‘em separated
Make sure the overall look and feel of your email ties in with the aesthetics of the page you’re driving them to. Give your subscribers overt visual cues that they’ve arrived at the right place – things like button styles, typography and color scheme all factor into this.

24. A glimpse of what’s to come
Banner blindness is everywhere – and it’s the fault of marketers everywhere. Over the last 12 years of online marketing, Web users have learned to tune out the blinking, flashing, swooping and fading ad banners of yesteryear, instead honing in on areas of interactivity on the page. Take advantage of this by changing the perception of your images by presenting them as the gateways to interactive elements in the email – like, for example, a content slider, or a video.

We tried this approach in a previous banner ad campaign, by creating an ad that resembled a content slider – check it out:

Banner ads typically convert at around 0.15% – this one converted at nearly 10 times that. Other evidence lies in heatmapping studies we’ve conducted on the homepage for SlideDeck.com – each time, we see large hotspots over anything resembling an interaction button, even if they’re embedded within an image. Use this knowledge for good, not evil!

25. Step right this way
Arrows are a fundamental part of all UX design, as they’re used to explicitly direct the user’s attention towards important elements or actions – in fact, we use them so much that we even made our own font to create arrows more efficiently. Within the context of email design, you can use arrows help lead your recipients by the nose to your most important info.

26. Large typography
Often with email, it can be difficult to find high-quality photos that convey your message appropriately, or you may find yourself crunched for time, and unable to stage a proper photoshoot. In cases like these, consider leading with an interesting and engaging typographic arrangement. Of course, you’ll most likely need to embed it within an image, thanks to the limited CSS capabilities in HTML emails, but it’s still possible to well-converting HTML emails even without dazzling photos.

27. Watch your borders
Web designers love their modules, sidebars and callout sections, and with good reason – they help distinguish important or related pieces of content to emphasize their points. Often, these sections are treated with types of borders to further separate them from the main body of the layout, however in email designs, this can require the use of excessive image slices, which add weight and complexity to the produced email. Do your developer a favor – minimize the use of tricky border styles, and drop shadows, which only serve to take up the limited width you have available for the layout.

28. Don’t forget the “View in Browser” link!
It’s simple – if all else fails, let your readers view the email in their web browser, where the frustrating quirks of email clients no longer apply.

What do you think, are there any important email design tips we’ve missed here? Let us know in the comments!

Comments
  • Great insight! Talk about a robust to-do guide! Now my only regret is thinking about all the bad email campaigns I’ve sent out prior to reading this.

  • Laura

    Hey just wanted to say thanks for this. Definitely a good reference for me as I’m designing my first email blast. Great examples too.

  • caroline

    Really good blog. A good starter in knowing the do’s and dont’s. Thankyou!

  • Great Post! You have defined such a great way that everyone can easily understand that requirements about email design. I don’t think so that you have missed out any points regarding email design. Thanks for sharing such a great article. Effective Email Design always gives better result.

  • Zac

    Great post Jason, thanks!

  • Rachel Ford

    Excellent. One of the best articles I’ve seen on tips for email marketing. I will save this for future reference. Thanks so much!

  • Amazing! Its truly awesome article, I have got much clear idea about from this post.

  • Kevin Capistrano

    Love your tips! All of them! I saved this link and I will read it over and over again.
    I am a Web/Graphic Designer and I love websites that expands my knowledge. Keep it up!

  • Great Tips from you here! One more way of having your email layouts in place is by designing master email template for your email service provider. We are doing one for MailChimp users. They can reuse template for every new campaigns and even customize it. Would you like to check out? http://www.emailmonks.com/mailchimp-master-template.html

  • Madison Hall

    Thank you so much for this article! Soooo helpful!

  • Bella

    Hi dear, hope your day has been splendid. I see you are in need of a logo for your driving school. I am a level two seller with lots of experience, I have worked for over a 100 clients on this site with a 5 star rating and positive rating. I understand your need and will help you create awesome designs for $10; you could get cheaper offers out there, but I believe in PROFESSIONALISM and wont render a cheap service at its expense. I am open to whatever questions you have…Best Regards….Bella

  • Amandalee McClellan

    The Brooks Brother link is broken.

    • Thanks for pointing this out, Amandalee – we’re currently working on a fix.

  • Martin Scurry

    Thank you Jason for useful information about banner design! I’m few years in internet marketing wracking my brain how to maximize effects. Simplicity and clarity is the most important, as you mention above.
    From now on, IMO simplicity is always priority above all else for me!
    Thanks for sharing again,
    Best regards,
    Martin