15 Nov Responsive Email Design

Posted at 06:47h in Email Marketing by

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.
  • No support for Javascript in email.
  • 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

Responsive Email 600px Width

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

Responsive Email Big Buttons

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

Responsive Email Big Fonts

Minimum font size should be 16 pixels, so your audience will not need to squint at their small mobile screens.

 

(4) Content Hierarchy

Responsive Email CTA Button

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.

Print page
0 Likes