Most conversations about mobile strategies include the following two perspectives: limited resources of devices require new technical approaches, and mobile use cases are different and demand unique content and application features.

As we’ve settled into our new multi-device lifestyles, a new perspective has entered into these conversations: finding different content at the same place on different devices is a problem and flies in the face of web accessibility and common sense.

It is very frustrating to search Google using my iPhone, find what I am interested in and then be subsequently redirected to the home page of a mobile site that lacks the content I saw on Google. It is similarly annoying to open a link to a new article that a friend recommended to me and find a 120 pixel wide strip of text on my 21” desktop monitor.

The w3c has also recognized this issue and, in response, promotes a concept called One Web within their mobile best-practices. This concept can be distilled into three primary principles: all content should be accessible regardless of device, layout and behavior of that content can and should change based on the device capabilities, and users should have their choice of available presentations.

A good example of these principles in action is the Filament Group's web site. The site is built using their open source enhance.js library. Enhance.js detects the capabilities of the browser and loads additional scripts and style sheets that fit those capabilities. As a result, the content of each page is presented in one of three layouts depending on the size of screen and the browser's ability to accurately render the layouts. The site supports three categories of devices: basic, handheld and desktop. Links at the bottom allow users to override the default when necessary.

Progressive Enhancement: a single use context is presented on multiple device contexts

This strategy almost exclusively addresses the technical differences between the device contexts. The context of use is assumed to be similar for each layout. To make content fit smaller screens, some content is rearranged or hidden, but the basic organization of the site and features available remain the same. This approach delivers on the One Web promise, but does not easily scale to support fundamentally different interactions that your specific use cases may require.

A common alternative to the progressive enhancement approach taken by the Filament Group is to provide a separate site built from the start for mobile devices.

Context Specific Sites: two contexts of use serve two different device contexts

The advantage of separate sites is that they provide more flexibility to fully customize the content, experience and presentation for the mobile context of use and to more efficiently deliver code and assets optimized for the device. However, when combined with the practice of redirecting devices to the appropriate site, these distinct sites with specific feature sets make it difficult to deliver on the One Web concept.

For this reason it is important to separate device contexts from contexts of use rather than binding them one for one to each other. By separating these contexts and combining a strategy of use-specific functionality with progressively enhanced interfaces, your mobile strategy will be clearer, more efficient and more flexible.

Disconnect the contexts of use from device contexts

When formulating a multi-device strategy, first determine if there are multiple contexts of use that dictate different features and user flows. Some sites, like The FIlament Group's, might only require one context of use. Others will require more. A distinct context of use may require a standalone site, or it may fit into an existing site as a new feature or section. For example if much of your existing content is relevant to mobile users, but you want to provide features for them to more easily find your stores, those new features can be integrated into your existing site and prominently featured in the mobile layout of the home page.

Identify the contexts of use appropriate to the project

With the contexts of use identified, consider how each experience will be rendered on different devices. Decide which devices will be used most often for each context of use and prioritize those efforts. Identify which classes of devices can share the same layouts. Once you have a sense of how many primary interfaces there will be, determine the right technical approach for implementing them. In many cases, progressive enhancement and media queries will give you the flexibility to adjust the layout for each class of device. Server-side options may also be needed for sites with rich media and complex application logic.

Devices with shared implementations are grouped withing each context of use

Completing a matrix like this will help clarify your approach to mobile. It forces conversations about both the contexts of use and the specifics of device capabilities. Furthermore, when a new device comes along, you'll ask questions like: Do I need to adjust any existing layouts to better serve this device? And, does this device introduce a new context of use that will benefit the site's users? Handling existing devices with flexible interfaces is generally more efficient than building device-specific sites. Reserve new site development for use cases that are fundamentally different from your present offerings.

If you identify the contexts of use first, the requirements for reaching different devices and the technical solutions for doing so will fall into place more cleanly.