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.
THE HTML • |
This is the email headline 2 td[class="body-header"] { text. font-size: 18px !important; |
The How-To Guide to Responsive Email Design
Source
https://litm...nfographicCategory
ComputersGet a Quote