The Year Responsive Grew Up

In January we wrote that the industry lacked a settled method for the multiplying-screens problem, then spent the year watching one settle. So a year-end accounting is owed, and it is unusually clean.

In May 2010, responsive design was an essay. In January 2011, it was a promising technique with prototypes behind it, including ours. By this December it has a flagship proof at genuine scale, a canonical book, maturing tooling, and a vocabulary clients use unprompted. And, the part that matters most for readers planning 2012 budgets, a promotion in our own guidance. From ‘promising approach we’re prototyping’ to default recommendation for content sites. Here is the evidence that moved us, and the honest frontier that remains.

The proof: BostonGlobe.com

September’s relaunch of the Boston Globe’s site was the year’s decisive event, and worth savoring locally. The proof landed in our own city.

The objection responsive faced all year was scale. Lovely for portfolios and blogs, surely. But a real operation (a metro daily with breaking news, photography, and decades of archive) needs ‘real’ architecture.

The Globe’s team, with Marcotte himself and the Filament Group among the builders, answered by shipping it. One responsive site, phone to desktop, ads and all, performing composedly under news-day traffic. The objection did not survive contact.

We have watched the industry’s evaluation conversations change tone within weeks. ‘Can it scale?’ has become ‘they did it, so how?’ The Globe is the reference case that ends the feasibility portion of any meeting. Every technique needs its lighthouse. Responsive got its this year, and it is visible from our office.

The year’s other exhibits

• The practice got its book. Marcotte’s Responsive Web Design (A Book Apart, June) codified the technique in an afternoon’s read, and canon matters operationally. Teams onboard against a shared text. Clients can be handed the source. The vocabulary stabilizes. The pattern-sharing that followed all year built the working literature the January version lacked. Navigation approaches, breakpoint thinking, the community’s collective field notes.

• The tooling tamed the old objections. The IE problem that led every early estimate now has a standard answer, since the polyfill approach matured into reliability this year. The process patterns our summer field notes flagged, designing narrow-first, prototyping in the browser, hardened into practice. And the preprocessor workflow our March piece described turns out to pair naturally with fluid-grid math. Version-one costs, sanded, as predicted.

• The market learned the word. The tell we watch for with any technique: clients began requesting it by name this fall, unprompted, in RFPs. When the vocabulary crosses from industry to market, the adoption curve has bent. The vendors still quoting fixed-width builds without addressing the question are self-identifying, usefully.

The updated guidance, precisely stated

Our recommendation for the planning decks: content sites (which is most institutional sites) should build responsively at their next design cycle.

The maintenance math, parity guarantee, and URL cleanliness from August’s framework compound annually. The feasibility question is answered at scale. And the cost curve keeps falling as tooling matures.

The m-dot lane survives for the sharply transactional cases and the honest bridges, per the framework. What changed since August is confidence and defaults. Responsive was our lean. It is now our starting assumption, with departures requiring reasons rather than the reverse. Three clients are in responsive builds with us as we write. 2012’s proposals lead with it.

What our own year of responsive work taught

Since field evidence beats industry summary: the lessons the year’s early responsive builds are teaching, as they survive contact.

The estimate shape changed. Design phases run longer, since systems and breakpoints take more deciding than fixed comps. Build phases run comparably. QA across the device spread is a real line item that our proposals now state plainly rather than absorb.

The client-review process needed one deliberate re-set per project. The first narrow-first wireframe review confuses stakeholders trained on full-width comps. The five-minute explanation of why we start narrow, the priority argument from May’s mobile-first piece, converts confusion into the most productive review meeting of the project. Every time, so far.

Browser-resizing demos became our most persuasive sales artifact, replacing slides entirely.

And the performance discipline flagged above is not theoretical. Our second build came in heavier than its fixed-width predecessor until an image-and-asset pass earned the weight back. That is exactly the 2012 risk in miniature, and the reason budgets-and-weights now travel together in our specs. None of these lessons dent the default recommendation. All of them price it honestly, which is what field evidence is for.

The honest frontier, named for 2012

Year-end honesty about what is not solved, because our credibility rides on naming it.

Image weight remains the open wound. Fluid layouts still ship desktop-sized images to phones. The community’s emerging techniques are workarounds awaiting a real standard, and our performance conscience will keep the pressure on. Expect this to be our most-revisited topic next year.

Responsive advertising is barely begun. The Globe navigated it. The ad industry’s fixed-size unit economy has not.

And performance discipline generally. The December 2012 risk is responsive sites that technically adapt while shipping two megabytes to cellular connections. The technique adapts layout, not weight, and the budget-thinking our speed coverage teaches must travel with it. Otherwise the mobile experience wins the layout battle and loses the loading war.

These are the assignments. The industry has earned the right to hard problems by solving the easier ones on schedule.

One closing note for the pattern file. From named essay to default recommendation in nineteen months is fast, faster than standards usually travel, and worth asking why. Our read: the technique arrived exactly when the device parade made the problem undeniable, built entirely from standards the industry had already laid, with a proof-at-scale delivered by its own author. Right idea, ready ingredients, working lighthouse. That is the recipe for fast consensus, and it is rare. Enjoy the year where it happened. 2012 gets the hard parts. See you there.