Responsive Email Design

by Mohammed Shameer
07 June 2013

Every day all of us login our email accounts to be greeted by messages that aim to sell us something, or tell us something about a product or brand. On rare occasions the look of these emails make us go “WOW! , in most cases these emails make us wonder whether they even cared about where and how you are viewing it, with parts of the email not rendering well at all.

Gone are the days when we cared what emails looked like on the biggest browsers or email clients like Outlook.com (Hotmail), Gmail, Yahoo! and MS Outlook.

As businesses wish to keep customers engaged, we have to think about how our emails will render in different smartphones and other mobile or handheld devices. We need to think “responsively”, since every email client has a different method of displaying (rendering) emails. The benefits are also well articulated in Litmus’ recent blog post using Salmat Digital’s product offering, Lasoo. With the recent surge in the mobile device market, we designers have started to go responsive with emails.

What is responsive email?

Responsive email is basically an email which you receive that adapts and renders differently on different devices.A perfect example is an email displaying products in a 3 per column row. When that email goes to a smart phone it either gets shrunk to fit the screen, or only the first product in the column is displayed.

iPhone basically shrinks your email to fit the device, whereas Android devices display a portion of the email due to the device’s viewport size.

Responsive email uses media queries to read the device size you are viewing the email on and rearrange the elements to give you a better reading experience. Like its predecessor, responsive design has some constraints as well as some really good features. The biggest constraints is namely the design, which has to be done using a grid system (a search online will give a lot of different ones).Placing in rows first then columns allows a producer to layout the email in a way so that different elements on the page stack according to the screen size. A primary example is the Microsoft site, which exhibits them having adopted responsive design for their new look.

Some requirements for a good looking responsive email:

  • Single-column layouts that are no wider than 500 to 600 pixels work best on mobile devices. Besides being easier to read, if they fall apart, they’ll do so more gracefully. Desktop emails can be multiple columns.
  • 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 scaled up and could break your layout. Alternately, you can override this behaviour in your style sheet (do so with care).
  • Hide elements on mobile view so there is not too much text for viewers to read through.

Surveys and analytics prove that emails are received, composed, and viewed more on smartphone and other handheld devices than desktop devices. Does your email need zooming in for your clients to view them?

Download our Salmat Digital Marketing best practices: "Responsive email - how it works?"

Find out more about Salmat's email offering here or call us on 1300 725 628.

50 search marketing tips

Page 1 of 2
  < 1 - 2  > 
About the author
Mohammed Shameer
Email Production Team Lead

Mohammed Shameer is a part of the marketing operations team at Salmat Digital and has over 4 years of experience in digital production of emails, competitions and microsites and has more than 10 years’ experience in print. Before Salmat, Shameer worked in a similar capacity as producer at Returnity, responsible for creating, testing and delivering emails as well as competitions and micro sites. Shameer holds a Bachelors in Information Technology Degree from Central Queensland University Fiji, he is passionate about emails, graphics and is forever researching for new methods to expand his knowledge on all web related work.