Click me
Transcribed

The How-To Guide to Responsive Email Design

THE HOW-TO GUIDE TO RESPONSIVE EMAIL DESIGN 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. WHY RESPONSIVE DESIGN? 47 % 150 80% TIMES A DAY of email opens are on mobile Studies have found that people look of people delete an email if it devices, yet many emails are only at their phones an average of 150 doesn't look good on their mobile designed for desktop viewing. Text is often difficult to read, details in times a day. These brief interactions device. mean that you must focus on getting images are hard to see, and links your point across quickly. are impossible to click on mobile. WHAT IS POSSIBLE WITH RESPONSIVE EMAIL DESIGN? BEFORE AFTER 1 Change Hierarchy 2 Change Navigation 3 Enlarge Fonts Change Colors Change Layout Scale Images Add Padding Change or Hide 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. Desktop Email Mobile Email THE QUERY - In the context of email, media types define which CSS styles to use based on screen size. Your Amazing Email Add Padding A simple style adds 15px of padding to table cells with a class of 'body"

Change or Hide Content The display property can be used to hide table cells THE HTML •
Each style in the CSS rule block specifies the entire table or just a table cell) the style should effect. These rules must be assigned and
This is the email headline 2 td[class="body-header"] { text. font-size: 18px !important;
For example, the element (td) and the class ("body-header") used in the CSS must match those used in the HTML. * HTML has been truncated for illustration purposes. 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. iOS Mail app BlackBerry OS7 + Z10 Android 4.X Windows Phone 7.5 Email/OEM app Responsive emails are not supported by: * iPhone Gmail app Android Gmail app * Windows Mobile 6.1 * iPhone Mailbox app * Android Yahoo! Mail app * Windows Phone 7 * iPhone Yahoo! Mail app O BlackBerry OS 5 * Windows Phone 8 DEVICES VS. APPS: WHAT DETERMINES SUPPORT? It's a common misconception that media query and responsive email support is based on the device or Apple Mail Gmall Вохer operating system being used. In fact, it's the application used to view the email that determines support. In other YAHOO Yahool Mal Sparrow words, it's possible to view the same email in two apps Malbox on the same phone, each with different support for responsive design. Agencies, designers and marketing teams worldwide use Litmus' email preview and analytics litmus solutions to test, target and optimize their campaigns. We help make email better. Use coupon code N8GZLT for a free 14-day trial. Visit litmus.com/giftcard Sources: http://tech2.in.com/news/smartphones/smartphone-users-check-their-phones-an-average-of-150-times-a-day/874882 http://www.bluehornet.com/assets/Report_Consumer-Views-of-Email-Marketing.pdf http://stylecampaign.com/blog/2012/M0/responsive-email-support/ https://litmus.com/blog/

The How-To Guide to Responsive Email Design

shared by Litmus on Sep 09
5,138 views
24 shares
0 comments
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 ...

Publisher


Category

Computers
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size