The Three Mobile Email Techniques

Did you know that sometimes your users will open email on a mobile device? I know, it was a shock to me too. But here we are in 2015, and after at least 5 “the year(s) of mobile email”, we’ve mostly got past the idea that we have to at least do something to consider this.

There’s plenty of stats and reasons why mobile is important – we won’t focus on those here (though, for the record, it’s around 55% opening on mobile for the average audience). However I have seen a bit of misinformation and confusion around mobile email design lately, so I thought it’d be useful to look at the three main approaches to improve the experience for mobile users.

Spoiler alert: the best approach is to adopt all three.

Mobile Friendly

As a base level, it’s a great idea to incorporate basic mobile friendliness into your design.

What we’re trying to achieve here is essentially a ‘desktop’ email, but one that looks ok and is still usable if appears zoomed out on a mobile device.

Common ways to do this include:

• making text larger and shorter.
• making links easier to click, by both making them larger and spacing them out so users don’t mis-tap.
• using a simpler, modular layout.
• designing with primarily one column (two at a push).
• perhaps making the email slightly narrower than 600 pixels, in order to reduce the effect of zooming out, whilst still being adequate on a desktop.

This also has the useful side effect of making emails work better on tablets – where the design is pretty much already full width, but the user is still interacting with a touch screen.

A mobile friendly approach is the easiest to code for, as there’s very little difference in HTML from a regular email. However, there’s a lot more we can do to make the experience better on a mobile device – which leads to our next technique.

Responsive Email

Responsive email uses the same HTML content as our desktop email, but we can use CSS media queries to adapt the layout to work better for a smaller screen. We won’t look in depth at the code, but think of media queries as an if-statement that’s based on the size of the screen. So we can say, if the screen width is less than, maybe 500 pixels, then make our email 100% of the available width, and apply a bunch of formatting.

Incidentally, whilst we’re looking at the optimum width to apply mobile formatting – there’s a couple of schools of thought here. You can target media queries at specific devices, say the iPhones 1-5S, which were 320px width. But a better approach would be to apply the mobile formatting at a point where the design starts to stop working. That way, when the iPhone 6 comes along, at 375px width, you're already covered. For the most part, we apply media queries for any screen width that is less than the width of the ‘desktop’ email.

You may have seen emails that are only ever two widths – say 600px and 320px. That's very similar to Responsive, but it's actually called Adaptive. On the whole it's not as good an experience for users, although it does make HTML production slightly easier.

So what can you do with media queries? there’s three things that are really useful, and a then a load of things that add incremental improvements:

• We can hide content on a smaller screen. Although these days, it’s worth thinking about removing it on desktop too if your message works on mobile without it. This technique is mostly for removing bits of design elements.
• We can resize images and re-flow text. That’s great, as it makes everything as readable as possible.
• Lastly, we can stack table columns, so something perhaps has an image on the left and text on the right can stack into one column, with the text underneath the image. On the most part, it’s easier to stack right under left (think of it as stacking in the order that things are coded in), though it’s possible to reverse stack.

There’s also some nice things we can do to adjust the content hierarchy as our email resizes for a smaller screen – including resizing fonts, amending line height and making buttons wider and easier to touch.

So what’s the catch? well there’s a bit more code to do, and that’s going to take time, but having a good dev and a templated approach can help you here. If not, an email design agency worth their salt will be able to help out.

The code that makes Responsive design work – CSS media queries – is supported on iPhone, iPad, various builds of Windows phone, the Android native email client and some versions of Blackberry. However, thanks mainly to Google’s lack of consideration for email HTML, Responsive design isn’t supported in Gmail app, either on the iPhone and Android.

So what can help us there?

Hybrid Code

We’ve been doing a lot of work on something we call the ‘hybrid technique’. If you think of Responsive design as coding an email to be 600px wide, and then using a CSS media query to change that on a smaller screen – Hybrid is the opposite of that. The Hybrid approach means coding an email to be 100% wide by default, and then using a combination of CSS, Outlook hacks and various other things to stop an email being wider than 600px wide.

The main benefit of this is that our email will re-flow, and content will stack, in mobile apps where Responsive design isn't supported. This is typically Gmail and Inbox by Gmail on Android and iPhone, but also helps improve support on older Blackberry devices and other lesser used platforms. It's not full Responsive – so we still can't do things that we need the media query support for (things like showing/hiding content, resizing fonts, re-formatting buttons). But it does at least improve the experience for a fairly sizeable chunk of the mobile audience. We can then layer on the Responsive code to enhance this further where it is supported.

Hybrid code does, however, require some fairly heavy code changes – building an HTML that automatically resizes and stacks can cause layout challenges in some desktop clients – so there may be some restrictions imposed at design stage as a result of the coding method required.

So essentially, the trade off for better support for Gmail users is more time and more complex code – otherwise those users are left with a zoomed out version of the full email. Gmail have indicated that adding full support for Responsive design is on their roadmap, but due to the fragmented nature of Android, even if a fix were released tomorrow, it would take years for full support to be widespread.

So which is the best mobile approach?

In order to provide the best experience for as many users as possible, the best approach is to use all three techniques in tandem. However, depending on the size of your mobile audience, your timescales and your budget, focusing on either mobile friendly, or mobile-friendly-plus-responsive may be preferable.