iA


One Web, Multiple Experiences

by Shareef Ayyad. Average Reading Time: almost 4 minutes.

The whole industry seems to be neck deep in responsive web design at the moment, with sites popping up all over the place. It’s been almost 18 months since Ethan Marcotte’s infamous introduction to the concept, and the launch two weeks ago of the Boston Globe responsive site is its first real test on a high-traffic, high-powered content management system.

My favourite so far, though, has been Naomi Atkinson’s responsive site – and not just because of its gorgeous design. She has used JQuery Masonry to simulate the re-ordering of the divs as the viewport’s width gets narrower. Resize your browser and check it out, it’s great! That little injection of user feedback boosts the user experience no end.

Mobile users won’t need that, right?

Whilst working on making our own agency site responsive, the question of whether to remove certain content from the mobile layout kept popping up. During the discussion, my initial gut reaction was “hell no” as I, firstly, thought it would be a mess to do technically, and secondly, am of the firm belief that we as web designers can’t possibly be able to assume what a mobile user might want to view or not. I didn’t realise it at the time but my mind was reverting back to Jeremy Keith’s article on the notion of One Web, where he states:

I think there’s a real danger in attempting to do the right thing by denying users access to content and functionality “for their own good.” It’s patronising and condescending to assume you know the wants and needs of a visitor to your site based purely on their device.

Now, here Jeremy was discussing standalone mobile sites (like those with an m. extension) versus desktop sites, but the argument is still valid for responsive design. Admittedly, others in our discussion put forward the strong case of the National Rail mobile site. It strips away everything from the desktop version of the site leaving the most important information – train times and fares for the next three departures.

This is purely on the assumption that a user would only be visiting the site on a mobile device for an urgent need to check train times. Now, I can’t argue with that particular user scenario, stripping away the rest of the content works, and works perfectly.

And there are obviously some types of content that can be removed without causing too much trouble. Paul Boag has recently responsi-fied the Boagworld blog, and he chose to remove the left sidebar on narrower screens (see Dan Sheerman’s profile on the left vanish when the browser window is narrowed).

But, to be completely honest, even this bothers me. Perhaps I am being selfish, but I want to be able read Dan Sheerman’s profile on my iPhone. I want the option to read everything on the dekstop version of a site, on my mobile device also. I feel robbed damn it!

Give up man, the screen is too small!

This whole subject has been bugging me for a while now, until this morning when I read Stephen Hay’s responsive web design article in .Net Magazine (Nov’11, p.45). It reads:

I’d suggest bringing a platform-agnostic approach to content and a platform-aware one to user experience.

I seriously couldn’t have put it better myself. We as web designers shouldn’t discriminate against our mobile users by removing content. It is up to us to craft websites that reposition the content to suit the viewport’s size. This could be as simple as making everything fit into one column, or as complex as hiding content in accordions or tabbed blocks, for the user to reveal when needed. In other words, we need to build one web, and cater for multiple experiences on smartphones, older mobile phones, desktops, laptops, tablets, and even widescreen TVs.

Returning back to the case of the National Rail website, it is obviously appropriate to place the journey planner at the top of the page on small screens, but access to the rest of the content about pet travel, disabilities information, season ticket details etc, should be worked into the page below in a user friendly manner. Mobile users shouldn’t have to click three or four times to find their information.

I know it won’t always be possible, but we have to get away from these sweeping assumptions that mobile users are “on the go” and the best way to do that is by performing research, specific research, on a project-by-project basis that will inform our responsive web designs.