Last month we talked about Responsive Design and why it’s needed for today’s web design. Now we’re going to dig a little deeper and talk about Mobile First Responsive Web Design.
The Why
We’ve already made a case for Responsive Design. With predictions that global mobile usage is going to overtake desktop usage by 2014, it makes sense to get moving on this Responsive Web Design stuff.
But when exploring how to do responsive design, we recommend taking a Mobile First approach. Here’s why:
1. Small-Big vs. Big-Small
If you use a Desktop-First approach, then you’re trying to cram everything from a 960px wide canvas down to a 300px wide canvas. It’s much easier to go from small-to-big, than big-to-small.
2. Prioritization of Design Elements
When designing for mobile-use, you’ve really got to be particular in how you prioritize design elements for that screen size. Through discussions with your client, you can really focus in on and decipher the highest priority elements since you’re working with a smaller space.
It’s like having a small knapsack and trying to put the most important things in your life in that sack. When it comes down to it, whatever you put in that sack are clearly the most important. If you had an SUV to fill, it’d take longer to figure out that list of things to pack. And would you be able to pick out the top 5 most important things from the SUV as easily as from the knapsack?
3. Constraints Focus
In his book “Mobile First”, Luke Wroblewski said: “Design is the process of gradually applying constraints until an elegant solution remains.” We couldn’t have said it better. Think of the constraint for a mobile device:
- Screen size – 320 x 480
- No hover – so you can’t pop-up additional content
- Speed – gotta resolve fast or you’ll lose your users faster
The How
So how do you design for Mobile First? Let’s think about what you actually see when you look at a site on a mobile device vs. desktop. Anything come to mind? The content. That’s what’s so great about mobile websites – the content is in yo face!
When designing for mobile first, it’s really content first. Think of all the additional capabilities and information available to you through mobile:
- Touch
- Location
- Orientation (vertical vs. horizontal design)
- Voice
- And more, lots more, and will be lots more tomorrow, next week, next year, and so on…
The Flow
Since mobile has a much different flow than desktop, create that flow using storyboards. Talk with your client and their users. Interview users on how they’d flow through different use cases.
The Design
Design in the mobile browser, and iterate. Use your list of prioritized elements to strategically place each element in the browser so the highest priority elements are highlighted the most, and then go down the list.
Resources
There are templates that can help you get started. There are also a ton of examples to help you. Check out some of these:
