TRY OUR FREE LITMUS COMMUNITY TEMPLATES
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.
Responsive design is easy with litmus
The Litmus Community Templates are a collection of free, elegant, and pre-tested templates for you to use for anything from product launches to welcome emails.
Mobile-friendly layouts and design elements
Designing for mobile isn’t simply a matter of taking a crack at writing mobile-specific CSS. Other things to consider are:
- Single-column layouts that are no wider than 500 to 600 pixels work best on mobile devices. They’re easier to read, and if they fall apart, they’ll do so more gracefully.
- Links and buttons should have a minimum target area of 44 × 44 pixels, as per Apple guidelines. Nothing is more unusable than clouds of tiny links on touchscreen devices.
Responsive web design, a term first coined by Ethan Marcotte, is the practice of crafting websites in a way that they are usable regardless of which device is used to access them. The responsive web is largely reliant on media queries to drive that adaptation. More recently, this approach has been brought to the world of HTML email.
A media query follows a pretty simple structure. For the purposes of email, the media query’s styles are nested within the emails <style> tag: