The Hong Kong Arts Centre and Surfman have been worked closely together for three years in the areas of website maintenance and email mass sending...
Responsive email design - 28 Oct, 2013
Responsive email design has been growing steadily in popularity, and it’s no surprise as to why: 47% of email opens are on a mobile device, and some brands see upwards of 70% of their emails opened on mobile. These brands turn to responsive design techniques to create better experiences for their subscribers, and in many cases, increase their click and engagement rates.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.
 
Re‧spon‧sive de‧sign (noun)
A collection of techniques, such as media queries, fluid grids, and fluid images, which aim to provide the optimal viewing experience across various platforms:
‧47% of email opens are on mobile devices, yet many emails are only designed for desktop viewing. Text is often difficult to read, details in images are hard to see, and links are impossible to click on mobile.
‧Studies have found that people look at their phones an average of 150 times a day. These brief interactions mean that you must focus on getting your point across quickly.
‧80% of people delete an email if it doesn't look good on their mobile device
On average, 47% of openers read or skim read emails.
 
The possibilities are endless, but some common uses of responsive design techniques include:
‧ Changing hierarchy
‧ Changing navigation
‧ Enlarging fonts
‧ Changing colors
‧ Changing layout
‧ Scaling images
‧ Adding padding
‧ Changing or hiding content
How To Implement Responsive Email Design
Responsive email uses a media query, also known as @media—a special set of CSS styles that act like conditional statements or dynamic rules. Carefully planned, they can help make emails more readable on different screen sizes.
Media queries detect the screen size of a device and then “turn on” different sets of rules based on that screen size. These can be very simple to implement or quite complex, depending on what you’d like to accomplish. They do require more planning and testing than standard emails, and don’t work in all email clients.
Support For Responsive Email
Don't forget to test your responsive design in a variety of email clients and mobile devices to be sure it displays the way you planned—differences in devices, manufacturers, applications and screen sizes can all impact how your email appears. With the help of responsive design, you can simplify your message and make it easier to read and interact with on the small screens of mobile devices. Responsive email design offers benefits such as increased usability, higher read rates, along with better performance and click-through rates. Responsive emails are supported by:
‧ iOS Mail app
‧ Android 4.x Email (OEM) app
‧ Windows Phone 7.5
‧ BlackBerry OS7
‧ BlackBerry Z10
Responsive emails are not supported by:
‧ iPhone Gmail app
‧ iPhone Mailbox app
‧ iPhone Yahoo! Mail app
‧ Android Gmail app
‧ Android Yahoo! Mail app
‧ BlackBerry OS5
‧ Windows Mobile 6.1
‧ Windows Phone 7
‧ Windows Phone 8
In essence it gives us intelligence on a part of the conversion chain that used to be a mystery: the "read" part of the open - read - click - convert chain of action. And, of course, you can compare numbers between emails to pull out patterns on what's working (and what isn't).
© 2004 - 2024 Media Monitor Technology Limited. All rights reserved.
Policies    |    Privacy Statement