THE HOW-TO GUIDE TO RESPONSIVE EMAIL DESIGN
Responsive 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 emails open on mobile devices, yet many emails are only designed for desktop viewing. Text is often difficult to read, details in
150 times a day 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
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
This media type states "If the email is viewed on a screen size of 480px or less, use the following CSS ’
Combined with the media query, the style rules act like conditional 'if-then' statements, triggered when the specified screen size is detected. There can be many styles, or just a few.
Spans the entire width (100%) of the table
will display as the color #dddddd Q Add Padding
A simple style adds 15px of padding to table cells wl
width: 100% I important; padding: lOpx 0 20px 20px !import
Each style in the CSS rule block specifies the type of container or element (for instance, the entire table or just a table cell) the style should effect. These rules must be assigned and referenced in the HTML in order to be applied.
<table cellspacing-'O” cellpadding-'O” border-"0" width-*600”>
For example, the element (td) and the class ("body-header") used in the CSS must match those used in the HTML,
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
DEVICES VS. APPS:
WHAT DETERMINES SUPPORT?
It's a common misconception that media query and responsive email support is based on the device or operating system being used. In fact, it's the application used to view the email that determines support. In other words, it's possible to view the same email in two apps on the same phone,
each with different support for responsive design.
Use coupon code N8GZLT for a free 14-day trial. Visit litmus.com/giftcard