15 Nov Responsive Email Design
Lots of people are now reading their emails on their smartphones. Emails can be used to send a customer receipt, or weekly/monthly newsletters, re-engage with users with feature announcements, new products, promotions etc.
Unsurprisingly, more email is read on mobile than on desktop email clients. There is a growing number of people who habitually rely on their mobile devices for the Internet. According to statistics, more than 51% of emails are now opened on a mobile device. Mobile email opens have grown with 180% in three years. Find out other interesting stats such as device & email client usage by industry (and more) at https://www.emailmonday.com/mobile-email-usage-statistics (Last updated Nov 2017).
Developing HTML email has traditionally been a difficult experience for the designer:
- Various email clients that render HTML & CSS differently, which leads to client-specific hacks.
- Extensive use of long-winded inline style.
- Compulsory use of the ’90s table-based layouts.
Even with the challenges of developing HTML email, the statistics have shown that we cannot afford to escape from responsive emails. Facing it head-on, here are some tips for designing responsive emails:
(1) Single-column Layouts
Your desktop version can be multi-columns; On mobile, use single-column layouts that are no wider than 600pixels. It will be easier for users to read.
(2) Buttons Sizes
Links and buttons to be at least 44 x 44 pixels for a larger hit area for fingers. This is based on Apple guidelines. Google recommends 48 x 48 pixels.
(3) Font Sizes
Minimum font size should be 16 pixels, so your audience will not need to squint at their small mobile screens.
(4) Content Hierarchy
Place all important elements in upper portion of the email where possible. Your Call-To-Action button should be visible when the email is opened.
In addition, you can use “display: none” to hide less important details and less used functions.
(5) Retina Displays
For retina displays, use twice the image dimensions, so the images will look sharp.
Get more email design reviews at http://www.emaildesignreview.com.