Infographic: Creating a Responsive Email Design

Mobile email use is increasing, with about 50% of email being opened on a mobile device. The majority of mobile email opens are on iPhone, with Android and iPad remaining relatively equal.

It’s crucial that marketers understand this shift and adapt accordingly. Why? Because even if you write a perfect email with beautiful images and flawless copy, it still doesn’t mean it’ll get read. A survey conducted by BlueHornet asked users what they would do if a mobile email didn’t look good. 80.3% said they would delete it, and 30.2% saying they would unsubscribe.

If your email doesn’t look good, people will delete it. Every email you send needs to look perfect, regardless of device.

So how do you send the same email to everyone on your subscribership list and ensure that it formats well?

By using responsive design practices.

A “responsive” email (or website) means that it provides optimal design across devices. It “responds” to the device being used. When viewing on mobile, a well designed responsive website ensures the user doesn’t have to pinch and zoom. A responsive website is a usable website.

Responsive emails ensure that what looks like this on desktop:

twitter email on desktop

Looks like this on a mobile device:

twitter email on mobile with responsive design

The design of the email changes to fit on a mobile device. The images adjust to the appropriate size and the CTA moves from being made for a click to being made for a tap. Also notice the copy change on the CTA. When on mobile, the CTA says “Get the app and try it now”. It’s a much more appropriate and targeted CTA.

Want to learn how to make your emails like this? Check out this infographic, courtesy of the folks over at Litmus:

responsive-email-mobile

About the Author: Zach Bulygo is a blogger for KISSmetrics, you can find him on Twitter here. You can also follow him on Google+.

  1. If you want ton grab your business through e-mail marketing then it’s necessary that you should be aware of about all the latest changes and how user’s will like to receive your mails. It’s a nice information provided here about mobile devices e-mail marketing. Since all we know that mobile devices are mostly uses these days so we need to make strategies accordingly.

  2. This was interesting post, This responsive e-mail will changes the e-mail marketing business. it will be so helpful for me as i am a digital marketing expert., Thanks a lot for this post.

  3. I hear more and more often about info-graphic these days, and use it as an email it is a great idea.

  4. Great post.Sounds really informative and helpful.Thank you for sharing.

  5. Hey Neil, how about a post on how to come up with infographic ideas. Just like you wrote a blog on creating blog content? I don’t want to look stupid but I don’t have any clue what I should be providing to a designer for an infographic.

  6. This is a great post and infographic! With all the talk of responsive websites, it seems that email on mobile devices is being ignored. It’s great to see this being addressed by KISSmetrics.

    If you’re looking for responsive email templates, check out Zurb, which offers some great ones for free: http://zurb.com/playground/responsive-email-templates

  7. Just wanted to congratulate you on the infographic. Will be implementing this.

  8. Over half of our email base is opening on mobile, which makes the case for responsive design – however you cannot stop there. If you look deeper into your analytics you’ll find many of your mobile users are on devices that don’t support media queries – this is where the responsive design lets you down. Fluid HTML5 Design is the next step that works across all devices and still maintains clean automatically adjustable content and layouts.
    I promise you’ll be reading about this over the next few months as it become more widely understood that responsive design still only caters for a sub-group of mobile users.

19 comments

Please use your real name and a corresponding social media profile when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →