we marketers have grown accustomed to the idea that by optimising our emails for mobile users, we can give our campaigns an edge over the competition. alas, times have moved on, and the fact is that we should now be creating mobile optimised email variants as a matter of course.
a few years ago we reached a tipping point where smartphones overtook desktop computers as the device type most often used to read emails. more recently, movable’s device preference report (2015) found a phenomenal 52% of emails are now being opened on smartphones – with desktops accounting for just 32%.
it’s all too easy to fall into the trap of creating emails primarily for desktop users – in all likelihood you’re using a desktop to put them together yourself. now it’s time to shake off this antiquated mind-set and put mobile first, desktop second.
in this article we will discuss 5 inspirational examples of mobile optimised emails, all of which have been carefully designed to boost conversions. we’ve included some actionable tips, so you can replicate the ideas featured in your own campaigns.
holidaypirates – first principles
we’ve chosen to start with this email for one reason: it is unmistakably designed for mobiles first.
this is the one point we absolutely insist you take away and place at the heart of your email marketing strategy. why? firstly, because mobile is the most widely used device type for email opens, with a majority share that’s still growing year-on-year; and secondly, because it’s far easier to use a mobile-optimised design as your basis and then build in additional elements for larger devices than it is to do the opposite.
[mailchimpsf_form access=”web” title=”for more like this sign up to our newsletter”]
the ratio of visual elements to copy
we can tell that this email has been designed for mobile first just by looking at how many words are on the page – i.e. not very many.
including lots of copy in an email will typically have a negative effect on mobile conversions. in holidaypirates’ email, copy is limited to three lines per content item in the mobile version (the copy plus the cta button are roughly equal in terms of space-usage to their accompanying image); whilst in the desktop version the same copy might occupy just over one line, acting more-or-less as a caption for the image. if this email had been designed for desktop first, we might have seen additional copy in larger screen sized variants, and abridged versions (or worse, too much copy and horizontal scrolling) for smaller devices.
lots of attention-grabbing cta buttons
if you’ve ever read up on the subject of conversion rate optimisation, you’ll know how much is to be gained by strategically positioning cta buttons on your webpages.
ctas, or call-to-action buttons, are image-type links, using a button design with a text imperative (e.g. “buy now”, “sign-up for free”, “view more”). holidaypirates have used cta buttons here to link through to content on their website.
in the mobile-version screenshot above, you can only see one of the content items featured in holidaypirates’ email. this is due purely to the amount of space we have at our disposal here in this article, and in fact, ten destinations are included in the email, each one with its own image, copy, and “show deal” cta button.
using ctas in your emails is widely recognised as the best way to get mobile users to click through to wherever you want them to go. here are some tips on how to make your ctas super-effective:
- make them big and relatively bright – if you’ve ever tried hitting a small, obscure target with your thumb whilst browsing on your phone (or in some other, weird context), you’ll understand why making your ctas stand out is important. this will also make your ctas more attractive.
- surround them with whitespace – for the same reasons.
- make the cta copy clear and concise – say it in two or three words.
- link to mobile-friendly content – there’s no point in channelling mobile users to a mobile-hostile site.
what we’ve learned so far
from this single marketing email we have ascertained three key points – let’s call them first principles – on email marketing:
- design for mobile first
- go easy on the copy
- use ctas for links
for us, these are the most important factors you need to consider when creating your marketing emails. we are now going to take a look at four more emails that cater for the mobile user in interesting and thought-provoking ways:
payasugym – embedding within mobile activity
why stop short at making your email compatible with smartphones, when you could use it as a means to embed your brand within the recipient’s day-to-day mobile activity?
here’s a section of one email from a pay-as-you-go gym and fitness class finder service which does exactly that, and to great effect.
- “find your next” – sub-header introduces the recipient’s problem, paving the way for the brand to pitch their solution.
- map-marker style graphics – note the graphics at the top of the screenshot, showing numbers of gyms, classes and pools. using map-marker style graphics here is clever, as it evokes the icons used in extremely popular apps like google maps and uber, which nicely leads into…
- app banner – this cta banner supports its get the app! message with informative, trust-enhancing apple app store and google play buttons. the banner is large, eye-catching and surrounded with whitespace.
this email is a model example of how to posit your brand as the mobile-compatible solution provider for a consumer’s problem. the structure of its message is irresistible: “we understand what you need; we’re really well placed to give it to you; click this clear, simple, trustworthy download link and we’ll solve the problem for you now and whenever you need us to in the future.” the brand has very effectively put itself forward to fulfil a certain role within the user’s mobile activity.
whether your brand fulfils its online role via an app or a mobile-optimised website, you may be able to replicate payasugym’s approach in your marketing emails. try including a cta within a similar structure:
- use a sub-header to introduce the problem, e.g. “wanna find a new style?”, “need a new book?”
- establish your authority/range/quality/value proposition. subtly incorporate graphic elements which mimic app or ecommerce elements (like payasugym’s map markers).
- add a cta banner, using the techniques discussed previously. this could link to an app download, or another digital aspect of your business that can fulfil a useful role for the customer.
american apparel – preparing for life in the junk folder
every email marketer surely loves to imagine their missives sailing into recipients’ inboxes and straight to the top of the list – but the fact of the matter is that many of your recipients’ email clients will treat your messages as untrusted or junk mail.
recipients will still be able to view these message, but in some cases content – especially images and other rich media – will not be shown. bearing in mind the high ratio of images to copy used in most mobile-friendly email marketing, this could mean the recipient misses the key hooks in your email as they flick through their junk folder.
there is no completely satisfactory solution to this problem, but you can affect some damage limitation using an attribute of the images used in your emails: their alt tags.
cast an eye over the two screenshots above. both show the same email, from fashion retailers american apparel. the version on the left has images turned on, whilst the image on the right shows how the same email looks with images disabled. the image on the right may not look as good, but it manages to convey the email’s essential purpose – “we miss you. take 20% off!” these words don’t come from a section of copy wrapped in <p> tags; they come from the alt tag attributes of the images that have been hidden.
by repeating the email’s marketing hooks in the alt tag attributes of your images, you can improve the chance of your recipient receiving your core message in text form, even if images are disabled.
as a general rule, we would always recommend taking the time to write an effective alt tag for any image you plan to publish online. not only do alt tags help get your email marketing messages through to more recipients, they are also fundamental to visually impaired people’s experience of the internet, and can help your images to rank well in image search results.
the trainline – providing a fast route to ratings
customer feedback is a precious resource for marketers who want to identify the best way forward for their email campaigns. it is especially effective when used in a split testing context, as we expect was the case with the star rating section shown above, found in an email from thetrainline.com.
there’s nothing fancy about this reviews section – and that’s exactly why we like it. the user taps one of the stars to rate the email out of five. the simplicity of the design will make leaving a review seem far more manageable to mobile users, who might be put off by fiddlier tasks like writing comments.
but what about the lack of detailed feedback? well, we would suggest that two or more variants of this email will likely have been sent out to different audiences, and the generic ratings provided by recipients will have been used by the email’s creators to determine which of the variants was most effective.
multivariate testing can be used to determine which type of subject line works best, which deals or products an email should promote, how different content types can affect user experience and so on. the information gathered can be used in its own right, or to back up findings made by analysing email open and engagement data.
natwest
the key to this email’s impact – from a design perspective – is the eye-catching piggy bank gif at the top. crucially, it looks nice and sharp whether viewed on a mobile, tablet or desktop.
the email’s developers have achieved this by setting a bicubic interpolation algorithm to scale the image – which has been achieved by setting part of the image’s style attribute to “-ms-interpolation-mode: bicubic”. this makes the image ‘fluid’.
there are various ways to achieve this effect, most of which are less technical-sounding than the above. get your devs to check whether your email template includes bicubic interpolation or another mechanism for image scaling before you start sending out emails. simply making your images large enough to look sharp on all devices is problematic, as it may necessitate horizontal scrolling for mobile users – exactly the sort of thing we’re out to avoid.