The move to mobile devices is having a significant impact on consumer engagement.This year, 4.55 billion people worldwide will use a mobile phone, and mobile subscriptions are predicted to reach 8 billion in 2016. Whether mobile phones, smartphones, tablets, or apps – it’s clear that the time to optimise for mobile is now.

Three Mobile Optimisation Options

There are three primary options for mobile optimisation. Here’s a look at how each option works, as well as the pros and cons.

1. Fluid Email Layout

The first option is called fluid layout, meaning the email width expands or contracts depending on the size of the viewing screen. This straightforward approach to mobile optimisation is easy to execute: set the width of your email to a percentage rather than having a fixed width. This way, the email effectively flows across whatever screen it is viewed on.

Pros of fluid email layout:

• Emails usually look quite good on a smaller screen like a laptop, tablet, or smartphone.
• It’s easy to do and doesn’t require any action by the subscriber, so it gives the user a seamless experience.

Cons:

• If viewed on a large desktop monitor, fluid emails can often expand too much, which makes them hard to read.
• Fluid layout is not appropriate for image-only emails, and keep the layout fairly simple for it to work best.

Scalable design is an email that features a single “mobile-friendly” layout that looks good on small and large screens. Unique features of this approach include:

• A single-column layout which is relatively narrow compared to most other emails
• Large titles
• Large calls-to-action which are easy to click on mobile devices
• A good amount of white space
• A small amount of body copy which can easily be read at a glance

Pros of scalable design:

• It gives all subscribers a seamless user experience and looks good in all environments
• It’s really easy to do and doesn’t require any complex coding.

Cons:

• It limits your design options and doesn’t provide much flexibility.
• Super-skinny emails can look slightly strange on large screens.

3. Responsive Design

Responsive design allows you to change the way your email looks or is displayed depending on the size of the viewer’s screen. It gives you an enormous amount of flexibility to add, remove, or re-arrange the content of your email so that your subscribers will have the very best experience, no matter what device or email client they read your email on.

Pros of responsive design:

• It provides a seamless experience and is extremely flexible
• You can change almost anything about the email by using this method.

Cons:

• It can be very complex to code.
• It doesn’t work on every type of mobile device
• It will increase the weight of your email due to the extra code that’s used, which sometimes can be an issue because mobile Internet can often be slow.

Despite the cons, responsive design is by far the best mobile optimisation option. So let’s look at it in more detail

All about Responsive Design

Responsive design detects the size of the screen that you are viewing an email on. However, it cannot tell if a recipient is using a particular type of device, such as an iPhone or Android, so you can’t target subscribers with device-specific content.

• Screen size is achieved through media queries, which allow you to apply a set of styles or rules to particular screen sizes
• Media queries are supported by the most popular mobile devices like the iPhone, iPad, and Android 2.2+, plus Blackberry OS 6+, and Windows phone 7.5+.
• Media queries are not supported by Android 2.1, Blackberry OS 5, or Windows OS 7 devices, or the Android Gmail app.

Most email opens occur on a small number of types of devices, so it’s important to track your subscribers for a month or two to find out what the most popular types are used by your subscribers and then optimise for those devices. Keep in mind: every subscriber database is going to be different, and the types of devices that your subscribers use will vary according to gender, age, profession, and location, among other things.

Here are some real-world examples of what can be achieved with responsive design. The key is manipulating your email content in different ways.

Hide it

Responsive design doesn’t need to be super complicated – you can optimise email by simply hiding the navigation:

• This makes the email a lot less cluttered and easier to navigate
• It puts the main content in a more prominent location for mobile users
• It removes any distracting links that mobile users would probably find hard to click on anyway.

Other considerations:

• Don’t forget your subscribers will often be multitasking while they read your emails, so remove secondary messages and put your most important content front and centre.
• Another option is to optimise the header of emails by hiding any unnecessary text or links and reducing the navigation to the most popular links or pages on a website.
• You can also remove a hero image at the top of an email for mobile users so they can immediately read the main message without having to scroll; you will likely get better click-through and conversion rates as this pushes your main message well above the fold.

Move it

With responsive design, you can move content instead of hiding it:

• A multi-column email becomes a single column, making it easier to read and navigate.
• This technique is especially useful if you have a lot of content that you would prefer not to hide.

Swap it

It’s also possible to replace large images with smaller, mobile-friendly versions:

• This is a great solution if you have large images or logos which don’t look good or are un-readable in mobile environments
• You can also replace low-resolution images with high-resolution versions that will only be displayed on retina screens such as the iPad 3 and iPhone 5

Add it

One thing that isn’t done too often but is another great option is adding mobile-specific content or calls-to-action for mobile users:

• Add an extra call-to-action at the bottom so that the user doesn’t have to scroll back up the page to click through.
• Making small changes like this really can lead to a higher click-through and conversion rates.

Completely replace it!

Finally, it’s actually possible to completely replace your email with a mobile-friendly version using responsive design:

• This is a great solution for marketers that send imageonly emails – however it does require that you design two different versions of your email.
• Retailers using image-only emails and with a large percentage of mobile users should definitely test this option – you may find that the extra time and effort results in higher click-through and conversion rates.

Implementing responsive design doesn’t have to be hard. Start off with simple techniques like hiding unnecessary content and rearranging the layout of your email into a single column. Once you have that mastered you can move on to the more complicated things like optimising your images for retina displays and adding mobile-specific calls-to-action.

Mobile Design Considerations

No matter what mobile optimisation option you use, there are some key design considerations you need to keep in mind:

One email. Many screens. The key here is to track the most popular Webmail, desktop, and mobile email clients:

• These need to be taken into consideration when you’re re-designing your emails
• The top clients will change over time, and you’ll need to change your email designs accordingly

Design for fingers and thumbs. You aren’t just designing for a computer mouse anymore – half of your subscribers are going to be using fingers and thumbs to navigate and click through on your email:

• Make it easy to click through by including large buttons with plenty of white space around them.
• Don’t use tiny text URLs embedded within paragraphs if you can help it.
• Clusters of links are also extremely hard to accurately click on.

Go large. In general, you should go large on everything from fonts, titles, and calls-to-action:

• It’s better to have less copy in a larger font size that people can easily read than lots of content crammed onto a small screen.
• It’s also easier to read text on a small screen if you have plenty of white space and a large line-height.

Accommodate one-hand usage. As many as 50% of mobile users hold their devices with just one hand:

• Keep this in mind when deciding where to put your buttons and other calls-to-action – the easier you make it for the user, the higher the click-through rate you’re likely to get.
• Test by sending yourself an email and try clicking through on your own mobile phone.

Optimise emails for image blocking.

• The iPhone and iPad are the only mobile devices which download images automatically.
• Be sure to use HTML text and alt tags in your images.

Design for proper rendering across different device types:

• The Android, for example, crops the email and only displays the top left corner; whereas the iPhone zooms out to display the entire email.
• If you have a large number of Android users in your database, you might want to left-align your call-to-action and make sure it’s above the fold.

Conclusion: Implementing a Mobile Optimisation Strategy

Marketers who leverage mobile marketing at its best will provide unique experiences for consumers, regardless of time or space constraints, in ways that are differentiated, relevant, and intensely personal. Now that you’re up-to-date on the reasons why you should optimise your emails for mobile and the options available for doing it, you’re ready to get started on an optimisation strategy and keep it performing well:

1. Track your subscribers to find out what mobile devices they’re using. It’s likely that you have a very large percentage of subscribers using mobile phones to read your emails, and most of them will probably be using the iPhone. However, every database is different, so it’s important to track this yourself.
2. Determine the best way to optimise your emails based on analysis of what you learned about your subscribers’ mobile usage. In most cases responsive design will be the best solution for optimising, but not always – if yours is a business-to-business (B2B) company with a large number of Blackberry users, for example.
3. Implement your new design – but make sure you thoroughly test it first! A new design is never 100% guaranteed to return better results. If the design has a negative impact on your conversion rate, then it’s time to go back to the drawing board and figure out what’s wrong. Only once you’ve found the best solution should you roll out your new design to your entire database.
4. Finally, keep tracking! Just because the iPhone is currently the most popular mobile device doesn’t mean that won’t change in the future. New devices are coming out all of the time, and you need to be ready to optimise for them to keep all your subscribers engaged and converting.