A Simple Guide to Creating Mobile-Friendly Ecommerce Emails

Posted by Hannah Stacey 9 Jun 15

shutterstock_247245826Around half of the emails you send your customers are likely to be opened on a mobile device if you’re an online retailer.

Catering to this mobile audience is a notoriously tough job - email design, in a world where seamless, visually appealing content is a growing expectation, is already headache-inducingly complex. Add to that a whole host of considerations for mobile users and you may feel like throwing in the towel completely.

But don’t give up quite yet! This post will explore the key elements of a mobile ecommerce email and how to get them right:

  • Subject line
  • Layout
  • Images
  • Copy
  • Buttons

Subject line

As we all know, having a good subject line is a crucial first step to getting your emails opened, read, and clicked.

And if you thought cramming what you want to say into 140 characters on Twitter was a tough job then it’s time to start brushing up on your concise copywriting skills, because mobile email subject lines are in a league of their own.

While character limits vary between devices (check out this awesome infographic by Mass Transit for specifics), the rule of thumb is around 30-40 characters. Sure, you can stray past this limit but make sure the good stuff comes early on in your subject line so it doesn’t fall prey to the dreaded truncation ellipsis

BONUS TIP: optimise your preheader text too

The preheader area is a prime piece of inbox real estate that’s begging to be optimised. And many retailers fail to do so.

Left unoptimised, the preheader section is usually populated with the first text that appears in a newsletter (more often than not, ‘having problems viewing this email?’ or ‘click here to unsubscribe’… not the most compelling call to open your email), but there are several workarounds for inserting optimised text. For the technical details, read this excellent post on the Goolara blog.

Layout

Getting into the specifics of coding emails that perform well in a mobile setting is a can of worms that’s probably best left closed in this blog post (here’s an excellent guide from Campaign Monitor if you want to get into the nitty gritty of it) - nonetheless there are a few important points to keep in mind.

Responsive design

Clutter is a big conversion killer in mobile email, and while multiple columns and complex layouts can work well on desktop, keeping it simple by scaling content down to a single column on mobile is your safest bet. For a great explainer on mobile-friendly, responsive design, read this from MailChimp.

'The fold'

While some argue that parallax web pages and endless newsfeed scrolling on social media have made us immune to ‘the fold’, others contend that it still has some degree of significance in email design.

In this article on the Moz blog, Tim Allen argues that the “above-the-fold space [is] highly valuable to capture a user's attention... users no longer have the patience they once had. This is due to the high volume of content users have access to, making earning their attention increasingly competitive.”

Bottom line: you have to put in the legwork to create enough interest to convince someone to scroll through your email, so put your good stuff high up so they’ll see it as soon as they open your message. Let the recipient know exactly what action you want them to take, whether that’s checking out a new range, claiming a discount, following you on social etc. etc.

Images

Online lookbooks, shoppable media, image-based social media channels like Pinterest and Instagram: the world of ecommerce content marketing is becoming an increasingly visual place.

Given that strong imagery has the power to stop casual browsers (particularly those out and about on mobile devices) in their tracks, to persuade them to read on, or to click through to find out more, it follows that image-led email design should be on the rise.

Below are some showstopping examples of bold full-page imagery (Shopbop), curated magazine-style edits (Dorothy Perkins) and vibrant takes on the age-old catalogue format (Paperchase).

Before you get carried away...

Creating great image-led emails isn’t simply a case of designing a single image and plonking it in an email - in fact, email marketing best practice advises against creating 100 per cent image-based emails. Why?

  • Some email clients do not autoload images so users are met with a blank screen of broken images.

  • Images take longer to load than text

  • Low image/text ratio can result in your email getting slam dunked into the spam folder.

There’s an obvious resources trade-off here: using single images is easier and less resource-intensive than coding up each new email you send. Nonetheless, it’s still possible to achieve great results using HTML with inline CSS to deliver rich content to recipients.

Ecommerce expert Dr. Mike Baxter comments:

“Image-only emails are a shortcut, to avoid the need to have HTML email templates redesigned to suit every new creative format.

"They, however, present huge risks that only the bigger retailers can safely avoid (their scale and importance to email service providers means they won't fall off a white-list because they are image-based).  For smaller retailers, image-based emails are a big risk and one I wouldn't recommend they take.”

However you choose to display images in your emails, there are several considerations when it comes to mobile:

  • Make sure that any item pictured in your email is directly linked to its corresponding product page to enable people to buy without having to browse through your category pages (an extra-fiddly task on mobile).

  • Keep image sizes small.

  • Ensure all your images are alt-tagged with an accurate description to give users an idea of what they’re about even if they don’t load.

 

New Call-to-action

Copy

With the average human attention span now less than that of a goldfish (8.25 seconds compared to 9), there has never been so great a need for short, snappy copy that gets to the point, sharpish.

Dubious internet statistics aside, the reality is that nobody has the time or patience to read huge swathes of text (like the two text-heavy mobile email examples from Boots and Laura Ashley below).   


Below are three great examples from the ever-witty Bonobos (top), J. Crew (bottom left) and Net-a-Porter (bottom right). The editorial approach to the copy in the bottom two examples is particularly interesting.

Here are some basic rules of thumb for crafting your own mobile email copy:

Keep it quick and simple. A recipient’s interest must be piqued within a couple of seconds, or they’ll move on.

Make it easily scannable. Make it easy for recipients to find what they’re looking for by using headings or bullets.

Keep your fonts readable.  When it comes to font type, basic, cross-platform fonts are your best friends (here’s a list of web-friendly from the Mailchimp blog).

If you really need to use a specific font that’s not on the list above, your options are using a web font (for example from Google Fonts), though this should be approached with caution, or to incorporate the text into an image though, as I said above, this should be done sparingly.

Font size is also incredibly important, and something that a lot of retailers tend to overlook. Don’t force recipients to zoom on any element of text - Apple recommends a font size of 17-22px while Google recommends 18-22px.

Buttons

The whole point of sending your customers emails is to inspire action: to get them onto your store, browsing and (hopefully) buying.

We’ve already talked about making your calls to action clear, but ensuring that they’re easily clickable (thumb-able?) is also incredibly important. In general, all of your CTAs should be:

Clear. Don’t rely on people picking up on in-text links - make your CTAs big, bold and blindingly obvious (like the ASOS email below).

Big. Thumbs are clumsier than cursors - Apple recommends that all buttons are at least 44px by 44px.

Isolated from other CTAs. Clustering too many CTAs in the same place (like in the picture below) is a sure-fire way of making your potential customers’ blood boil when they invariably click the wrong link.

Avoid making your buttons images (or create non-image alternatives). As mentioned above, there’s a risk images won’t display to some recipients. Here’s a great guide to the alternatives from Litmus.

___

Getting your emails right for mobile users will only ever become more important for online retailers as mobile usage continues to skyrocket. And as stores strive to convert more customers by offering great mobile experiences, we're likely to see exciting advances in mobile email. 

Topics: Ecommerce email marketing

Artboard 10 B-1.png