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.

Navigation

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 stop 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.