Website visits from mobile devices ranges somewhere from about 10% and this gets the web world clamouring for responsive design frameworks. But what about email, that oft overlooked medium that can easily drive 30% plus on-site conversions. With email you can control the destination of clicks, so why haven’t we seen more responsive email and email landing pages (ELPs)?
Maybe it’s because email has historically fallen under the the Direct Mail (DM) umbrella. When was the last time you checked out what device your email was opened on? Whatever the reason, it’s a simple and fast fix to any digital strategy and you may be surprised to find that half of email is opened on smartphones.
Remember, it’s a game of two halves, little point having responsive emails if the ELPs are unreadable on a mobile device and vice versa. You need to have the two halves working together.
Responsive Email Design
How users’ consume email is very different to the web; it’s more immediate and at the same time transient. In stark contrast to the web, you can bank on the big red delete button being used if the email is unreadable or doesn’t download properly. Did you know that the iPhone will not fully download any email message larger than 50k?
In the web world we’d use a thing called media queries to identify the size of the screen; that works pretty well on an iPhone and can usefully be capped at 480 pixels (the width of an iPhone) to allow for it’s detection. Once detected you should specify which elements are hidden (big images, backgrounds, navigation etc) and this works pretty well, especially if the email is largely text-based.
Except, some important email clients including Gmail and Outlook don’t support media queries and so therefore cannot be used to work across all devices. As an aside, most mobile users of Gmail and Outlook still tend to use the default email client which does support media queries so it’s not the big problem it could be.
Think, then, using a mobile-first approach with all email. Work up from the lowest common denominator, strip away the layers, the images, the navigation, the category selection tools, the legal footers, the social sharing, the lot. Kill it all. Have a simple primary purpose backed up with a two other aims; all of which are delivered by the recipient taking an action and clicking the email.
- Email must be smaller than 50k, period.
- Stick to basics and make it readable, use a 13 or 14 point text size and stay away from stylised or odd fonts.
- Contrast is important, mobiles are used outdoors and in varying light conditions.
- Important stuff first; that’s important to the recipient, not to you
- The first 2 or 3 lines are often previewed in the email client, make them relevant
- Consider the power of plain text
- Telephone numbers automatically convert beautifully to CTA
- Make the click links obvious and point them at responsive Landing Pages
- Use white space around clicks and links, make ’em fat-thumb friendly
Responsive Landing Pages
Now you’ve done the hard work to get the magic 2% to respond to your email shot because you made it mobile-friendly you need to keep these incoming visits and now you know they’re on a mobile device so point them at a set of responsive landing pages. Even if your main website is not ready for mobile there is nothing wrong, and all to gain, by sending the controlled email traffic to special set of ELPs, made just for them.
Traditionally, Landing Pages are widely used by websites to receive PPC and have become very popular over the last few years. These pages have a single focus (usually conversion) and tend to isolate the users from the rest of the site’s content. The basic rules still apply in that they must be focussed and have a conversion bias but these landing pages will need to cope with mobile as well as desktop traffic. This is where responsive comes in and all the rules for both landing pages and responsive web apply here.
Run the two initiatives side-by-side and you’ll maximise your return; run either element without consideration to mobile and you can expect it to flop. To read more on how to get your Landing Pages responsive you can start here. Or contact us.
About Connected
We’ve been in this space for a long-time, helped over 500 clients and got a fair few industry firsts to our name:
- Fully-responsive build and deliver for all clients since 2011
- Mobile-first since May 2010
- WordPress Core Developer since 2008
- Landing pages since 2005
- Conversion best practice since 2003
- Founded in 1996
