Responsive Email Design: 3 Tips for email marketing dummies

It’s been a long time since we’ve gone over the importance of responsive web design. Since then, another important principle has become a hot topic, and for good reason: responsive email design.

Yes, the time spent browsing the web on mobile is higher than ever, but that’s not all people do on mobile. They’re also checking their email, and quite frequently, according to statistics. In July, 44% of emails were opened on a mobile device.

So what does that mean for marketers?

Your email marketing better look good on the small screen of a smartphone, or your subscribers may ignore your message. Tweet this

That’s right. Your interesting, witty, and helpful content won’t even be read if your email isn’t optimized for mobile clients. Litmus has found that 80% of people delete an email if it doesn’t look good on mobile.

One of the greatest things about the popularity of smartphones is that you have the opportunity to reach your audience anywhere and anytime. But they won’t pay attention if you’re messaging isn’t optimized for their device. Instead, into the trashcan you’ll go.

Take a page from these companies. Make sure your emails are beautiful no matter how they’re read. Here are a few things you need to know about responsive email design:

Responsive email design is implemented by using a special set of CSS styles that will change based on how the email is being viewed. The styles, called media queries, will adjust the design by detecting the size of the screen of the device being used. This means that you don’t have to email design your whole email based on how it will look on a smartphone screen. Instead, the styles change based on whether the email is being viewed on a computer, tablet, smartphone, etc.

If you’re using templates provided by your email service provider, there may be a section of templates either titled “mobile-friendly” or “responsive.” For example, MailChimp our own provider has responsive templates that work exactly like the rest of their templates.

If you’re coding the  email design of your marketing emails yourself, or just want to understand responsive email design more, here are 3 basic principles:

Recommended for You

Webcast, March 7th: How to Scale Ads Masterclass

Lose the sidebar

On mobile, everything in your email becomes narrower and longer. This will make a thin sidebar look like nothing more than a line. And if there’s a lot of text in it, it will be pretty hard to read. Readers might see one or two words per line, and longer words split between two or more lines. Basically, it won’t be pretty.

Instead, emails on mobile look best with just one column. You’ll frequently see sidebar content moved down to the bottom of the email or excluded altogether. I’ve seen some emails use multiple columns after the email’s introduction, but they stick to a few and keep the content short so that the columns look more like a grid.

Make links and buttons big

You’ve heard people complain about “fat finger syndrome,” right? Even if you don’t know the term, you’re probably familiar with it. It’s probably even happened to you. You’re browsing on your phone or tablet, and you tap something that’s a link. You think you’re going to end up one place, but instead, you’re somewhere else because the buttons or links were so small you chose the wrong one.

You should make links and buttons big enough for people to easily see what they’re tapping on when two or more are close together. The smallest any clickable tap-able area should be, according to Apple’s guidelines and best practices, is 44 x 44 pixels, regardless of whether it’s a text link or a call-to-action button. Additionally, try not to put two or more too close together, as that will increase the chances of your subscriber tapping the wrong link.

Invert that pyramid

Just like any copy, you want to write in an inverted pyramid style most important info at the topbeginning, since it’s easier to get someone to start reading something than to get them to finish it. Most people stop somewhere in the middle. To make sure they still hear the most important things you have to say, put that first.

Of course, you still want them to scroll through the whole email. So in that beginning copy, or maybe the subject line or pre-header, provide one or two teasers to get people interested in the content further down. For example, if you’re including an offer or coupon, put that in the bottom but mention it somewhere else. That will surely get people to scroll!

What else do you think is important about responsive email design? Share your best advice in the comments.

We really hope this article helped you. Now you can also help others to learn by sharing this article.: