Responsive Design refers to a collection of techniques, like media queries, fluid grids, and fluid images, that aim to provide an optimal viewing experience across desktop and mobile platforms (phones, tablets, etc.). This means that your mailings look appropriate no matter whether they're viewed on a desktop, phone, or tablet.
NOTE: Responsive design is powerful, but implementing it in a template requires the knowledge of an experienced HTML designer. Whether this is a staff member or a consultant you've hired, make sure you're working with someone with experience in responsive design.
Common Applications of Responsive Design
Here are some common applications:
- Scaling images
- Changing layout
- Changing navigation
- Enlarging fonts
- Changing or hiding content
- Adding or deleting Padding
- Changing colors
- Changing hierarchy
Responsive Design Best Practices
Below are some common best practices to know about before you dive into the world of responsive design.
- Mobile versions generally consolidate to one column layouts (unlike the multiple-column designs that work well on desktop platforms).
- Always test your responsive designs on a variety of email clients and mobile devices to be 100% sure that they display the way you planned. Differences in devices, manufacturers, applications, and screen sizes can all impact how your mailing renders.
- Always define your media queries in the head tags of your design. For media queries to work on mobile, the CSS rule !important; needs to be applied to each style. If a particular style isn’t working, check to see if this rule is in the HTML head parameters.
- Media queries can be separated by device screen sizes (phone versus tablet, for example), but there’s usually only one format for mobile phones (maximum width of 480 pixels).
- All responsive templates need a DOCTYPE to function. If something isn’t working, you may not have set a DOCTYPE in the HTML parameters.
- Your mailing client or application determines responsive support (it’s a common myth that media queries and responsive designs are based on the device or operating system in use). It’s possible to view the same mailing on the same device and see varying results in different apps.
- If your images don't stack properly, you may need to add a class to your table or image tags.
Responsive Design on Mobile Clients
Responsive design is a tricky thing, so knowing which mobile clients can support your designs is paramount. Below is a breakdown of which mobile clients do and do not support responsive design.
|iOS (iPhone/iPad) Native Client|
|iOS (iPhone/iPad) Gmail Client|
|Android 4.x Native Client|
|Android Outlook Exchange (Native via 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 7|
|Windows Phone 7.5|
|Windows Phone 8|
|BlackBerry OS 6|
|BlackBerry OS 7|
|Kindle Fire Native Client|
|Samsung Galaxy S3+ Mail App|