10 Responsive Email Design Tips

We’re always on the lookout for responsive email design tips to share with you in our collective effort to make email design better. This week, we stopped by a Designing Responsive Email seminar led by Noble Desktop, one of New York’s top digital design training institutes, to connect with email marketers and get the lowdown on the latest design tips.

 

The seminar was a good reiteration of many of the basics we’ve covered here in our Email Design Workshop blog: how design impacts an email campaign’s success rates and how to turn responsive design limitations into strengths. Thank you, Noble Desktop, for the important reminders and great inspiration, which should be used for all types of emails, responsive or not (though, of course, by using our intuitive, drag-n-drop BEE email editor, all of your emails are automatically responsive!).

Here are the top 10 responsive email design tips we took away from the seminar:

1. Make your responsive email a teaser.

We know there’s a lot you want to communicate to readers on your mailing list about your upcoming event, newest product, biggest sale, or company announcement. But your email is not the place to get into detail. Think of your email as a teaser for the main content of your message—which can be found on your website after readers tap your call-to-action button. Here’s a great example from Best Buy: the message is short, focused, and to-the-point, leading readers directly to the CTA.

responsive email design best buy

2. Create a hierarchy within your responsive email.

Create focus and organization in your email by telling your story in a hierarchical fashion. Envision how your message could be structured using the inverted pyramid model.

Inverted-Pyramid-Method

Campaign Monitor shows us a great example of this method in action in an email from InVision:

example pyramid

Each section begins with a compelling visual element, followed by a short, bold headline with supportive text that leads directly to a call-to-action button making it clear what to do next. It’s an excellent way to communicate quickly and get click-throughs from readers with short attention spans (i.e., all of your readers).

3. Your CTA should never say “Click here.”

Don’t waste space by telling readers where to click, especially because on mobile devices, readers are tapping, not clicking. “Click here” isn’t really a call to action. Skip it and tell readers directly what they should do. Use a clear, direct action verb—and be concise. Try using personal pronouns like “my” and “your” that make your message friendly and engaging. You could try: “Reserve my spot now” or “Get my free ticket.”

Read more about how to optimize CTA buttons in our post How to Design Bulletproof CTA Buttons in Email. Here’s a great action-oriented CTA button from Skillcrush:

Screen Shot 2016-01-15 at 8.40.31 AM 4. Never use a single large image in a responsive email.

In other words, avoid the pitfalls of the image-only email. Using just one large image in your email will increase your spam score, so the email may not make it into readers’ inboxes at all. It also means your email won’t be fully responsive. And if your image doesn’t load, readers will only see ALT text. The solution? Always use a balance of text and images in your email.

5. Design on a grid.

Grid-based designs are easier to make responsive. That’s because HTML emails are built with tables comprised of rows and columns. Email editors that capitalize on modular template design—like our BEE email editor—automatically help you arrange content in a grid while providing plenty of flexibility in arranging content. In a previous post, we checked out this infographic from an Aveda email and drew up lines to show how the content fell into four quadrants:

Screen Shot 2015-10-21 at 10.44.04 AM

The original content was all one image, but by breaking it up into 4 separate images on a grid, we made it mobile responsive (see the full tutorial here).

Screen Shot 2015-10-21 at 1.57.33 PM

Screen Shot 2015-10-21 at 1.57.19 PM

6. Remember ALT text.

Be prepared for your images not to load. Some email clients don’t automatically load images, and some subscribers don’t enable auto-loading for security purposes. Here’s how that original Aveda email above looks with images disabled:

ScreenShot1417

ALT text allows these readers to understand your message, even without images. When writing your ALT text, remember to keep the text short. If it breaks onto 2 lines, some email clients will not display it. If you can, style your ALT text by adding styling to the image (your image won’t look any different, but when your ALT text appears, it will be the font, color, and size you specified).

7. Your email is not a website.

If you follow Tips #1 and #2, then you’re probably in good shape. A focused, succinct email should be designed for clarity and should communicate a single call to action. So there’s no need to crowd the email, or the header, for example, with extraneous links, menus, and messages, like in this example from Target:

header target

Go with simplicity. And, remember to use the data you have to make customizations. When someone comes to your company’s website, you don’t know much about that visitor. Your mailing list, on the other hand, is another story. You have data about your subscribers. Use it to tailor versions of your campaign for segmented, targeted portions of your audience to improve conversion rates.

8. Be selective with custom fonts.

Most email clients will not support your brand’s custom font. Use them sparingly to make a statement, like in the main header of your email, then incorporate email-safe fonts for the body of your message. Here’s a great example from Mashable: the blue “Mashable / Alerts” header is in their brand font (and is displayed as an image) but the sub-header is plain text with a great HTML background color (and the following header under the images is plain text, too).

mashable

Your selection of email-safe fonts is somewhat limited, but when in doubt, go with a serif. Many brands use Arial, Helvetica, and Verdana.

9. Don’t forget preheader text.

An email’s preheader is a small amount of text that follows the subject line in the inbox. Here’s how to customize the preheader text from the MailUp blog.

Subscribers use preheader text as a screening tool, deciding whether or not the email is worth reading based on just a few words, so using compelling preheader text can increase open rates. The first plain text that appears in your email will show up as preheader text.

preheader-text-in-email

But it needs to be short; Campaign Monitor advises keeping your preheader text to between 40-50 characters. Once the email is open, preheaders can be visible or hidden.

10. Use animated GIFs wisely.

Animated GIFs are powerful visual storytelling tool that work seamlessly across most email clients. Outlook is the big exception—Outlook 2007 and newer will only display the first frame of your GIF (it won’t animate), so plan for that when you’re designing. Banana Republic uses a question mark as its first frame in the animated GIF below so that even without animation, the message makes sense:

Screen Shot 2015-12-14 at 2.41.34 PM

And here’s the GIF in motion:

banana

Depending on the number of frames and their resolution, GIFs can turn into large files. Oversized GIFs can be slow to animate and eat up data plans on mobile. Minimize the size of your animated GIF by animating only what needs to be animated; as the frames rotate, the fewer pixels change, the smaller your file size will be. Read our Top 4 Tips for Using Animated GIFs in Email post for more info.

Questions? Comments?

And now it’s time to start designing some clear, compelling responsive emails! Let us know if you have any tips or questions in the comments, and give the BEE email editor a try for your next campaign. It’s free, requires no registration, and all emails designed with BEE are 100% mobile responsive (and you won’t need to code a single line).

Save

  • This is cool. I am in the process of learning in a design course. After this, I also want to try other things like email designs and other related stuff. It will be fun and interesting.

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor