Responsive Design refers to a collection of techniques that make web pages render appropriately on a variety of devices and screen sizes, such as desktop computers and mobile devices. Responsive design ensures that web pages and mailings adapt to the viewing environment in order to optimize the viewer's experience.
NOTE: Implementing responsive design in a Higher Logic Thrive Marketing Professional (Thrive Marketing Professional) template requires the knowledge of an experienced HTML designer. Make sure you're working with someone with experience in responsive design.
Responsive design uses
Below are some elements in Thrive Marketing Professional templates and how they can be "responsive":
- Scale images
- Change layouts and colors
- Change navigation and hierarchy
- Enlarge fonts
- Change and hide content
- Add and delete padding
Responsive design notes
Before you start working with responsive design, review and understand the following notes.
- Mobile versions generally consolidate to one-column layouts (unlike the multiple-column designs that work well on desktop platforms).
- The individual mailing client and/or application determines support of responsive design. (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 applications.
Responsive design best practices
Below are some measures that you can take in order to ensure the success of responsive design in your templates.
- Always define your media queries in the head tags of your design. For media queries to work on mobile devices, the CSS rule !important; must be applied to each style. If a 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, but there's usually only one format for mobile devices (maximum width of 480 pixels).
- Always test your responsive designs on a variety of email clients and mobile devices. Differences in devices, manufacturers, applications, and screen sizes can impact how your mailing renders, so test your templates to be sure they display as intended.
- Make sure you've set a DOCTYPE in the HTML parameters. All responsive-design templates require a DOCTYPE in order to function. If something isn't working, check the DOCTYPE in the HTML parameters.
- If your images don't stack properly, you might have 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 mailings is paramount. Below is a breakdown of which mobile clients do and do not support responsive design.
| Client | Supported | Not Supported |
|---|---|---|
| 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 | |
|
| BlackBerry Z10 | |
|
| Kindle Fire Native Client | |
|
| Samsung Galaxy S3+ Mail App | |
Related articles
- Templates for Mobile Devices - Offers a look at the differences between mobile-optimized templates and responsive-design templates.