Everyone Says 2013 Is the Year of Responsive. Fine, But Read the Fine Print.

The trade press has reached its year-end verdict, and the verdict is unanimous: 2013 will be the year of responsive design. Mashable said it this month in so many words. The agency world’s proposals are saying it in every RFP response we compete against. Clients now arrive at kickoff meetings having already decided, which a year ago was our job to persuade.

We agree with the destination. We promoted responsive to our default recommendation twelve months ago and have watched the evidence compound since. That puts early advocates in an awkward but useful position: defend the idea while being honest about the cost and operational tradeoffs. Now that the label has won, defending the thing the label was supposed to mean.

A pattern is emerging in the sites shipping under the responsive banner, and in the proposals we are asked to review, that deserves a name before budget season closes: responsive in name only. A site can pass the resize-the-browser demo and still fail its mobile visitors comprehensively. The fine print that separates the demo from the outcome is exactly what the year-of-responsive coverage omits. Here it is, in requirements language you can paste into an RFP.

The three failures the demo hides

• The weight failure. The most common. A fluid layout that dutifully reflows to phone width while shipping the full desktop payload over a cellular connection. Two megabytes of images, every script, every widget. The layout adapted. The experience did not. Our performance coverage has documented the math all year, from the Retina wound to the peak-behavior data. Mobile visitors are the most weight-sensitive audience on the most constrained networks, and responsive technique by itself does nothing about weight. Nothing. The media query is not a diet.

• The parity failure. Content hidden at small widths on the theory that mobile users want less. The evidence, per our m-dot analysis and every landing-page study since: mobile visitors arrive via search and shared links seeking your actual content. Hiding it converts the responsive site into an m-dot with better URLs. Display fewer things at once, certainly. That is priority design. Deny access to content, never. That is the apology-button pattern under a new name.

• The input failure. Layouts that adapt while interactions do not. Hover-dependent menus surviving into touch contexts. Tap targets at cursor sizes. Forms that fight the phone keyboard. The 2007 field-notes list, still being reshipped in 2012 under a responsive banner, because the checklist covered layout and nobody walked the tasks with a thumb.

The requirements language that buys the outcome

If you are commissioning responsive work in 2013, the difference between the adjective and the outcome is what the contract measures. Our suggested clauses, drawn from our own proposals.

A performance budget with numbers. Page weight and request ceilings per template. Load-time targets on a named cellular profile, measured at acceptance. The budget discipline our speed coverage installed, now written into scope.

Full content parity. Every piece of content reachable at every width, with presentation adapted rather than access denied, verified against a content inventory.

Input-agnostic interaction. All functionality operable by touch, keyboard, and mouse. Tap targets at humane sizes. Walked task-by-task on real devices at acceptance.

Device-lab verification. A named set of real phones and tablets, not just resized desktop browsers, because the simulator lies about exactly the things that matter.

A vendor who welcomes these clauses is selling the outcome. A vendor who bristles has told you which one they were selling, conveniently before signature rather than after launch.

How to verify, not just specify

Requirements only bind if acceptance checks them, so here is the verification session we now run at project close, offered as a template.

Weight: the top ten templates loaded through a throttled cellular profile with the browser’s network panel open, totals recorded against the budget, in writing.

Parity: the content inventory from the project’s content-first phase walked at phone width, every item reached, checked off literally.

Input: the top tasks, executed start to finish on the device lab’s actual hardware by someone with ordinary thumbs. Request info, donate, register, find the person. Ideally a volunteer from outside the project team, because the builder’s fingers know where the bodies are buried.

Time cost of the full session: half a day. What it has caught on real projects this year: a tag manager’s payload nobody had counted. A hidden-at-mobile section that hid a required disclosure. Counsel was interested. And a donation flow whose card fields fought the phone keyboard on exactly the screen where generosity dies.

Each was fixed in days because it was caught at acceptance. Each would have been a quiet quarterly loss in production. Half a day. Run the session.

Why the label drifted, briefly, without villainy

Fairness requires the diagnosis, because the drift is structural rather than cynical. Responsive won the argument faster than the industry could retool. Nineteen months from essay to default, per our year-end accounting last December. Demand for the label now exceeds the supply of teams fluent in the full discipline.

The layout technique is teachable in a season. The performance culture, the content-first process, the input rigor are practices that take longer to build. The market gap gets filled the way market gaps always do: with the checkable subset.

This is the normal adolescence of every successful technique, and the correction is the same as ever. Buyers who specify outcomes, and practitioners who publish the fine print. Both are happening. This post is our contribution to the second.

The year-end position, restated for 2013

So: yes to the year of responsive, sincerely. The destination is right, the momentum is real, and the sites doing it fully are the best multi-device work this industry has produced. Our default recommendation stands and strengthens.

What we would have every reader carry into budget season is one sentence of calibration. Responsive is a layout technique inside a mobile strategy, not a substitute for one. The strategy is layout plus weight plus parity plus input, specified and verified.

Buy the outcome, not the adjective. The trend pieces will keep the adjective famous through 2013. The fine print above will keep it honest, at least on the projects our readers commission. That is the available victory, and after seven years of this work, we will take the available victory every time. See you in January, with a new year’s worth of it to do.