Mobile First Is a Discipline, Not a Screen Size

The most useful design constraint we have adopted this year fits on an index card: design the small screen first.

The idea has a champion. Luke Wroblewski has been developing the ‘mobile first’ argument since 2009, with a book on the way. It has a corporate endorsement of sorts, too. Google’s leadership spent last year telling developer audiences to think mobile-first.

It also has a common misreading that costs teams the benefit, so let’s establish early what the practice actually is. Not a mobile tactic. Not a phone-features strategy. A forcing function for the conversation every web project needs and defers: what, of everything this organization wants to say, actually matters most? We have run our first projects under the discipline this spring. The card stays on the wall.

Why the small canvas forces the real conversation

Start with the arithmetic of attention. A desktop layout at 1024 pixels offers roughly five times the canvas of a phone at 320. Five times the room for the org-chart navigation and the six competing calls-to-action. For the carousel appeasing four departments. For the widget footer nobody has examined since launch.

Desktop-first design never has to choose, so organizational politics fills the space. Every stakeholder request finds a corner, and the homepage becomes the minutes of an unresolved meeting.

The 320-pixel canvas cannot host that meeting. Something goes first, which means something is first. The priority question, dodged in every requirements workshop by ‘all of it matters,’ finally gets answered. In pixels, where everyone can see it.

Design the phone view of your homepage and you have produced, whatever else, a ranked list of what your organization believes matters. That artifact is worth the exercise even for teams that never ship the mobile view. Though they should, and here is where it connects to the year’s larger current.

The architecture half: progressive enhancement, again

Mobile-first pairs with a technical corollary our longtime readers will recognize. Start from a baseline that works everywhere: clean content, core functionality, no assumptions. Layer capability upward as screens widen and features prove available.

This is progressive enhancement, the approach argued here since the AJAX era, now applied to layout. The phone experience is the foundation everyone gets. The tablet and desktop views are enhancements built on top, rather than the desktop being the ‘real’ site with mobile as a stripped afterthought.

The practical payoff, confirmed in our responsive prototyping: layouts built up from a disciplined narrow base are structurally cleaner than layouts carved down from a sprawling wide one. The summer’s field notes said as much, and a year of the industry’s collective experience keeps agreeing. Mobile-first is how responsive design gets designed. The media queries are just how it gets delivered.

Handling the stakeholder flinch

Now the meeting-room reality, because the phrase itself creates a predictable problem. Stakeholders hear ‘mobile first’ as ‘mobile only,’ or worse, ‘my department’s content last.’ They bristle on cue. The reframes that have worked for us:

• ‘Priority made visible.’ The mobile view is not a smaller site. It is the same site with its priorities showing. Nothing is removed from the desktop experience, but everything now knows its rank. And the ranking came from user tasks, the top-task data our IA practice generates, rather than from volume of internal advocacy.

• ‘If it doesn’t earn the small screen, interrogate its claim on the large one.’ The question improves every element that survives it. The carousel is the classic casualty. Pressed for its mobile justification, it usually turns out to lack a desktop one too. Our conversion data on carousels deserves its own post someday. The preview: position one does all the work.

• The audience numbers, freshly pulled. Mobile share on institutional sites has doubled again this year, past ten percent in many audiences, higher on consumer-facing and campus audiences. The trend line does the persuading that rhetoric cannot. This is not preparation for a hypothetical audience. It is service to a measured one.

Process notes from the first projects

What changes operationally when the discipline is real. Content strategy moves earlier. You cannot rank what you have not defined, so the content-first sequencing urged here for years becomes mandatory rather than virtuous.

Wireframes start narrow and grow, which confuses review processes calibrated to full-width comps for exactly one meeting. After that, stakeholders report the narrow-first sequence clarifies approval rather than complicating it.

And the ‘what matters most’ workshop becomes a formal deliverable. We now run it with the card-sorting and top-task tools from our IA toolkit, producing the ranked priority list that the narrow design then simply expresses.

None of this lengthens projects in our experience so far. It front-loads arguments that otherwise surface at comp review, where they cost more. The discipline, like most good ones, is mostly a re-sequencing of conversations that were always necessary, moved to where they are cheap.

The card on the wall, then, one more time: design the small screen first. Not because phones are the future, though the analytics keep voting that way. Because the small screen is where honesty about priority becomes unavoidable, and honesty about priority is the scarcest resource in institutional web work. The screen size is incidental. The discipline is the point.

A closing exercise for the skeptical, runnable this week without a project attached. Sketch your current homepage’s content as a single prioritized column. Everything it holds, ranked, nothing omitted. The sketch takes an hour and produces two artifacts. The ranking argument your organization has been avoiding: watch where the fights start, because that is where clarity was owed. And a preview of your mobile experience under any architecture you eventually choose.

Teams that run the exercise before their redesign start the project already agreeing about what matters. Our project archaeology suggests that is worth more than any technique the project will employ. The exercise is cheap. The agreement is the expensive part, and it is expensive whenever you buy it. Earlier is just the discount window.

Wroblewski’s book arrives this fall. Put it on the team’s shelf next to Marcotte’s, because the pair describe one practice from two altitudes: what to prioritize, and how to deliver the priorities everywhere. 2011 is quietly assembling the multi-device canon. Collect it as it ships.