7 Email Design Must-Dos for Today

The bottom line is email can run our lives. Because this is the case for many people, we need to design marketing emails to make life easy for our recipients. Here’s my list of must-dos to make it easier to review emails, and more importantly, to get positive results.

Patrick's email blogEvery morning, I try to be at my desk by 8 a.m. The first thing I do is log in to my computer, pop open my email application and see how many emails I’ve got to review.

Some mornings, it’s not too bad. Some days I’ve been bad. I reviewed emails in the evening. I try not to do that. Otherwise, I tend to work all night. On the other hand, if I don’t review emails the evening before, I have many more to review in the morning.

The bottom line is email can run our lives. Because this is the case for many people, we need to design marketing emails to make life easy for our recipients. Here’s my list of must-dos to make it easier to review emails, and more importantly, to get positive results.

Your Layout Must Be Responsive

I’m not talking emails that get response, although that’s obviously the goal. I’m talking about email layouts that change size based on the device the email is reviewed on. Today, large numbers of people are using their smartphones to review their emails. The stats don’t lie:

Patrick's email post graphic

Responsive design results in a nearly 15 percent increase in unique clicks for mobile users from a 2.7 percent average to 3.3 percent, according to Litmus and MailChimp. 

Email designs for desktops are usually 600px wide, because 600px avoids some of the limitations of email applications and takes into account “browser chrome,” the space around email not allowing the email to take the full width of the screen.

The optimum width for mobile is 320px (640px for retina screen).

To help your design on mobile devices, stick to single-column layouts. Multi-column layouts usually appear squashed. A single-column design simplifies your layout and helps to focus your message for the recipients, makes it easier to read and makes you email cross-device compatible.

Don’t Forget the Preheader

This has to be one of my biggest pet peeves. Too many emails today still do not use a preheader or snippet and I don’t understand why.

The preheader is the first thing you see in an email application’s preview pane. You know when someone has ignored it when you see this line in the preview pane: “If You’re Having Trouble Viewing this Email …” This is also the title of a blog I wrote on preheaders and will give you more detail than I’ll do here.

Patrick's email preheader example

This example shows a preview pane with the top email not using a preheader and the second that does.

Highly Visible Call to Action

This almost doesn’t need to be said, but I’ll say it, anyway.

Call to actions or CTAs should be above the fold. Content above the fold gets 84 percent more attention. CTAs should have a lot of attention given to them and be written plainly and clearly. Also, make sure to use active language. Tell people what to do and they tend to do it.

You can learn even more about CTAs at my Design DR blog post “5 CTA Button Design Best Practices.”

Don’t Bury Your Branding

You’ve got a couple of seconds when a person opens your email to understand who the email is from. How best to do this … think about how we read. We start at the top-left corner and read left-to-right. The obvious conclusion is the top-left corner is the obvious place to place you logo or branding. It’s not a set rule, but it works. You can also consider placement in the top couple of inches (also prime email real estate) for brand placement as it works with your design.

Patrick's Converse email

This Converse email takes advantage of branding in two ways. The upper-left logo placement and logo placement on the video play artwork.

Size Matters … Font Size, That Is

Make sure you use a font size that is easily read. I usually recommend 14px as body text and 20-24px for headlines and subheads.

Remember: A large percentage of email will be read on a smartphone. I will also say the font you choose will affect the size equation. Some fonts read smaller or larger than others. Keep that in mind when you set the font size, as well.

A Picture’s Worth A 1,000 Words … Unless It’s Not Seen

Images are wonderful in an email. They ad great visual impact and deliver 1,000 words, right away. But we need to keep in mind that many email clients have images blocked. There’s nothing we can do about the blocking, but there is something that can be done to minimize the damage: Use alt tags.

“Alt tags” or “alt text” (short for alternative text) is the text that will show when an image is blocked. This is not automatic. If your designer does not program alt tags, you’ll see text where images would be displayed.

You can simply apply alt text to your images and call it a day and the text you apply will show. You can also specify the color behind the text and the text itself. This gives you some minor control of how it looks. You should always take advantage of this technique. To lean more, Litmus has a wonderful blog about the options: “The Ultimate Guide to Styled ALT Text in Email.”

You just need to keep one thing in mind: We are talking about email. Not all email applications support styled alt text. The Litmus post spells this out quite well.

Patrick's alt email Litmus


I always make sure to personalize emails designs with name, text and images.

The easy part is using the recipient’s name. You have this info and it’s easy to implement in the subject line, in the preheader and the email body. According to Campaign Monitor, personalized subject lines are 26 percent more likely to be opened.

Also, depending on your data, you can also personalize based on:

  • Products they’ve ordered in the past,
  • Life events, like birthdays and anniversaries
  • Connections, like clubs they belong to, if the are veterans, Moms, men, women, etc.

Personalization can also be imagery. Using the list above, you can change the images used. For instance, if you know the person’s name, sex, car purchased from you and where it was purchased, you can create an email with the following things personalized:

  • Name: Place their name in the subject line, headline of the email and in the body text.
  • Sex: You can change the products offered and colors of the artwork to be more male- or female-oriented.
  • Car Purchased: You can use a picture of the car they purchased and if you have the info, the model and color of their car.

You can see the power of personalization and how it can make your email more relevant to the recipient. By segmenting a campaign, according to the DMA, marketers have found a 760 percent increase in revenue. Add a highly personalized element to the segments and who knows what the potential might be.

Don’t Forget the Footer

Lastly, do not forget the footer. They can increase your creditability. Yes, this is important. The fastest way to look like spam is to not include a solid footer. You must include:

  • Your organization’s name and your complete contact details
  • A clear, easy-to-find “unsubscribe” link
  • Include links to your main website or key service/product pages
  • Make it easy to share the email with a forward-to-a-friend link, and social media links
  • Add a line about why they are receiving the email, i.e. membership in a loyalty program or other such reasons

Patrick's forward-to-a-friend email

We’ve all gotten emails with poor footer information. My biggest pet peeve is no unsubscribe link. Right behind that is an unsubscribe link that takes me to a page that I need to log into to “manage” my email preferences. This is a bad user experience.

This is my basic list for email design. Can this change? My answer is “yes,” but I encourage you to test, test, test. There is not such thing as a hard-and-fast rule. Everything changes. Email applications, they way people respond, what’s in favor this season or addition of new technologies. Always look forward and always challenge designers and your own assumptions.

‘If You’re Having Trouble Viewing this Email …’

How many times have you read this in your email preview window? “Too many times” is the only right answer. The preheader text seems to be the most under-utilized email tool — and, yet, one one of the most important.

How many times have you read this in your email preview window? “Too many times” is the only right answer.

The preheader text seems to be the most under-utilized email tool — and, yet, one of the most important. Sometimes called a snippet, Johnson box, or preview message, the preheader appears in the preview pane or screen of all email applications.

Preview Pane labeledMany marketers often do not use a preheader — an email’s most valuable piece of real estate. We’ve all read this in our email applications — “If you’re having trouble viewing this email …” As the example shows below, the preview pane shows the first text it sees in the email. In this case, notice “Trouble viewing this email? View it online.” Sadly, this text gives a reader no idea of what this email is about.

Bad preheader from PaperSpecsYou’ve only got a few seconds to interest a reader enough to open your email. Use the combination of your subject line and preheader to encourage a reader to open your email.

2 Ways to Implement Preheader Text

Mission BBQ visible preheaderVisible Preheader: The easiest and simplest way is to place a block at the top of your email that you fill with text. This can be a block in the HTML that appears before any other text in the email. In the example above, the text appears at the top left hand corner with the “difficulty reading this email” section in the upper right hand side.

Hidden Preheader text from ThreadlessHidden Preheader: Some designs might not work with a visible preheader block. In this case, you’ll need to code using inline styles. If you’d like to do this, you can find the code here: Email on Acid.

Make Preheader Text Work Harder for You
Preheaders can enhance your subject lines in a number of ways. In the same way you test your subject lines, you should also test your preheader text. Here are some ways you can think about your preheader text for testing:

  • Subject Line Extension: Make your preheader an extension of your subject line. This will extend the amount of space you have to convince your reader to open your email.
  • Incentive/Offer Text: Use the preheader text to define your offer or discount.
  • Personalization: Try just personalizing your preheader; it’ll feel more like emails from friends and family, and could feel less obtrusive than the way a subject line might.
  • Call to Action: Tell email recipients what do with a clear call to action. What’s a better way to get them to open the email?
  • Tease: Write copy that teases and makes customers wonder. Their curiosity will get the best of them.

The Bottom Line
Preheader text is too valuable to not think about it. Preheaders help customers understand your message quickly, as well as give them an incentive to open your messages. Emails with a preview pane showing “Preview it in your Browser” sadly wastes this space. To drive your open rates higher, put as much care and thought into preheaders as you put into your subject lines.

Creative Cage Match: Lindy Bop vs IKEA

For this round of the Creative Cage Match, let’s see how a UK-based, vintage-inspired clothing e-tailer stacks up against the the world’s largest furniture retailer when it comes to holiday-inspired email messaging.

There’s a reason that pro-wrestling is so popular — and it’s not just the juicy drama and bespangled costumes. People love a good fight, and have for millennia, dating back to the gladiators of Rome and beyond.

So, once a month I’m going to select two marketers and toss them into a Creative Cage Match. I’ll be looking at everything ranging from email to direct mail, website to mobile site. It’ll be a mix of objective and subjective, and each time a marketer will walk out of the ring triumphantly.

The holiday season is upon us, whether you like it or not. Bring on the shopping anxiety, the 24/7 holiday music, the office parties, the family functions, the gift wrapping, and did I mention shopping anxiety?

Let’s see how a UK-based, vintage-inspired clothing e-tailer stacks up against the the world’s largest furniture retailer when it comes to holiday-inspired email messaging.

In this corner we have Lindy Bop, a relatively young — at four years — e-tailer based in the UK specializing in retro women’s fashion. This player makes its mark in the vintage/pin-up/rockabilly world by offering affordable prices and high quality goods (I should know, I own five fantastic Lindy Bop dresses).

Across the ring, we have Sweden-based IKEA, with more than 370 stores in 47 counties as of August 2015. While the company does have an online component, most consumers know IKEA for its massive yellow and blue stores, full of everything you could possibly need for your home (including Swedish meatballs … I should know, I have a bag of them in my freezer right now).

Email vs. Email
In late November, the following email from Lindy Bop hit my inbox with the subject line: “Find Your Perfect Party Dress At Lindy Bop.

All right, pretty tame in the way of subject lines, but the e-tailer comes back strong with this preheader: “Glam & gorgeous party dresses from just $45.99.”

I like party dresses, I like getting glammed up during the holidays, and I especially like the $45.99 price point.

Lindy Bop Holiday email

The overall look and feel of the email is clean. I’m not overwhelmed; instead there is a linear progression through the message as you scroll. First, the holiday dresses; next, a sale of 30 percent off select items; then, some suggestions for items to complete your look, ranging from petticoats to gloves; and finally, a banner with all of Lindy Bop’s social sites. Clean and to the point, while also offering a handful of product images to catch my eye.