Email opens and click-through rates on mobile and tablets have been increasing consistently in recent years. We’re a generation of smart device users, as shown by the recent statistics of mobile users: 51.7% of all marketing emails are opened on mobile, with a click thru rate of 43.9%. With these statistics it’s imperative, now more than ever, to optimise email for mobile and tablet.

It’s also important to remember that results will be different based on the audience. For example, many B2B emails have lower open rates on mobile and tablet because their end users will be sitting at their desks during the work days and are more likely to open emails on desktop. This will, understandably, change the importance of responsive emails per company.

 

Responsive design email example

Research also shows that email is the best way to reach millennials  and that 80% of millennials sleep with their smartphones by their bedside – so if you’re not optimising email for mobile, you could be alienating key audiences. The main benefit of designing your emails responsively is improving the user journey for your customers. So how do you go about preparing for this?

 

Mobile-first design

This concept was first developed in 2009, to adapt for the increasing amount of users who were interacting with content on smaller devices than their desktop computer. It’s an approach focused around designing for smaller screens first and optimising that experience, then adding more features and content for bigger screens. There are pros and cons to this approach:

Pro #1: The disappointment factor – imagine you’ve spent your time designing a stunning email that does all sorts of fancy things… only to try scaling down for mobile and realising that all the tricks that worked so wonderfully on desktop, don’t translate into mobile. Disappointing. Mobile-first design eliminates this and ensures that your email is cohesive across all devices.

Con #1: Crushing creativity – the problem with mobile-first is that you immediately discard some of your great ideas, just because they won’t work on mobile. Isn’t it better to be as creative as possible for the people who will experience it, rather than limiting yourself?

Pro #2: Selective content – When designing for mobile-first, you have to whittle your content down to its most vital elements. Now you’ve selected the content you most want your users to see, when it comes to the desktop version, you get to figure out how to make it more exciting instead of facing the ‘what to cut’ dilemma.

Con #2: Demoralising – It can be really difficult to get into your design if you are completely restricted from the get-go. It can also be a different design experience, even for little things, like the difference between targeting your email for people to click on, or tap on.

 

As you can see, there are different positives and drawbacks to using mobile-first design, however even if you choose not to go down that route, you can still prepare in other ways:

Font considerations

Think about your font style and size. A key thing to remember when designing for mobile is that the minimum font size displayed on devices such as iPhones is 13 pixels. If you have any font sizes smaller than this in your desktop version, many mobile devices will upscale this and it could make your design look very strange. There is a way around this, which involves adding a small bit of CSS to your code which will override this occurring on the iPhone and keep your text at the font size you want.

 

To scroll or not to scroll?

Think about how far your users have to scroll. Scrolling on a touch-screen is much harder than with a mouse wheel. The best way to avoid unnecessary scrolling is to make sure you’re placing the information you most want users to see at the top of the email.

The other way you can keep your email shorter is to use the ‘hideonmobile’ CSS class, which can be used to hide extra spacing and even images. This will help you display the information your users need to see nearer the top of the email and keep the email relevant, without them losing interest before they’ve got to the good bit.

Where possible, use the tag ‘display:none;’ to hide extraneous elements in your mobile design. For example, social sharing links. These can often be really tricky for users to interact with on mobile (as clicking is easier than specific pixel tapping) even if they are a must- have on desktop.

Keep your single column layouts no wider than 600 pixels. It works the best for mobile devices as your copy is easier to read.
If you’re going to include things like social sharing links, or any buttons in general, try giving them a minimum area of 44 x 44 pixels. These are part of the guidelines Apple sets, and definitely worth adhering to. Fingers were not meant for tiny buttons on mobile.

 

Get creative with your images

Think about how you slice up your images. Is your entire image really something your mobile viewers need to see? You can get creative with how different parts of your images will display on mobile. For example, you may have a header which has text on the left and image on the right. You could slice the header in half and hide the right hand side on mobile. This would reduce the length of your email on mobile. Alternatively you may have a large image on desktop that you only need a part of in order to still get the same effect on mobile.

 

Consider every element

Make sure everything about your campaign works well on mobile. There’s no point sending a beautifully designed, mobile friendly email if the form/survey/landing page users are clicking through to isn’t also responsive. There’s nothing more frustrating as a user than clicking through to a teeny tiny form and having to do the awkward two finger zoom, and select the exact part of the form that you want to fill in, only to miss and end up with your name in the email field and your address as your first name.

A huge percentage of your audience now open their emails on mobile every day, so responsive email isn’t a ‘nice to have’ any more, it’s a must-have. Make sure you’re not missing out on one of the biggest trends email has seen in the last decade and make your emails responsive!