mobile web content

7 ways to take your content mobile

Mobile access to web content is a key trend in digital marketing, with many companies adopting a mobile first strategy.  Desktop-only sites are set to become dinosaurs, so now’s the time to refresh your web strategy with mobile in mind. The options for taking your content mobile can be confusing – responsive and adaptive design, hybrid and native apps, or a separate mobile site – so here’s a brief guide to the seven key ways to take your content mobile.

Why mobile?

Without doubt the proportion of website visits from mobiles and tablets is growing, with estimates of around 30% depending on the sector. At the same time we know that visitors are using multiple devices to access the web, so any mobile content strategy needs to recognise that users aren’t in silos and will switch from desktop to mobile to tablet at different times. Visitor behaviours are emerging that can give clarity to a mobile strategy as, for instance, visitors are less likely to transact via smartphone than via tablet or desktop.

So how do you ensure that your online content is accessible anytime, anyplace, anywhere? (what we call “Martini Marketing”) Here we outline the seven key ways to take your content mobile.

1. Standard website

If you’re a small business, or an organisation with a huge library of web content, then a standard website may still be a good option for you.  It keeps all content in one place, making it easier to manage. Most mobile devices allow you to zoom in to read content, so whilst it is not optimised for mobile your content is still accessible.

For: The whole of your content is available to all viewers. It puts user in control of their user experience, not making any assumptions as to what the user wants to navigate to.

Against: Navigation and images can disrupt user experience, as the navigation that works for a desktop website won’t work for mobile, for instance button and links will be too small for touch screen devices. To counter this you would need to design your site with all devices in mind, which could make for a pretty bland desktop experience.

2. Responsive design

Responsive design is a device-neutral design principle, meaning that the design should look great no matter how you view it.

Your site is reconfigured by the browser, adapting to the size and functionality of device being used. This means that the elements on the page are re-arranged depending on the screen size.  You can test this by changing desktop browser size for the examples below.

For: Businesses can have their entire site available to all users, with scalable images. The site design prioritises the elements that are most likely to be of interest to users of each device, and strips away the other aspects to improve the user experience.

Against: Because you and your web designers will determine the features and content that are available for each device, and the order in which they are displayed on the page, you are making decisions on behalf of the customer as to what they want to see. This could annoy the visitor or be damaging to the business if you get it wrong.

Whilst some differences in user behaviour are catered for, the content and design are not fully optimised for specific devices or user behaviours. Check out these examples:

www.currys.co.uk

www.garmin.com – notice the nice change to icons when using smaller browser sizes

www.starbucks.co.uk

3. Adaptive design

In the case of Adaptive design, the web server identifies which device being used and displays a different layout accordingly. This ensures that the user experience is optimised, and takes into account the different screen sizes of each and every smartphone or tablet device. Think of it in terms of different templates for each device, in which your content is shown.

For: All of your content is still in one CMS, but is being shown differently for each device, and you can choose to highlight different content or versions of the site for each device.

Against: To be effective you need to keep up to date with all device innovations – for instance new smartphone screensizes, Smart TV, Google Glasses and so on, which will be quite an investment. Again, you are making assumptions as to what different users want to see in terms of design and content, which might not be what they actually want.

I’ve struggled to find any great adaptive design examples – if you can recommend any please share via the comments section below.

4. Mobile website

A mobile website is an entirely separate web entity to your desktop site, dedicated to the mobile visitor.  Businesses typically redirect viewers to a specific URL when a mobile device is detected.

Mobile sites are generally stripped down versions of the desktop content and like the other approaches have some pro’s and con’s.

For: The design is optimised for mobile and/or tablet, with buttons rather than link text, making it easier to navigate.  There is typically less content, focussing on what mobile users want.

Against: Many mobile sites make the mistake of ignoring tablet users, whose browsing behaviour is more like desktop behaviour than smartphone behaviour. This can result in a bland and boring user experience devoid of engaging visual content. A mobile site is a separate asset for you to maintain technically and separate content to manage which can be a drain on resources.

http://m.bbc.co.uk/travelnews/

http://m.bbc.co.uk/sport

http://m.broxtowe.gov.uk/

mobile apps

5. Mobile apps – Web app

If the majority of your site visits are from mobile devices then an app may be the best choice. Alternatively apps are great for a specific need or occasion eg an event app, or for a specific function eg balance checking.  There are two or three different approaches to mobile apps to consider.

Firstly, web apps – These are not strictly speaking an app, but actually websites that are packaged up to look and feel like an app. Users would navigate to a site and ‘instal’ them to their mobile device by creating a bookmark. Users will need an internet connection to obtain any content unless it is cached by the browser.

6. Mobile apps – Hybrid

A hybrid app is one step closer to a native app (see below), and store some data on the device, but also draw information from the internet. Benefits are that they can be listed in app stores and avoid the investment of a native app, as the amount of development work required to create a different version for each platform is reduced (but not removed entirely).

Hybrid apps are useful if you have real-time data to display such as train times, or the user is searching a large database such as a library catalogue, which would be too much data to store on the device. The size of the finished app is important when considering phone memory capabilities. Grocery shopping and news apps tend to be hybrid.

7. Mobile apps – Native

Native apps are downloaded to the user’s device and installed via app stores. An app needs to be developed specifically for each platform – ios, Android, Windows. They can integrate with the device’s own functionality eg camera, GPS etc, making the user experience more engaging. Push notifications are available and the app can work offline when no internet connection available. Many of the free games apps are therefore native.

Confusingly some native apps may still take a real-time feed over the internet when a connection is available, making it difficult to differentiate between native and hybrid apps.

Which way is right for me?

The options for taking your content mobile may seem confusing, but there are important considerations to guide your choice.

How much information do you want to make available to mobile or tablet users? Do you want to tailor the content for users of each device or let your users browse all your information?

How large is your web estate? If you have a huge amount of content it might not be realistic both practically and financially to make your content fully available to all devices, depending on the route you decide to take.

How much resource you have for maintaining different digital assets and content?

How important is a good touch screen design to your users’ experience?

How design-led are your visitors? A creative and engaging mobile experience is more important to some types of users than others.

Do want to include video content across mobile devices, as some approaches can result in videos that don’t play on mobile.

Page loading speed is extremely important, but debate rages over which approach is faster. It is however accepted wisdom that slower load times increase bounce rate. As an online retailer any delay in load time will impact on your bottom line at the rate of 1 second to a 3.5% drop in conversion.

Do you have any good examples of mobile-enabled web content to share?