I work for CIPD. Our website is great. Well, it’s not exactly great. But it has a lot of great content on it. It’s just that it’s very hard to find anything on the site. And if you try to access it on a tablet, or heaven forbid, a mobile phone, you could find your eyes bleeding with the effort pretty quickly.

We’re currently embarking on a website re-design. I’ve been thinking about this for a while, having read Luke Wroblewski and the great Karen McGrane earlier this year.

This is very much my personal response to the original proposal that CIPD should embark on a ‘mobile first’ approach to its website re-design and is written from a content strategy perspective. I wanted to know what was meant by ‘mobile first’ and where the term came from. The more I read, the more I realised that a ‘mobile first’ approach has certain limitations.

And the more I investigated, the more I realised we should be looking to a responsive web design as a way to deliver a single site that will respond to the increasing array of screen sizes (including mobile). But responsive design is only part of the solution, the other part being adaptive content, which will require a carefully thought-out content strategy.

We need to be careful about creating separate ‘satellite’ mobile sites, and make sure we don’t use ‘mobile’ as an excuse for a ‘contextualised’ experience, or the wholesale decimation of useful content that currently resides on our website.

Responsive web designs are increasingly used by content-rich organisations, a selection of examples are provided here – for viewing on a modern, resizable browser as well as on various devices.

First use of ‘mobile first’

Luke Wroblewski first advocated for a ‘mobile first’ approach to web design in late 2009 and expanded his position further in his book Mobile First (A Book Apart, 2011).

…things have changed so dramatically over the past few years that starting with the desktop may be an increasingly backward way of thinking about a web product. Designing for mobile first now can not only open up new opportunities for growth, it can lead to a better overall user experience for a website or application.

Wroblewski says that by designing primarily for mobile, rather than the desktop, web designers (and by extension the businesses they work for) must streamline the navigation, simplify the design, improve performance, and focus the content and services delivered to the user. Mobile first ‘has a laser-like focus on what customers need’ when they’re using their mobile phones. And by focusing on the mobile experience, that experience is improved for all users; no matter what device they are using to access the site.

Just because users are on their mobile phones…

Wroblewski argues that because people often use their smartphones in shorter bursts, mobile usage can be characterized by particular interaction types:

Lookup/Find: I need an answer to something now—frequently related to my current location in the world.

Explore/Play: I have some time to kill and just want a few idle time distractions.

Check In/Status:Something important to me keeps changing or updating and I want to stay on top of it.

Edit/Create: I need to get something done now that can’t wait.

and that mobile experiences should be structured and organised to meet those needs.

…You can’t assume you know what they’re doing

Karen McGrane however, in her book Content Strategy for Mobile (2012, A Book Apart) argues that we cannot infer anything about the behaviour of the user from the fact that they are accessing a site from a smartphone.

‘Mobile’ doesn’t necessarily mean you’re on the move. …People use every device in every location, in every context. Knowing the type of device the user is holding doesn’t tell you anything about the user’s intent. Knowing someone’s location doesn’t tell you anything about her goals. You can’t make assumptions about what the user wants to do simply because she has a smaller screen. In fact, all you really know is: she has a smaller screen.

One of the common misconceptions about mobile is that users only want task-based functionality:

Do people want to look it up? They’ll want to look it up on mobile. Do people need to search for it? They’ll want to search for it on mobile. Do people want to read it, deeply and fully? They’ll expect to read it on mobile. Do they need to fill it out, document it, and enter it into the system? They’ll need to do it on mobile. Think of any piece of information people may want to access on the internet. They will need to access it on a device that isn’t a desktop website.

I think McGrane is correct: we cannot guess at what our users, readers, customers want from a site simply because they are accessing it from a smartphone. Designing for the ‘mobile context’ mustn’t be used as an excuse to make mobile an inferior experience. Smartphones are the truly ‘personal computer’ of the early 21st century and we are using them for every kind of interaction that we had on the desktop as well as a whole host of new interactive transactions that are unique to the smartphone (e.g. augmented reality using the camera; location-specific information and services based on data from GPS and phone mast triangulation).

Responsive web design is only part of the answer…

Responsive web design – Ethan Marcotte’s revolutionary amalgam of fluid grids, flexible images, and media queries – is a powerful technique to optimise the design at the front end (i.e. as it is delivered) to the device’s size, resolution and capabilities. See my forthcoming blog on Responsive design: The basic principles for more information.

Responsive web design can make a single site accessible, usable, navigable and beautiful across all devices – from oversize Smart TVs, through laptops, tablets, ‘phablets’, and smartphones. Having a single site is also a way of ensuring that separate ‘mobile’ sites (or Apps) are not built: unloved satellites of the ‘main’ (i.e. desktop) site.

There is no reason why a responsive website cannot support content-rich web experiences, as is demonstrated in the examples listed at the end of this post.

It is adaptive content that is the other piece of the puzzle that will help CIPD and other content rich organisations to optimise and deliver content to whatever device the reader finds is appropriate to their particular circumstances.

The best marriage, then, is between adaptive content and responsive design. Responsive design, working with adaptive content, seamlessly displays content on whatever device the user chooses to view it on.

…Adaptive content is the other

Adaptive content is format-free, device-independent, scalable, and filterable content that is transformable for display in different environments and on different devices in an automated or dynamic fashion. [It] automatically adjusts to different environments and device capabilities to deliver the best possible customer experience by filtering and layering content for greater or lesser depth of detail.

And for CIPD that means ensuring that we have a robust strategy in place that can deliver and sustain adaptive content.

Examples of content-rich responsive sites

The following examples should be viewed on a modern, resizable browser to demonstrate responsive design in action:

Summary

We must ensure that ‘mobile-first’ doesn’t become an excuse for a separate, satellite mobile site, where the ‘contextualised’ content and functionality resides (i.e. what a user might need when she’s ‘on the go’!), but the main (desktop) site remains pretty much status quo.

Nor should it be an excuse for a ‘slash and burn’ approach to our web content to make it more ‘mobile friendly’. Instead, the content that is currently hosted on the site should be carefully evaluated as part of a content audit to check for what is current, useful, well written (or otherwise) and relevant. Content that is quantitatively valuable should be assessed for its fitness as ‘adaptive’ content and re-worked/marked up accordingly. (See my forthcoming post on website content audit.)