So, we know over half of all email opens now occur on a mobile device. We’re forever being told that ‘responsive’ is the way forward when it comes to design. Consumers and web users are leading the mobile charge with 70% of them deleting emails which render poorly on their smartphones or tablets.
However, check your inbox. Try out some of the promotional emails you’ve received on different devices. How do they look? How many automatically make best use of the screen size you’re using? I bet it’s fewer than you’d hope. Feel like reaching for the delete button? Now you know how that 70% feels.
Email marketers aren’t exactly heading in their droves to the responsive kingdom. That, in itself, is absolutely mad. And not just because of the glaring stats I’ve provided above. No, when you consider that building a new email from a responsive template is actually an awful lot quicker than a traditional HTML template, the reasons for not embracing mobile is utterly inexplicable.
You can break the mould. First, though, I’m sure you’re wondering why responsive emails are quicker to build. I covered this briefly in a previous blog, but I’d like to delve a little more into the facts and show some examples.
What makes a responsive email fast?
Traditional HTML emails can be clunky, tricky affairs once you start editing them significantly (no matter how awesome the email marketing client). Moreover, if they are re-used again and again, bashed about and hung out to dry, they will become more difficult to maintain. As a result, the emails you send may be severely broken and/or negatively impact deliverability.
The reason for this is that an HTML email contains a fair bit of code. Each column, sentence, image container, header and footer contains lines of code which, if you’re confident enough to delve into, can easily be broken or modified incorrectly and create inconsistency through the message as a result. Responsive templates are incredibly lean. Once built, editing them is as simple as changing a few lines of code (either directly in the code itself or via a WYSIWYG editor like mailingmanager’s). And, because they’re designed to automatically adjust themselves based on screen size, you don’t have to worry about building new tables or different design layouts. You just edit what’s already there – you know it’s going to work once it drops into a subscriber’s inbox.
This also means you don’t need a unique template for each device, which was previously the way to build ‘mobile ready’ (remember, there’s no such thing as that phrase any more) emails.
Because the code behind responsive emails has been on something of a diet, there’s also far less to go wrong. They utilise the same piece of HTML for each content area, making testing far, far easier.
What does a responsive email look like?
This blog post would be nothing without an example. So, here’s a message which nearly every mobile-touting email user will be frustrated with:
It didn’t take me long to find a good example of a bad mobile email. The above screenshot was taken from an iPhone. I can zoom in, sure (which I’m inclined to do, as it looks more like a website than an email), but that’s annoying when I’m rushed and simply want to find out what the point of the email is. I don’t want to spend forever exploring it. The text is small, images inconveniently placed and the menu across the top is not far from unreadable.
Not a great experience, then. Where’s that delete button…
So, what about a responsive email? Well, here’s the desktop version of one in my inbox (it took me a while to find an appropriate example, which goes back to my original point…):
…and here it is on an iPhone:
This is a purposefully simple example, but it illustrates the benefits of responsive emails perfectly. No zooming is required. I can see everything I need to and I miss out on nothing from the desktop version (you’ll forgive the lack of depth on the iPhone screenshot above – the rest of it is there I promise!).
The trick is a simple one, too. As the screen size reduces, the contents of the email simply reorganises itself vertically. The text is still the right size and I don’t have to swipe left or right to see anything – it’s all where I expect it to be. As a result, the experience is entirely untarnished.
Get on the responsive bandwagon – it is far simpler than you may think.
First image courtesy of Naypong / freedigitalphotos.net