Email today is viewed in a myriad of different ways, from different email clients, to different browsers to different devices and then on to different environments. The experience you provide to the recipient can draw customers in or drive them away, but it can be difficult to ensure they receive the best experience for the device they’re using at the time they want to view your message.
While many websites are now optimised for the device they are being viewed on, email messages still lag behind, with many companies not yet using Responsive Email Design throughout their email campaigns. However, best-in-class companies are improving their conversion rates by delivering immersive email experiences that are tailored to recipients' needs and their viewing device.
These template frameworks are intended to be used by The Co-operative Group's roster of agencies to help transform the end recipients’ email experience as well as strengthen overall customer relationships from the email inbox from which ever device they are viewing the email on.
These templates are based on work with numerous desktop, mobile and tablet implementations utilising Communicator. As we’re sure you are aware, mobile devices and their capabilities are forever changing and likewise so are the techniques used to make sure that emails render correctly on the range of available email clients, because of this Communicator will complete updates to these frameworks at least once a month to ensure that all emails sent out by The Co-Operative Group adheres to the best practice available at that time.
Those of you who are well versed in designing emails will already know that because of the lack of any email standards, getting an email to render pixel perfect across every single email client is nearly impossible, and the same goes for making emails mobile friendly.
Responsive emails use media queries, 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.
As you may know, media queries are not supported by every mobile email client - for example, Gmail will not show the responsive version of your email, on any platform. For more information on which email clients do and don't support responsive email design, please see below:
| Media Query Support | |
|---|---|
| iOS (iPhone/iPad) native client | ✔ |
| iOS (iPhone/iPad) Gmail app | ✘ |
| iOS (iPhone/iPad) Mailbox app | ✘ |
| iOS (iPhone/iPad) Yahoo! Mail app | ✘ |
| Android 4.3 native client | ✔ |
| Android 4.4 native client | ✘ |
| Android Outlook Exchange via native client | ✘ |
| Android Outlook.com app | ✔ |
| Android Gmail app | ✘ |
| Android Yahoo! Mail app | ✘ |
| Gmail (Android Browser) | ✘ |
| Outlook.com (Android Browser) | ✘ |
| Yahoo! Mail (Android Browser) | ✘ |
| Windows Phone 6.1 | ✘ |
| Windows Phone 7 | ✘ |
| Windows Phone 7.5 | ✔ |
| Windows Phone 8 | ✘ |
| BlackBerry OS 5 | ✘ |
| BlackBerry OS 6 | ✔ |
| BlackBerry OS 7 | ✔ |
| BlackBerry Z10 | ✔ |
| Kindle Fire native client | ✔ |
Up until early 2014