The Failings of Responsive Web Design

RWD has been the mantra for website developers since the term was coined by Ethan Marcotte in his A List Apart article in May 2010; but what does it really mean.

Sorry if my question sounds rather trite, five years on, but I think some people bandy around the term without fully appreciating the amount of effort, planning and decision making required to make it happen. This is not a technical problem, it’s a business problem.

Even the initial explanation in Wikipedia is missing a crucial consideration:

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. This trend is so prevalent that Google has begun to boost the ratings of sites that are mobile friendly if the search was made from a mobile device. This has the net effect of penalizing sites that are not mobile friendly.

This is all good stuff but, no matter what grid system, range of flexible images or clever media queries you conjure the fact is: desktops and laptop screens tend to be larger, have a high resolution and are (usually) oriented in landscape, so we should not expect to present the same content on all devices. Something has to go, but what?

A friend of mine has recently completed the redevelopment of a client’s website. The design was conducted by a third party with no prior experience of the client’s business. The designs supplied were living so could demonstrate user interaction but they were not responsive. When enquiring why, the response was “The customer wanted to retain all of their existing content.”: hand smacks forehead in despair. There was no way the entire content of the previous desktop-based website was going to fit on a tablet never mind a mobile phone. So much for considering “mobile first”.

Some concessions were made as the client had stipulated the new site had to work well on iPads as “the majority of our business (which is entirely online) comes through the iPad users.”, but do they mean iPad landscape/portrait/mini?

The critical issue here is, whilst “content is king” not all content is born to kingship. There has to be some priority assigned to content to ensure the most valuable material is being presented to all users (potential customers) irrespective of the form-factor of the device they are using. However, this requires a significant level of commitment from the client as only they know the relative importance of the material.

Having conducted requirements workshops myself I am well aware of the problem of getting the client to prioritise anything – “All … is top priority.”

I have the following suggestions to make:

  1. It is vital the client is made aware as early as possible of their responsibility to the RWD process and commitment needs to be affirmed before commencing.
  2. Conduct an audit of the current and planned material to determine how best to present it and define it as a ‘prioritisable’ item.
  3. When prioritising requirements we use the MoSCoW scheme, which helps get to grips with what is meant by priority and can be applied in a variety of ways. Content is entirely a client responsibility, facilitated by the designer (or Information Architect) but more on this later.
  4. All priorities are relative, so when presented with a bunch of high (“Must have”) priority items, ask the client to place them in priority order. Pick up two items (or post-it notes with the name of the content on) and ask “If one of these failed to get displayed on a client’s iPad because they lost connection to the Internet, which would to rather they saw?” This question serves several purposes. It places the priority question in a real-life context. There is no suggestion that the site has failed to perform its responsibility, yet leaves the client with the decision.

Eventually the content should be distributed over three possibly four priorities (in order of significance):

  • M: Must haves – Without which the site is pointless
  • S: Should haves – Vital material that is required to deliver the business benefit
  • C: Could haves – Material that delineates us from the competition
  • W: Won’t haves – Obsolete material that should be removed from the site

The MoSCoW scheme helps group most, less, least and not important but the client should also be asked to classify the groups from a business perspective. The client will easily be able to identify “Won’t haves” but evaluating the ‘will have’ material is more difficult and really is a task for the client, so ask them:

“What makes content ‘Must valuable’ to the business” as this should chime with their business ethos (mission statement and values).

After identifying the “Must have” and “Won’t have” material the question is how to split the remainder between “Should have” and “Could have”. The answer there is ‘wish list’, split the material into what should only go on the site if space is available after everything else has been addressed and not before (placing the decision to include it in the hands of the designer (Could haves)), and what material needs to be included unless it compromises “Must have” material (Should haves). Excluding “Should have” material is not in the gift of the designer but needs to be approved by the client.

The final issue is more technical in nature; how best to align the prioritised content to the presentation form factors. But that is what client’s pay designers to do.

“Content may be king, but not all content is born to be king”