Implementing Responsive Email Marketing Designs

Responsive web design (RWD) has been around for a while now, but the techniques are still relatively new in the way we design and code our content, enabling it to be viewed across the many different devices and platforms our audience use. There are already lots of blogs on the internet that discuss RWD but in my post I'd like to focus on the design and implementation of responsive email marketing designs (RED).

Responsive web design (RWD) has been around for a while now, but the techniques are still relatively new in the way we design and code our content, enabling it to be viewed across the many different devices and platforms our audience use. There are already lots of blogs on the internet that discuss RWD but in my post I’d like to focus on the design and implementation of responsive email marketing designs (RED). I’ll first take a look at the background to RWD/RED, discuss the current state of the web and then finish up with some thoughts on design, coding and testing.

Background

The term ‘responsive web design’ is credited to Ethan Marcotte who first used the term when he wrote an article featured on A List Apart (25th May 2010). The article discusses the transient nature of the web and looks to architecture to see what we may learn from its longevity. Continuing with the architectural metaphor, Marcotte writes about an emergent discipline known as ‘responsive architecture’ where physical space responds to the people passing through it. He takes this knowledge and applies it to web design and suggests ways in which we might take our content and instead of creating bespoke tailored designs, the design and content should respond to the way in which it is consumed. In this way, more people can access our content¬† where ever they are and our content should have a longer life span.

“In short, we need to practice responsive web design.” — Ethan Marcotte

As web designers developed responsive techniques, it didn’t take a long time for designers dealing with email content to take notice. With many new devices supporting media queries, which I’ll discuss further on in this article, some of the techniques we’ve learnt on the web can also be applied to email.

As an agency when we first used to create email for mobile, we used to treat desktop and mobile as two independent campaigns. There was no real way to separate the distribution, so recipients either received both emails, or half the database would receive the desktop and half the mobile version. The mobile version would also be extremely stripped back, or at worst contain completely different content from the desktop version. Having said that, some of our early campaigns were designed to drive telephone calls. If you wanted to see the rest of the content, you could click a ‘view full website’ link to view the full site on your mobile, only to land on a non responsive site. This was a really messy situation. The aim of responsive design is to provide the best user experience possible. The idea is also to create experiences so consistent they go unnoticed no matter what device you are viewing content on.

Why optimise for mobile?

It is estimated that by 2014, the number of people accessing the internet on mobile devices will be higher compared to access by desktop. According to Litmus, in 2010, this had already happened in China. For ourselves, the number of people viewing emails on mobile devices overtook desktop and web email clients mid way through 2012.

As of October 2013, the email client share (http://emailclientmarketshare.com) is headed by Apple ioS and Google Android, taking 3 of the top 5 spots (based on 312 million opens tracked by Litmus Email Analytics).  This share of the market equates to 44% which almost matches 33% desktop and 23% web client combined, indicating a clear case for responsive design.

The state of the web

It’s fair to say the web is an incredibly unstable environment. As interactive designers we have to deal with new operating systems and devices emerging on an almost daily basis, whilst the old ones remain in use.

We can not base our future on our past experiences, otherwise this limits the evolution of new ideas. In simple terms, what I mean by this is that we have to continually learn and grow. The first step is understanding that we are not in control of the users experience, they are. They choose the device they will consume our content on and by default the browser or email client. There also has to be a flexible approach between designing the content in our own environments, with high resolution displays and the latest copy of Creative Suite, to the final delivery to the end user. There will never be a perfect photoshop translation from design to delivery, a site can not possibly look the same in all situations. Some web designers have tried to over come this by dropping photoshop as soon as possible and begin to design in the browser, but that’s a whole other topic of conversation.

Finally, on the state of the web, I’d like to state that the web has ALWAYS been responsive. As designers we locked widths and font sizes, but the original intention was to share content as easily as possible. In many ways we are returning to this original idea.

Design

“Mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way.” – Brad Frost.

Brad Frost is well respected in the world of web conferencing and education. But his quote is the key to delivering content by email. The assumption that content should be dumbed down for mobile devices can be frustrating for the recipient. Having to go back to a website to find the information on desktop is not only annoying, it is also unlikely. People that view emails on their mobiles will rarely go back and view them on their desktop.

RESPONSIVE EMAIL IS NOT DESIGNING FOR IPHONE. I probably didn’t need to shout it out, but there are many times as interactive designers we are asked to make content work on an iPhone or an Android device. This is crazy. What happens next year, or even next month when the devices are updated and the screen sizes change again? What about the people that don’t own these devices, should we just give them a bad experience and risk ruining your reputation as a brand?

The same content should be available on all devices. If content needs to be removed for mobile devices, we should be asking if that content is necessary in the first place, why do we need to pad it out for the desktop version? With this in mind, your content should be device agnostic.

Responsive design means designing content to be consumed everywhere and anywhere, however there are certain considerations to bare in mind. When you first think of responsive design, you might think it means delivering content on smaller screen sizes, but it actually works both ways. If we focus on emails, these can be accessed not only on desktops, mobile phones and tablets, they can also be accessed on widescreen tv’s and games consoles too.

Throughout the course of a day you are more than likely to access several different networks to access content. Think about your day. In the morning you may be using wifi at home, on your way to work 3G or 4G, then you arrive in work and you’re on a broadband connection. All of this has an impact on how fast content is delivered to you.

The way that people interact with their devices also varies. We are no longer designing for mouse and keyboard input. There are touch devices, stylus, games pads, then there are future device inputs such as GoogleGlass and Microsoft Omnitouch on the way.

Some of the latest research is looking into the ergonomics of mobile devices, phones in particular, and how the user may interact with your content. This could affect the placement of call to actions. People interact with their device in different ways, some people are one-handed users, some cradle the device and some use both hands. In general, target areas in the middle of the screen appear to be better than buttons placed in the corners of the screen. This research, though fascinating, is also limited at the moment.

As consumers there are different contexts in which we view content. At an airport or train station, lay in bed under a lamp light, at a coffee shop, in a bar. This has an impact on the light source and can affect design. Designs may need more contrast, if you are forcing users to increase the brightness on their phones, you are also draining the battery life.

Not all email clients support responsive design. Unfortunately some of those email client will still receive the desktop version, but we can go along way to mitigate problems by making the content fluid and flexible.

Mobile first approach

When designing for mobile emails, our mind set should take a ‘mobile first’ approach. The aesthetic of the design has to be stripped back, not so that it becomes boring, but so that we use colour and typography in a clever way without relying heavily on images. The advantage of this is that text and colour is immune to image blocking, it has minimal load times and it degrades well in unsupported email clients.

The user has to focus more on mobile devices, so copy and call to actions have to be strong and clear. Basing the design on Apple’s Human Interface Guidelines is a good idea, this means font sizes should not be lower than 13pt and buttons should have a touch area of at least 44px by 44px with a clear space of 8px between them.

On mobile devices, short copy and messaging on mobiles is too long. The average person spends just 51 seconds reading an email. Copy should aim to be ultra short. We live in a world where messages have to get through quickly, in a world where we are used to a 140 twitter character limit and instant text messages. The good news is that more people click on links from mobiles than they do on desktops.

Designing for retina screens needs some amount of consideration. Usually this means coding an image at a specific size and then delivering the image at twice that size. This has an impact on load speeds. We can go someway to mitigate this impact by reusing images within the design, for example, if a button has an arrow (as an image) at the end of it, this arrow can be reused throughout the design and it would be the same as loading just 1 image. Again this has to have some forethought in the design stages, being clever about images that can be reused.

Developing responsive design

As the designs are finalised, along the way there should have been some thought on how these will be turned into code. One technique includes fluid design, where columns of copy reflow as the browser window changes size. There is also the opportunity to use scalable images, which shrink and grow as you expand and contract your browser window. There is also the use of media queries. Before I go any further, I’d like to state that the best technique is usually a combination of all three.

Media what? Ok media queries. There are several different types of media queries which are used for screen, print and braille with more available and more in the pipeline. Media queries are designed to apply rules to content depending on certain conditions. For example, if that condition is a screen size with a maximum width of 470px, the layout of the content, and the content itself can react to that condition.

Some of the ways in which a media queries are used for mobile emails include changing the layout from multiple columns down to one column and removing content. Removing content usually means repeating content such as navigation at the top of the screen, as you already have one at the bottom. After all, if you’re removing content you may need to question if this content was necessary in the first place.

Media queries should not be designed around devices – such as iPhones, they should be based around the breakpoint of the content. As the content strains under a certain width, then it makes sense to collapse and stack the content so it is easier to view.

Summary

In this ever changing world of devices and operating systems, our challenge isn’t to design bespoke experiences that fit to those devices. Our challenge is to focus on delivering great content that can be accessed without limitations. Our challenge is create a seamless experience for the end user to consume our content.