Mobile websites must die – Manage one website with responsive and adaptive designs

We often hear clients say they need a mobile website and strategy. But building and maintaining a mobile-specific website is making less and less sense for several reasons:
 

1. Mobile includes an increasingly wide range of displays
2. Mobile devices are being used in more and more contexts
3. People expect full website functionality on their phones
4. Maintaining multiple versions of websites is too costly
5. New technologies are making “all-device” websites easier

“You only need one Web design: a multi-device design.”
                       Luke Wroblewski – UX Immersion Mobile Conference, April 2013

Mobile includes an increasingly wide range of displays

As you’ve probably noticed, the range of so called “mobile” devices with web connectivity continues to proliferate. The range of screen sizes and resolutions we need to support is staggering.

The ASUS Transformer Tablet has 11 times more pixels than an iPhone 3GS and more than many laptops or desktops. Also note that screen size does not predict resolution or vice versa.

For example the Galaxy S4 Smartphone, with a 5” display, has the same resolution as the Dell XPS 12” tablet hybrid. However, the S4 packs over 2.5 times as many pixels per inch. Thus touch targets of equivalent pixel dimensions are 6.25 times smaller on the S4 compared to on the Dell device.

To optimize your customers’ experience your website design must adjust to work well on a wide variety of displays – not just small or large. Both the physical dimensions and the pixel density have to be considered to ensure adequate size touch targets. Traditional mobile-specific websites do not adapt to screen size very well.

Mobile devices are being used in more and more contexts

Several studies (e.g. Nielsen Survey, 2011) have shown that so-called mobile devices, like phones and tablets, are more often used when not mobile. For example, tablets are used 30% of the time while watching TV and 21% while in bed. Only 4% of use is while commuting and 4% while shopping or running errands. Smartphones are used 20% of the time while watching TV, 11% while in bed, 12% while sharing with family and friends, and 12% while waiting for something in a fixed location.

Google research indicates that 77% of “mobile” searches happen while at home or at work, with only 17% “on the go”. Since we cannot predict the context of use, just because someone is on a cell phone or tablet device, we need to provide for many different contexts of use – office, home, on the road, in a plane, outdoors, etc.

“Screen size DOES NOT imply context of use”
                       Karen McGrane – UX Immersion Mobile Conference, April 2013

Most mobile-specific websites to date have provided only a subset of simple transactions and content geared towards people while they are mobile. Obviously this leaves out the majority of contexts in which people are now using their mobile-capable devices.

People expect full website functionality on their phones

Google research also found that 3 of 4 searches on mobile devices trigger follow-up actions, such as continued research, visiting a retailer’s website, making a purchase, or sharing information. People expect to be able to access any content and conduct any transactions from their phones or tablets.

Karen McGrane’s work and other research indicate that it is impossible to guess what subset of content a so-called “mobile” user wants. Often a task extends across multiple devices – starting a task on a desktop and completing it on a phone or vice versa.

A good example of this comes from research done by Intuit when prototyping their SnapTax product. This web-based application allows people in the US to snap a picture of their W-2 tax form with their phone and have it convert the image into a tax form, filling in the appropriate fields. The team originally thought people would complete their tax filing from a desktop or laptop but had to modify the product requirements when they discovered people wanted to be able to complete the whole process on their phones.

More and more people are shopping online using their cell phones and tablets. Mobile commerce sales were near $25 billion in 2012, up 81% and are expect to continue climbing exponentially. Mobile sales accounted for 11% of total e-commerce sales last year.

User expectations are changing. Many universities are discovering students expect to be able to use their phones to apply online. When Regent College optimized their website for screens of any size they realized a 63% increase in online applications.

Because of these expectations and behaviour – expecting full content on mobile devices and the ability to complete even complex tasks – it makes no sense to provide mobile users with a different experience.

Maintaining multiple versions of websites is too costly

Creating and maintaining a separate mobile website and multiple templates for different size displays can be very costly for a number of reasons due to:
 

• Duplication of content and effort
• Problems with out-of-sync updates
• Higher support and QA costs
• Proliferation of different screen types requiring even more variants

Responsive or adaptive designs allow you to maintain a single website that works well on displays of all sizes and resolutions. Responsive design involves delivering the whole page of content to the client (phone, tablet, laptop, etc.) and relying on the browser and client-side code to format the content appropriate to the display attributes. Adaptive design involves detecting the client device characteristics and then having the server deliver a page already optimized for the devices display attributes and capabilities.

Creating an effective responsive or adaptive design can add to development time and cost but it can be well worth it. The payback can be huge and immediate.

For example, the O’Neill Clothing ecommerce website switched to a responsive design and measured before and after user behaviour. The A|B test conducted by Electric Pulp found that making the change doubled transactions on Apple devices and quadrupled them on Android devices. Revenues from sales on mobile devices increased by 200-600%.

New techniques are making “all-device” websites easier

As more developers work with responsive / adaptive design technologies and techniques some best practices are starting to evolve. A hybrid approach often works best – doing a bit of both adaptive and responsive design. Detect the basic device attributes to “adapt” the page on the server so the minimal amount of code and content needs to be sent to the device and then have “responsive” code make the final adjustments on the client side for an optimal display.

Another technique, called progressive enhancement, ensures the basic textual content is delivered quickly with small, low resolution images. The low-res images are then replaced with better quality images as soon as the bandwidth permits. This allows users to start consuming the content right away, even if on a slow internet connection.

Both responsive and adaptive design rely on breakpoints and presentation rules to determine at what point the page will load differently, based on the amount of real estate, resolution, and other device attributes such as being touch enabled. The Bostonglobe.com currently uses 6 breakpoints that you can experience by visiting the Boston Globe website on a large monitor and then reducing the width of the browser window. Watch as the text reflows, images reduce in size, navigation bars condense into a navigation menu, etc.

The way forward

The Holy Grail might not be here just yet, but the direction is clear. We need to design for a multi-device web so we can create once and publish everywhere. Don’t try to boil the ocean. Identify the current top tasks your customers are trying to accomplish on smaller screen and mobile devices and evolve your tools, processes and workflow to provide a responsive / adaptive design for these tasks. Over time the new designs will expand and replace the legacy website.

Often people find it easier to design for the smaller screen sizes first as this ensures the top tasks and content are properly identified and prioritized. This makes it much easier to later add “nice to have” enhancements to the user experiences on larger displays.

While you’re at it, don’t forget to clean out the ROT – Redundant, Out-of-Date, and Trivial content.

“Task-based content is what the user needs or wants to complete their current task – nothing more, nothing less.”

 
Suggested other reading:

• Case study data on the positive impact of providing a responsive design
• Article: A separate mobile website: no forking way by Karen McGrane
• Detailed summary of how to address different breakpoints for content presentation
• Principles to guide multi-touch and gesture user interaction design: Coping with anarchy
• 6 Myths about the Mobile User Experience