So where do you read your emails?
Almost certainly sat at your desk in the office, but possibly during your commute as well? Or maybe first thing in the morning in bed, or even in the toilet?
We’ve got to the point where a connected digital device is always within reach, and all digital media has had to adapt to a world where consumers can view the same content on a 40” monitor or a 3” smartphone, and in almost any location.
This massive shift in consumer’s browsing habits is also reflected in HTML email open rates. Here are a few figures:
- In 2013, Litmus saw 51% of emails being opened on a mobile device, with 29% on desktop and 20% via webmail.
- And the iPhone was their top email client, with 26% market share.
- Check out their post on email client market share for many more interesting stats and some lovely graphs.
I should point out that Litmus are an American company, but even in Europe where we’re lagging slightly behind, mobile open rates are still around the 40% mark.
So if that many consumers are opening emails on their phone, what can we do to tailor emails to suit smaller screens? The limited screen space, touch interaction and potential 3G/4G data usage all need to be considered, and the answer is taken straight from the responsive web.
Responsive websites scale to fit the screen of the device they’re being viewed on, and responsive HTML emails do exactly the same. By resizing and reordering the content to fit onto smaller screens, we can give the recipient the best experience possible, regardless of the device they view it on.
So on a desktop screen we might use a 2 or 3 column layout for an email, then on a mobile device we can:
- Reorder the content so it appears as a single column, allowing the user to scroll down through the email, without having to scroll left or right.
- Remove unnecessary clutter to present a clean and quickly absorbed single message, ideal for mobile users.
- Make UX improvements, like increasing font sizes for readability, and button sizes for finger friendly links.
Here are a few examples – open the links and then make your browser window narrower to see the mobile responsive elements kick in;
- Our newsletter uses a single column layout to start with, but at mobile sizes scales to fit the screen, increases button sizes, and removes some copy from the header and footer to give a cleaner layout. A simple but very effective approach.
- We also created an eshot wich uses a 2 / 3 column layout at full size, but then has 2 mobile versions, one for tablets and one for phones. The header image scales for tablets and is then replaced with a mobile specific one, and the 2 / 3 column sections go to a single column for both tablet and phones.
There’s a bit more work involved, both in design and build time, and the HTML needs to be rigorously tested to make sure it’s going to work on all device/browser combinations, but the payoff is well worth the effort. So are your HTML emails responsive? And if not, why not?