Tuesday Big Data Series · Wednesday Marketing Series

The Changing Inbox – Responsive Email Design

Responsive Email Design is an approach to design emails which aims to provide optimal viewing and interaction experience i.e. easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices (from desktop computer monitors to mobile phones).

content-is-like-water-1240

Image Source

Why should you shift to Responsive Email Design?

  1. The number of emails opened on mobile devices have increased rapidly and is on the rise.

Screen Shot 2016-02-16 at 2.11.09 PMStatistics Source

2. Studies have shown that people look at their phones an average of 150 times a day. This gives email marketers a big reason for their emails to properly render on mobile devices.

3. People delete emails if it doesn’t render well on their mobile devices.

Screen Shot 2016-02-16 at 2.30.29 PM

People delete an email if –

  • The text is too small to read and interact.
  • The images are not loaded correctly.
  • The content is not well-formatted.
  • The content is irrelevant.

4. Open rates increase when emails are responsive.

5. It’s faster to build responsive emails.

How to implement Responsive Email Design?

Responsive Email Design uses a special set of CSS style called as media query or @media. They act like conditional statements or dynamic rules which can detect screen size of a device and turn on different sets of rules based on that screen size.

For example the media query for iPhone 6 and iPhone 6+ would look like this –

iPhone 6

  • For Portrait and Landscape – 

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2) {

}

  • For Portrait – 

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

  • For Landscape –

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

iPhone 6+

  • For Portrait and Landscape – 

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3) {

}

  • For Portrait – 

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: portrait) {

}

  • For Landscape – 

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: landscape) {

}

For laptops with retina and non-retina display, the media query would look like –

  • For Non-Retina Screens –

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1) {

}

  • For Retina Screens –

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 2)

and (min-resolution: 192dpi) {

}

What can you do with Responsive Email Design? [Tweet this]

  • Change navigation
  • Change font or font size
  • Change colors
  • Change Layout
  • Change image size
  • Change or hide content
  • Add padding
  • Change hierarchy

Don’t forget to test your responsive email design on various platforms and email clients to be sure it displays correctly across all devices. Responsive Email Design is another step forward to achieve high open rates and high click-through rates.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s