So, what is mobile first?
“Mobile first” is a phrase coined by Luke Wroblewski (watch him speak about it here!) to describe the practice of prioritizing the mobile form of a website before all else. It means actually designing your mobile experience before (or at least in tandem with) the desktop version, but it also means adapting your thought process to prioritize the mobile context when creating user experiences.
And what’s so great about it?
- It allows your site to reach more people (a large majority of the world’s population has a mobile device and are online).
- It forces you to focus on core content and functionality. (How do you handle losing 80% of your screen real estate?)
- It gives you access to new technologies and lets you harness capabilities that only mobile devices afford.
Progressive enhancement is one of the guiding principles of the mobile first approach. It advocates for defining your website’s core purpose and then building out from that, adding features, functions, and more robust experiences as the devices get bigger.
Before we get started, be sure of one thing: mobile has already taken over desktop. Research shows that mobile is winning the day and will continue to do so. Even Google’s search algorithm weights mobile sites more heavily.
It’s fairly easy to say you’re designing mobile first, but ignore the most crucial aspects. Below I’ve outlined the 3 things you must think about when designing mobile first:
1) Simplify, simplify
The key element to mobile first design is optimizing for ease of use on small screens by stripping away any non-essential content or UI elements. Constraints force you to focus and prioritize a better overall user experience. You have to minimize how much the user has to read and comprehend and how many actions they're being asked to perform. Every element has to be meaningful and have a clear purpose. If it can be removed, remove it.
But here’s the tricky part: you don’t want to hide or compartmentalize content so that it’s in some inaccessible menu or page, because you want your user’s actions to be brief and effortless. For example, if you have a menu with five or fewer items, consider breaking it out in a horizontal bar instead of a hamburger menu, drawers, or a dropdown. Remember: the fewer menu items you have, the better.
2) Design for the thumb
It’s important to note that users will actually behave differently on your site dependent on the device they use to access it. They won’t take the same actions on a mobile site as they will on desktop. This forces you to pay attention to usage patterns. What time of day are people coming to the site on a mobile device? Where are they located? The answers to these questions impact the actions users take.
That’s why when you design for mobile, you're really designing for the thumb with all the dexterity and awareness that implies. Screens are small, connections are slow, and people often only give you their partial attention for short bursts of their time. They’re not reading everything or thinking too deeply, and they don’t care if the best stuff is only three taps away, they’re not going to find it. The thumb is leading the way for them, and if it has to work too hard to complete a task, it will just give up.
Don’t forget to utilize capabilities like location detection, device orientation, and touch. What doors open up when you know the answer to the question: what if we knew exactly where our user is right now?
3) Content is King
If possible, don’t start a project until the content is finalized, or at least a solid content strategy has been established. That way, you can structure what you have to say first, and let that lead the way. The goal is to prepare your content to go anywhere and adapt to any context.
Emphasize content over navigation. Don’t clutter up the screen with ways to get to what the user wants to see, just show it to them. Provide relevant options for exploration and pivoting, but keep the user focused on clear goals.
And, a pro-tip!
Don’t mess with what works. Using a single column layout on mobile is pretty tried and true. It’s straightforward for the developer and easy for the user to acclimate to. It's a problem that's been solved, there’s no reason to re-solve it.
And remember, prototype like it's your job (because it is). The sooner a mobile web experience is in your hands, the faster you’ll know if it works in the real world.
Tune back in later this month to learn more about how people use websites in the real world, responsive web development, and the behavioral science behind UX.