Despite mobile browsing continuing to outpace desktop based browsing at a staggering rate many organisations and their websites are still are lagging woefully behind when it comes to mobile. Matt Gibson from Cyber Duck looks at the increasing importance of Adaptive web design and how to make it work for you.
The vast majority of your audience are soon going to be using mobile to visit your website.
According to internationally renowned designer Luke Wroblewski, in his excellent “Mobile First” book, mobile web growth has outpaced desktop web growth by 800% and it’s growing even faster than originally anticipated.
Despite mobile browsing continuing to outpace desktop based browsing at a staggering rate many organisations and their websites are still are lagging woefully behind when it comes to mobile.
Focus on making your website feel native before making a native app
Whilst some companies have gone down the native app store route, they often do so without considering why they need a native app in the first place and what value it’ll provide their users. Now this is not to say that some of these apps do not provide value and worth to their users, eBay’s app being a good example.
Of course, the benefits of a native app are that you have greater control over performance and access to device APIs such as the camera or GPS that at least for the time being are only available to native apps.
However, as Steve Sounders (a web performance and open source evangelist at Google) points out in his article “Web First for Mobile” companies invest an enormous amount in communicating URLs and “URLs don’t open apps”. To emphasise this, Steve shows how Facebook’s mobile website traffic is double that of both the iOS and Android native apps put together.
So whilst you may have a great app, don’t assume your users will download it. Many, if not most mobile users will search for and engage with a company through their website.
This is where the importance of adaptive design comes in, focus on giving your mobile users and customers a native experience via your website.
The comparison Steve Sounders makes between the Chanel mobile website and their native app is a perfect example of this; the app has clearly had considerable investment in its development, whereas the mobile website has a comparatively far poorer experience.
The other consideration quite rightly raised by Jacob Nielsen is that the expense of building and maintaining native apps is going to increase because there are increasingly more platforms to develop for.
Is a responsive layout the answer?
Since Ethan Marcotte’s seminal article on A List Apart back in 2010, responsive layouts and designs have gained significant footing in the web development community.
Responsive design indicates that a design responds according to its environment (the width of the browser). As such, the focus of responsive design surrounds content and how it is laid out. This means that if the content is viewed on a mobile device, tablet, widescreen laptop or a desktop PC, the designs responds to display the content in a way that optimises the space available. You can find some excellent examples of responsive design here.
This can be achieved via CSS media-queries or a fluid/liquid percentage based grids or even a mixture of both to enable the website to respond to the size of the browser.
The notable point here is that the content stays the same; it has (or should have) been created in a way that it will gracefully flow despite the layout or grid changing and responding. By resizing the browser on desktop, users can see the grid respond accordingly, but ultimately they are being delivered the same content.
It’s understandable why this concept has become a popular one in the web development community; people want a solution that tailors their website for mobile as well as desktop without the overhead of developing a separate mobile website and moreover separate mobile content.
Ecommerce websites in particular should be considering responsive or adaptive websites. As an example, let’s reflect on how many mobile customers Firebox.com has no doubt lost through a poor mobile experience. Now compare Firebox to Tattly.com that has an optimised mobile web browsing experience via a responsive layout. Which website (products aside of course) would you feel more comfortable purchasing from on mobile?
Optimising for mobile shouldn’t be a nice-to-have, it should be a must-have for any website now. Consider that 79% of US smartphone and tablet owners have used their mobile devices for shopping-related activities in 2012 according to research conducted by Nielsen . That means, even if users don’t purchase directly on their mobile device, they will at least conduct some of their research related to a purchase on mobile. This could range from researching or comparing products to simply trying to find the nearest store to them.
But is having a responsive layout alone really enough?
Adapting user experiences for context
Adaptive design, on the other hand, means adapting what is served to the user based on the environment. As such, adaptive design is more focused on the context of the user and delivering both design and content tailored for that context.
This means you can implement touch based gestures for your users who are using touch input devices, and keyboard shortcuts for those using more traditional WIMP inputs. You can use the HTML5 geolocation API to fetch a user’s location so you can serve relevant content to them based on where they are.
In adaptive design, other sensors along with CSS media-queries can be used, from JavaScript feature detection to user agent sniffing. The result is adapting the whole user experience of the website based on the context it is being viewed in from the input method, to catering for offline use and so on. This means that the website feels like it is perfectly tailored for whatever device is viewing it, whether it is a mobile device or a powerful desktop machine.
Alternatively some decide to simply go down the route of having a separate mobile website that doesn’t use responsive layouts at all. Although this means you can tailor the content and design specifically for the context of the user, the downside is increased website maintenance as effectively content is being forked to cater for both websites. Karen McGrane puts this argument forward in her article “A Separate Mobile Website: No Forking Way”.
That said, many adaptive designs tend to be separate mobile websites that cater for the capabilities of each device; not only resizing, but rearranging elements. The Financial Times, Amazon (iPad) and BBC mobile websites are particularly good examples of adaptive design in action. The content is stripped down and repackaged in a way that is easy to navigate on a mobile device, whilst the menu is simplified rather than simply stacked (as is fairly common on responsive designs) and appears to be tailored for touch-input.
The Financial Times mobile website also makes use of HTML5 offline storage APIs so the user gets a smooth experience no matter what their Internet connection is.
Speed performance and connectivity is one of the key reasons to consider a truly adaptive approach. Users expect a mobile website to perform like a desktop website. Developers can either replace or remove images or information on the mobile website that isn’t critical to user experience.
Many mobile users won’t have access to a solid WIFI connection, so bandwidth restrictions should be a key consideration of any mobile website.
To highlight this, Gomez Research found that if a page takes more than 2 seconds to load, users are 40% more likely to abandon that site . From this they extrapolate that “for the $100,000 per day ecommerce site, a one-second delay means $2.5 million in lost revenues in a year”. That’s a conversion rate of 7%. Companies should ask themselves, can I afford to reduce our potential revenue by this much, rather than can I afford to invest in mobile optimisation.
That said, don’t assume what users want or need from your website on mobile when optimising your content and design. Bruce Lawson (open technology evangelist for Opera) makes this point “you never know better than your users what content they want” by citing an interesting example of Tesco Access users. The users of the separate accessible website complained that special offer advertisements presented on the main Tesco website were hidden from the access site meaning they were excluded from these offers.
So if you are producing a separate mobile website, it is very much worth considering giving the user the choice to view the full desktop experience if they wish.
Ultimately the decision of utilising a responsive layout or producing an adaptive mobile website should be based on your website’s statistics and what you can afford to spend on future maintenance. It’s your users that matter, so before investing in the mobile world, see if people are coming to (and dropping off) the website on mobile devices.
What’s clear is that as mobile web usage continues to grow at an incredible rate, more companies will need to sit up and begin taking mobile more seriously. Whether that means taking a mobile first strategy with their website or just optimising for mobile alongside their desktop website, companies will increasingly find that ignoring mobile users is no longer an option. The cost of investing in mobile will be far cheaper than the cost of revenue lost from frustrated mobile web users.
By Matt Gibson
Production & Marketing Director
Cyber-Duck
http://www.cyber-duck.co.uk/
