In a mobile-first world, maybe the best work comes from not playing favorites by putting one (fleeting) breakpoint in front of another.
In the world of responsive web design, the phrase “mobile-first” has become so rote that it’s almost lost its meaning. Our reinterpretation of a mobile-first approach might just offer up a revitalizing shot to the concept.
When we decided that our mobile designs had to be more than quality adaptations of our desktop designs, we struggled a bit to find the right way to work that new reality into our design process. A mobile-first approach is, by its very nature, more limiting than designing with a larger canvas.
So we dug a little deeper and thought about what mobile-first actually means—not simply how it manifests. This led to an approach we’ve been quite happy with, and has had a profound effect on the way we think about—and apply—design across all phases of a project.
When we spin up a Sketch file for a new project, we add two artboards side-by-side—one for desktop, one for mobile phone. Then we hop around. A lot.
Sometimes we use the two canvases to test out the adaptability of an idea or a layout that we’re exploring. But more frequently we use both to generate ideas and layouts, sparking creativity and applying mobile-first thinking to our design process.
That means simplifying. Truly putting users first. Reconsidering that hover state ‘cause you ain’t got none. Do I really need 400 pixels of margin between this component and that one? Does every news story need that label that says “news”?
Of course, this isn’t a one-way street, nor is it always a matter of simplification and reduction. Simultaneous design means that we’re constantly reminded of all the cool shit we do in desktop mode, making us push harder to design equally—if differently—cool shit in mobile mode. And just as often, something from our mobile work sparks a new idea or winds up being our preferred approach to that thing in our desktop work.
It also forces us to consider the mode of consumption as an integral part of our entire process. “Mobile” is not synonymous with “phone.” While our design comps might end there now, there are tipping points on the horizon for many known—and unknown—devices and technologies. Maintaining even just two concurrent design modes forces us to consider the relevance and organization of content, the situational (physical, mental and emotional) and technological contexts in which users will request and use this content, and the role that design plays in enabling those connections.
Simultaneous design forces us to accept the malleability of the whole enchilada. It teaches us to embrace content’s neverending reign as king. And it rewards us for aiming outside the box. Because after all, that box is a constantly moving target. And one day, it’s going to disappear completely.