There are over 1.2 billion mobile web users worldwide. Today, mobile traffic accounts for about 30% of website page views today – up from 10% just 2 years ago. These numbers demand that we not only design and program for desktop users but that we also provide for tablet and mobile users.
Often, in a kick-off meeting for a website or an application, the subject of responsive web design will come up and I’ll proactively suggest a mobile-first approach. Heads nod in agreement and then there’s a moment of silence – an awkward, pregnant pause that indicates an uncertainty around this thing called “mobile-first”.
A junior art director may offer something along the lines of, “Well, this is responsive, right? So we need to lay out all of the different states for desktop, tablet, and for mobile. Is that what you mean by taking a mobile-first approach?” Heads swivel back to me in anticipation.
“Not exactly, no.” And I proceed to provide an analogy of what designing and architecting with a mobile-first philosophy means to me.
A mobile-first approach experience is much like living in a studio apartment in New York City, San Francisco, or Tokyo. A studio dweller learns to live as a minimalist, or she runs the risk of dealing with extreme clutter in her small living space. To accommodate an effective lifestyle where our studio dweller can eat, sleep, and work, she will need a bed, a chest of drawers, a chair & table; a kitchen with a refrigerator, stove and sink, and a bathroom with a shower and toilet. She may keep only what is absolutely necessary. She learns to organize her items, keeping them hidden, yet easily accessible, by using storage containers under the bed and closet organizing systems. She may decide to hang some colorful art on the walls and add a small decorative throw rug, but these touches will need to be minimal.
Eventually, our studio dweller saves up enough money to move into a 1-bedroom and finds that she has a bit more space to work with and her things are no longer so cramped. She is able to trade in her single daybed for a double bed and she purchases a larger refrigerator, along with a second monitor for her laptop, which will serve as her television.
A few years later, she moves into a 2-bedroom, where all of her things – her bed, her table & chair, her chest of drawers, along with her art and rugs – find a comfortable place to rest. In fact, she is able to replace those items with larger versions. A double bed becomes a queen, her chest of drawers becomes an armoire, and her throw rug is traded in for a larger area rug. Before long, she has a wall full of books, a big-screen TV and a fantastic stereo system. In her spare room, she sets up an office space complete with a desk and easy chair. She has everything she needs and more in her living space.
Imagine if this had started out the other way around? If she had to move from a 2-bedroom apartment into a studio? Our studio dweller would have found herself having to make some very difficult decisions about what she could keep and what she would have to throw away. This scenario is exactly what the mobile-first approach works to resolve – ensuring a seamless and effective experience across desktop, tablet and mobile. While many may find the mobile-first approach to be an uncomfortable one, this process pays off as the project progresses. Here are three paradigms to consider when approaching a digital project from a mobile-first philosophy:
If it’s not useful, toss it.
This perspective forces the design and copy teams to focus and to prioritize information by embracing the constraints of the limited real estate within the mobile environment. The teams must ask the same sort of elimination questions over and over again, “Is this important? Do we really need this? Is that video absolutely necessary? What key messages do we really need to communicate? Will this chart or table help the user understand better? Will this item add to the experience?” The answers to these questions become the content that dictate the vital elements of the layout, allowing for a leaner, faster-downloading site.
Can it go under the bed, in the closet, or in a drawer?
Exploring different ways to organize information will go a long way toward creating a seamless experience that does not overwhelm the user. A major complaint of mobile users is having to scroll endlessly to reach what they are looking for. Clean use of accordion trays, tabbed navigation, drop-down menus, sub-menus, anchor tabs, overlays, and other options help to organize information in an intuitive manner and lends to a less cluttered space.
Would Grandma approve?
Creating a mobile experience that your grandmother could navigate is, in some ways, much easier than expected. Modernist architects embraced the philosophy, “Form follows function,” which dictates that the shape of an object should be a result of its intended function or purpose. Guiding the user straight to the key messages and conversion is the goal of designing for mobile real estate.
By simply considering the straightforwardness of a website’s navigation within the mobile environment, we can determine the ultimate usefulness of our digital solution as a whole. If it takes too many clicks to get to the crux of the content or to convert a sale, the experience is wasted. If the navigation is too fancy, Grandma may get lost. If the buttons are too small, Grandma may not be able to see them. Call-to-actions should be prominent so Grandma notices and understands to click on them.
Overall, planning for a mobile experience at the very beginning of the process forces us to rethink how we present our content and ultimately leads us to create a fast and coherent web experience across all platforms. And your moving bill will be cheaper!