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).
Why should you shift to Responsive Email Design?
- The number of emails opened on mobile devices have increased rapidly and is on the rise.
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.
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.
MarketEng 