7 Email Design Must-Dos for Today
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:
- Majority of Email Is Opened on a Mobile Device: According to Kahuna data, 86 percent of emails in Q1 2016 were opened on a mobile device. (Opens as a PDF)
- 75 percent of Gmail Users access their accounts on mobile devices: Gmail now has 900 million users.
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.
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.
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.
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
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.
Patrick Fultz is the President/CCO of DM Creative Group, a creative marketing firm producing work across all media. He’s an art-side creative, marketing strategist, designer and lover of all things type. His credentials include a degree from Parsons School of Design with 15 years of teaching at his alma mater, over 40 industry creative awards, and he previously served as President of the John Caples International Awards. Always an innovator, Fultz was credited with creating the first 4-color variable data direct mail piece ever produced. He continues to look for innovative ways to tap the powerful synergy of direct mail, the web, digital and social media.