Creating a Responsive Email Design [Infographic]

More than 80 percent of people delete or unsubscribe to emails that don't look good on mobile. A responsive email provides optimal design across devices.

responsive email

responsive email

A responsive email (or website) responds to the device being used and provides optimal design across devices.

A survey conducted by BlueHornet asked users what they would do if a mobile email didn’t look good; more than 80 percent of respondents said they would delete it and another 30 percent said they would unsubscribe.

Fifty percent of email is opened on a mobile device. So even if your email is written perfectly and includes compelling images, it must be adaptable to multiple screen formats, which means creating a responsive email design.

Responsive design changes according to a particular format — including text, images and resizing for clicks to taps. The copy also changes depending on the device and demographic (“try the app” on mobile, for example). When viewing on mobile, a well-designed responsive website ensures the user doesn’t have to pinch and zoom.

Litmus Software created the following how-to guide for responsive email desgin. From Litmus:

The foundation of responsive email design is built upon CSS3 media queries, which can be confusing and complicated to learn. And like everything else in email, they don’t work quite the same way in our inboxes as they do on the websites we view in browsers.


Enter our how-to guide for responsive email design. See what is possible with responsive email design, how to implement media queries in your design, and support for responsive emails in various mobile email applications. When you’re ready to move to the next step, check out comprehensive list of mobile email resources, which includes templates, tutorials, responsive case studies, and more.

Check out the infographic below: [click to enlarge]

responsive email design