I was recently sharing some design ideas for a new site—mobile-first mock-ups to serve as the basis of a responsive design. When I was asked why I was starting with mobile instead of desktop, my response was an incoherent stammer: “Well, uh, because … it’s … uh … good.”
Later, I realized—or, reminded myself of—two things:
- Just because us web geeks tend to think about web design in a particular way, doesn’t mean everyone else thinks about web design in the same way.
- I often know what I think about my work, but I’m often terrible at remembering why I believe those things. This can make sharing my reasoning … challenging.
So this post is a bit of a mea culpa; it’s me trying to remind myself why a mobile-first approach is typically an ideal way to design for the web.
What is it? Why?
There’s some specific history wrapped up in the term “mobile-first,” which comes from the days when everyone was making desktop-focused websites that were just awful on cellphones. (Seems like such a quaint idea today.) If I understand correctly, Luke Wroblewski pushed the mobile-first idea as a corrective to this, making the case that everyone benefits when we start web projects with the needs of mobile users in mind. Here is his 2009 “Mobile First” blog post.
Wroblewski points out both the explosive growth of mobile technology—which is still a thing—and the new capabilities mobile technology enables. His second point is, to me, still the most interesting:
[W]hen a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites. That’s good user experience and good for business.
By thinking mobile first, you make sure you get the hierarchy of your design correct; that way, you help the user, who will like you more for it, and who will then—maybe, just maybe!—give you money.
I might add today that, as part of a strategy that includes progressive enhancement and responsive design techniques, mobile first is great for performance and for accessibility. These ideas prompt us to think beyond screen size to non-traditional input methods and output formats, all the rich ways people can interact with our content, and how we can most effectively and efficiently provide users with the content they need.
Creating for the constantly evolving web landscape is a challenge. For me, it’s been tough to bucking some of my own bad habits to put mobile-first thinking to work in my development process. When I’m hacking away on my keyboard on a fast laptop connected to a huge monitor with a mouse nearby, I find it easy to misplace my empathy for the mobile user on a crappy 3G connection. It happens.
Practical steps can help bring mobile users back into near-constant focus, but they do require conscious effort. Literally starting by sketching the mobile view of a site, constraining yourself to mobile-sized thumbnails, can ensure we’re putting the right bits and pieces in that view. Keeping development work touchable on an actual phone is revealing. Bonus points for having a couple devices available, particularly if they’re older. I’ve recently dug up my old iPhone 4s, which I keep near at hand now. (As tempting as it was to cash it in toward a couple week’s worth of good coffee.)
Throttling network connections is good, even if the trek into Xcode and scary iPhone development menus feels like some diving-into-the-mines-of-Moria business. Personally, I’ve been trying to pay more attention to how often I drop below full bars when using the web or apps out there in the real world. It’s surprising how terrible the network can be; remembering that is a great empathy booster.
Of course, none of the so-called restrictions of a mobile-first approach should kill the joy we take in, and apply to, our making. It’s probably wrong to even think of mobile first as limiting or restricted; otherwise, wouldn’t it be called mobile last?