Responsive Email Design
RESPONSIVE DESIGN FOR EMAILS
Responsive email design has been growing steadily in popularity. Currently, on average 47% of email opens are on a mobile device, and some campaigns see upwards of 70% of their emails opened on mobile devices. These brands turn to responsive design techniques to create better user experiences for their subscribers. In many cases this increases their click through and interaction rates significantly.
Like everything else in email, Responsive Design doesn’t work quite the same way in Email Clients (inboxes) as they do on the websites we view in browsers.
Responsive web design is a term first coined by Ethan Marcotte. It is the practice of crafting websites so 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 design.
How to create Responsive Email Designs – Infographic by Litmus:
RESPONSIVE EMAIL DESIGN TECHNIQUES
Responsive Email Design is a collection of techniques, such as media queries, fluid grids, and fluid images. The goal of these is to provide the most optimal viewing experience across all platforms.
WHY USE RESPONSIVE EMAIL DESIGN?
- 47% of email opens are on mobile devices, yet many emails are only designed for desktop viewing. The text in these can be difficult to read, details in images are hard to see, and links are impossible to click on mobile.
- 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 device.
WHAT IS POSSIBLE WITH RESPONSIVE EMAIL DESIGN?
The possibilities are endless, but some common uses of responsive design techniques include:
- Changing hierarchy
- Changing navigation
- Enlarging fonts
- Changing colours
- Changing layout
- Scaling images
- Adding padding
- Changing or hiding content
HOW TO IMPLEMENT RESPONSIVE EMAIL DESIGN
Responsive email design uses a media query, also known as @media—a special set of CSS styles that act like conditional statements or dynamic rules. They can help make email designs more readable on different screen sizes.
Media queries detect the screen size of a device and then respond by “turning on” different sets of rules based on that screen size. Responsive Email Designs require more planning and testing than standard html emails, and they don’t work in all email clients.
More about CSS3 Media Queries.
MOBILE FRIENDLY LAYOUTS AND DESIGN ELEMENTS
Responsive Email Design isn’t only about writing mobile-specific CSS. There are other things to consider to:
- 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.
- The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout. Alternately, you can override this behavior in your style sheet (do so with care).
- Keep the message concise, and place all important design elements in the upper portion of the email, if possible. Scrolling for miles is much harder on a touchscreen than with a mouse.
- Use display: none; to hide unnecessary details in your mobile layout. Elements like social sharing buttons may be great in the desktop inbox, but aren’t always easy to use by the recipient on mobile devices.
When mocking up a Responsive Email Design it’s best to create two sketches or wireframes. One of the desktop or webmail layout and one of the mobile phone layout. Keep in mind where your call to action, and other important elements appears on both. These must be immediately visible when the email is opened on any device? How far does the recipient have to scroll to see it?
SUPPORT FOR RESPONSIVE EMAIL DESIGN
Responsive emails are supported by:
- iOS Mail app
- Android 4.x Email (OEM) app
- Windows Phone 7.5
- BlackBerry OS7
- BlackBerry Z10
- Responsive emails are not supported by:
- iPhone Gmail app
- iPhone Mailbox app
- iPhone Yahoo! Mail app
- Android Gmail app
- Android Yahoo! Mail app
- BlackBerry OS5
- Windows Mobile 6.1
- Windows Phone 7
- Windows Phone 8
DEVICES VS. APPS: WHAT DETERMINES SUPPORT FOR RESPONSIVE EMAIL DESIGN?
It’s a common misconception that media query and responsive email support is based on the device or operating system being used. Actually 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 levels of support for responsive design.
