How to Design Responsive Emails

“More than half of all emails are read on mobile devices.” You’ve probably grown tired of reading this sentence on hundreds of blog pages and hearing it everywhere.

You’ve probably thought “Yes, we all know that people can’t live without their phones. Do you have anything new to say?” But guess what? With every new stat coming up every month, this has proven to be an absolute truth.

With this in mind, having your emails designed in a way that’s responsive to all screen sizes is an absolute priority! Without responsiveness, your emails would be difficult to read, the banners would be small and unreadable, your CTAs would be impossible to be found, and the list goes on…

Combine all of those issues, and you get a user who becomes uninterested and they simply click away. They don’t want to be bothered by having to zoom in on the pictures, then look for the CTA, etc. They want to open the email, take a look at it, make a decision, and simply continue with their day.

According to Mailchimp, unique clicks among mobile users for responsive email campaigns climbed from 2.7% to 3.1%, which is a 15% increase in actual clicks! And that’s just WOW!

And we have something even bigger for you! Research conducted by BlueHornet showed that if people keep receiving emails whose design is not responsive, 30% of subscribers would unsubscribe after a certain period. And 80% of the emails that weren’t responsive didn’t even get opened!

In case you aren’t convinced enough, here are some key reasons why you should do it:

• Improved user experience
• Increased conversion rate
• Higher Click-to-Open rate
• Reduced Unsubscribe and Spam Complaint Rates

• Stick to a single-column layout. It's going to be easier for readers to scan through your email if they can just scroll straight down.

• Use the “Thumb rule” which is basically to make sure that your CTAs and links are always clickable by not pushing them together. If the user's thumb covers both CTAs, you're doing it wrong.

• Prioritize content according to the display. When adjusting to a smaller screen, you may want to consider what content to prioritize for the best viewing experience. When necessary, you may choose to hide content for your mobile layout.

• Increase text size. Double-check your banners and live text and make sure they are all easily readable on mobile. A font size of 16px should bring you better legibility.

• Have responsive images. Either by making the block in your editor responsive or by creating a separate version of the image just for the mobile view. You have to make sure that your subscriber is getting the full experience on all devices.

• Test x1000! Test your devices rigorously on platforms like Email on Acid to make sure that all possible devices are getting the same treatment. (Pro tip: Check your analytics and see on which devices your emails are actually getting opened, and then optimize those devices with special care. You can pay a little bit less attention to the rest and, therefore, save time!)

And last but not least, take a look at 2 side-by-side comparisons of email designs created especially for our clients.