Is your Email Responsive?

Mobile internet users are estimated to reach 185 million by June 2014. More email is read on mobile than on desktop but brands have not responded to this changing user preference of email reading. As a result, 70% of this growing base is deleting emails as they are not mobile compatible.

Let medium not control your conversation with your customers.

How your customer chooses to interact shouldn’t affect his experience with your brand. To enable seamless flow of conversation, brands need to adopt seamless flow of design. In other words, they should have responsive email design.

What is Responsive email design?

Simply put, it is designing emails such that they are easily readable on every device available (mobile, tablet, laptop and desktop). Give your email design a dash of responsive code and voila! Your email fits beautifully in any screen. Ethan Marcotte had introduced ‘responsive web design to the world way back in 2010 and gave a new definition to user experience by crafting websites for optimal viewing. This approach now finds usability in the email html space.

This is how the email adapts to different devices-

Click to view larger image

Marketers should realize that responsive email design is not a matter of choice but survival. A recent study brought out a surprise revelation about customer behaviour. If a customer doesn’t act on your email in that moment, chances of opening that email on another device are minimal, just 2%*. So all those well intended mails you have written go waste when your customer can’t read them properly on their mobile phones.

Designing a responsive email

Just like with responsive websites, there are three main technical components for responsive email design Media queries, flexible images and flexible layout.

• Media Queries: A media query is a set of styles applied to the layout to re-position information in a way more appropriate for the size of the screen the user is on.
• Flexible images: This feature allows you to scale images to load efficiently across all devices.
• Flexible layout: Creates a grid framework by positioning and laying out the margins and spacing.

Building a good responsive design can be time consuming and sometimes tricky as not all mobile platforms are the same. For instance, older versions of desktop browsers, Android Gmail and Blackberry do not support media queries. But if mobile is what users prefer to check emails (and it is) then marketers need to look beyond the difficulty to create the best mobile experience possible for their customers.

Here are 5 key elements marketers should consider when creating a responsive email:

• Navigation: Site navigation and links can be laid out at different locations depending on the width of the browser. In the example illustrated below, the navigation from the top of the desktop is repositioned to the bottom in the mobile, giving each tab good visibility.

• Columns: Number of columns depends on the browser width. In the example shown below, the desktop version of email has 3 columns whereas, it’s reduced to just 1 column in mobile for easy viewing.

• Call-To-Action (CTA): Should be prominent regardless of the browser size. It helps to keep in mind Apples human interface guidelines for finger measurement when designing the CTA. Maintain a minimum clickable area of 22X44 pixels.

• White space: Content has to be scaled down when email is designed for the mobile user so as to make it visually appealing.

Hide content and use the right amount of white space as too much information bundled up confuses the reader what to read first.

Another point to consider is the spacing between links. It’s recommended to have a spacing of 22 pixels so as to avoid wrong clicks.

Below is an example of an email that doesn’t adjust to the smart phone screen size. Usage of multiple columns and crowded information will disinterest the reader.

• The next step: Remember that a responsive email is the beginning of your customer journey and you need to plan for his journey ahead as well. Where are your users being directed to from the email? Is the landing page also optimized for different screen widths? Finding answers to these questions makes it a wonderful experience for your user.

The momentum is set and the number of people reading mails on mobile are going to drastically increase Today its 30% and we predict it to cross 50%+ by end of 2014. A brand today cannot survive if their emails are not mobile compatible. So Act now, Go Responsive…

* Mobile Email Opens Report, http://www.knotice.com/