Flexibility First: Designing for Mobile and Beyond
There’s a lot more to building a mobile-friendly and responsive site than just saying the words “mobile-first” and willing it into being. What does it mean? How is it done? In this article, we take a look at the process behind designing for mobile.
Websites should work on mobile devices.
That’s not a controversial take. It’s table stakes, honestly. Just like making sure the URL works, or that the site is free from security issues, designing a mobile-friendly site is the bare minimum we can provide as web builders.
But, there’s a lot more to building a mobile-friendly and responsive site than just saying the words “mobile-first” and willing it into being. What does it mean? How is it done? Mobile-first is shorthand, sure, but it also means something very specific.
More than that, it’s an entire process. Designing for mobile isn’t a task. It’s the end goal of a complex design project: and it means doing more than just making sure the logo scales correctly on an iPhone. It means thinking about the site all at once: to understand the big picture, even if that big picture is a small screen.
So, with that, let’s take a look at the three main pillars of designing for mobile: understanding content architecture, understanding how users interact (and don’t interact) with design at mobile widths, and designing for inclusivity.
A flexible content architecture.
The idea that “form follows function” has been a part of the design world since the maxim was coined by architect Louis Sullivan in the late 1800s. It’s a call for practicality and user-centrism — to build and design things that provide the easiest path toward success.
In web design, this has always been the case — good design has sought to provide easy and logical paths toward important content. For a long time, that meant focusing on design for desktop — serving a wider user interface (and a wider audience).
Now, we no longer get to make that decision. There are hundreds of devices, from phones to tablets to laptops to refrigerators, all of which have a different screen width. The question is no longer “how wide is the screen,” but “how important is the content?”
Understanding Content Hierarchy
What this means is shifting content organization toward the mobile experience. This means creating a content hierarchy, in which we determine the importance of different content based on its importance to the user. More important things float to the top, and less important things are dropped below.
In the beginning, content hierarchy was determined at desktop widths and then rearranged for mobile devices, in a single column. This works … kind of. The location of some elements can get pretty wonky if separated from their initial context, and the awkwardness of taking items from, say, the navigation sidebar and throwing them in random spots is a front-end developers nightmare.
Now, more often, we see a “mobile-first” method, in which design begins with the mobile view and, as the site encounters wider breakpoints, the page introduces new columns and layouts. This also works … kind of. A common pitfall in this method is to shortchange the large screen layout, which leads to a simplistic "mobile-optimized" desktop experience. The content hierarchy often needs a different solution depending on how much screen real estate is available.
What we’re seeing here is that there is no one direction for mobile design, because content hierarchy is not one-dimensional: it’s two-dimensional. You introduce complexity going from wide to narrow; you lose nuance when you go from narrow to wide. In reality, content hierarchy goes both directions at once.
Of course, there’s content beyond the page — and this is where information architecture and design come head to head. We’re used to some standard models of navigation — top level links, long lists of secondary navigation, dropdowns and flyouts, and so on.
Translating these to mobile can be tricky: do you arrange them like you might see in an app, with different “pages” of navigation? Do you pare your navigation way back and provide only the bare minimum in order to provide a better mobile experience? Are you accommodating for touch interactions that will now be click-focused? Do you use icons or words? Do you change navigation to fit the user’s context?
Like content hierarchy, navigation is also not a one-way road: it requires multi-dimensional thinking that allows for creative problem solving.
For example, a recent project had us balancing navigation between flyout at full-width and menu-style on mobile.