Skip to main content

The Foundations of Mobile First Design

Posted by manning_pubs on November 14, 2012 at 5:09 AM PST



The Foundations of Mobile First Design

by Matthew Carver, author of The Responsive Web

In this article from The Responsive Web, author Matthew Carver opens up a discussion of how to build a site for a mobile or small-screen device using a graphic design program, such as Photoshop.

Building a site in its smallest iteration first affords the designer a lot of opportunities. By starting in a small screen, we give ourselves a focus on our sites purpose. When you only have a 640 by 1024 pixel area to design in, you are forced to make some choices. These choices create a better end product.

There's a term I like to use to describe what happens when a project starts to get out of control, "gilding the lily." It's a phrase that was used by Shakespeare, and it means to over-embellish something. There's a whole lot of gilding of lilies that can go on when you assume everybody visiting your website is on a desktop browser. When you have a 1600 pixel wide canvas, you have a lot of space to fill, so you might add more buttons, animation, widgets, and images. Your first inclination is to fill the empty space.

Then, you need to make the site mobile, and you have to start trimming your gilded lily. You hide buttons and images and navigation. You stuff and scale and tuck until your 1600 pixel canvas is crammed into the frame, but all that stuff you crammed and stuffed and tucked and trimmed still has a weight. If you're not careful the user will end up still loading all that hidden content on their cellphone. So now, you've taken all this time to cramming, and your user with a 3G connection hits the back button because your page isn't loading. Not exactly the best user experience.

In 2009, Luke Wroblewski wrote a blog post and later a book titled Mobile First, in which he laid out a philosophy of web design and development that asked people to focus on a mobile experience first. In doing so, you build the site or application around a philosophy of focus, and only give the user what they need.

My favorite building is the Guggenheim Museum in New York City. My favorite architect, Frank Lloyd Wright, designed the building to be a "temple of the spirit." The museum is built on a giant spiral and, as you walk through the exhibit, you go down the spiral. Gravity eases you through the museum and you roll down the spiral like a drop of water. That's the power of great design, it eases you through it, and that's what we should strive for in building our sites. By designing for mobile first, you can craft an experience your user can flow through and step by step build on that experience, ensuring its original intent. You have a foundation in place to work from.

This is one of the biggest challenges in responsive web design: how do you build a site that evolves and scales consistently?

The response this approach seems to bring out in a lot of designers is that building mobile and responsive sites is "too limiting" because the canvas you begin with is so much smaller, but I don't see this as a limitation at all but an empowerment and a practice that enables you to do so much more.

If you've been involved in designing websites long enough, you'll remember a time when sites were built in tables. Before jQuery came along animation was far too costly and time consuming in traditional web sites. Before broadband was mainstream, background images were out of the question. I can personally assure you that today's designers have a much more open palette of tools at their disposal. Just like how semantics took the place of table-based design and jQuery offered robust animation outside of Flash, responsive design offers us new opportunities.

Getting started with mobile first design

The first thing we need is a template to design from. I'm going to start with a blank, 640

AttachmentSize
responsive001.png25.89 KB
responsive002.png30.76 KB
responsive003.png26.15 KB
responsive004.png62.58 KB
responsive005.png59.03 KB
responsive006.png126.17 KB
responsive007.jpg9.17 KB
responsive008.jpg27.53 KB
responsive009.jpg10.76 KB