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 × 1136 Photoshop document. I'm using this as a size because it's a 16:9 aspect ratio and it also happens to be the screen size of iPhone 5. The specific size isn't terribly important; what we want to make sure is that we are focusing on a smaller screen and in development we can expand on our creative assets.

With a blank document ready, let's refer to our prototype in figure 1 to get a sense of the content we'll be designing against.

Figure 1 Our prototype

The thing we really want to focus on here is the elements and their relationships, not necessarily positioning, since the positioning will change as the canvas expands into larger screens. We can look at the prototype and we know we need a header, a style for post titles, dates and tags, and styles for blocks of copy.

Recognizing a design pattern from a prototype

We'll start by establishing a design pattern. Design patterns are reusable solutions to meet a reoccurring problem. For instance, every browser has a back, forward, and refresh button. They are almost always in the top left corner of the browser. In responsive web, a design pattern could refer to the treatment of navigation or alert notifications or the pattern of the grid. For our example, we will be using a design pattern to streamline our site's main header.

In our prototype, the header shifts format from the desktop to the mobile site. In the desktop view, the navigation is aligned horizontally while in the mobile version it's aligned vertically.

Figure 2 Comparison of our full screen and small screen prototypes. Notice the changes in the navigation.

In figure 2 see that our navigation stacks vertically in small screens and stacks horizontally in large screens. You'll also notice that the image in the top center (intended to be the logo) is hidden on the mobile and visible on desktop.

Hiding logos and stacking navigation are two types of crude responsive design patterns, but, in this case, they create our first challenge: how to keep the header from getting cluttered and confusing on mobile.

Another challenge we have to face here is that we want to make sure our buttons have enough size to remain easily tappable by the user. In its specifications, Apple has designated a space of 44 by 44 pixels as the minimum tappable button size. If we retain the vertical stacking in the prototype, we will have to devote at least 132 pixels to the navigation in the top.

Figure 3 Our prototype also reveals some changes in the formatting of our footer.

In the figure 3, we can see the footer also establishes a responsive design pattern of stacking elements vertically. In this case, the information retains its flow in this vertical format and should serve our design nicely.

Header navigation and off canvas design patterns

Now that we've identified the design patterns in the header and the footer, we can start creating our design. It's important to note that, in starting our design, we will begin establishing the rules that will govern the rest of our site. When you start making a button, try to think of it not as "the XYZ button" but a model for buttons going forward.

Sometimes I think of this in terms of a good science fiction film. The first act in every science fiction films needs to establish the rules of the universe by having characters interact and, in this way, they naturally establish the ground rules. One character might refer to a new genetic mutation and how it causes the person with it to have white hair. As an audience, we now know that everyone with white hair potentially has the mutation. If later a character with white hair is introduced, it's safe to assume they also have the genetic mutation referred to earlier.

The site level header and footer are also unique in that they are the primary interface for our site. The header prototype calls for my name, location, and Twitter handle. To the right are the navigation elements, where users can look for the specific content they are seeking. With a smaller screen to display on, we need to find a creative way to do this while retaining the benefits for the user.

One of my favorite design patterns for small screen navigation is the "off-canvas" method, in which navigation elements are hidden to the left or right side of the page and, when cued, the navigation slides out. This is the pattern used by Facebook and Path for hiding the main navigation and allowing the user to focus on the immediately important information.

Creating the header

We'll start out by designing our header's unaltered state and give it two buttons we can later use to cue the off-canvas navigation.

Figure 4 An initial design for our header. Notice the two icons in the corners. To the left is one to denote Information and to the right is an icon to denote site navigation.

We have two simple icons in the header, both at about 44 by 44 pixels and a logo to reinforce that the visitor is in the right place. To the right, we have a three-bar navigation icon. This has become a standard icon for expanded navigation. On the right is an information icon. We'll be using these two buttons to give our users a way to navigate deeper into our site.

Since we are using off-canvas navigation, we will need to show what that navigation looks like. We need to get a sense of the spacing, color, and design of the expanded navigation.

Figure 5 The navigation will be expanded on the press of the three bar navigation icon.

Now we have some obvious site navigation. For this site, there are only a few sections to access, but, even in a large-scale site, we can scroll down to see more options. We could also potentially slide the header off further to the left and leave more room for the navigation on the right. We can easily apply the same style to the information content on left side of our page to display some more information about me and what the visitor can expect on my page.

Figure 6 On the opposite side, we have more information. We repeat a few of the links from the other navigation, which is fine since these links are to further inform the user about the subject of the site.

Here we've added some additional content to the comp that would only really be relevant to people who don't know who I am or why they are on this site immediately. You can also see how the vertical off canvas navigation has given us plenty of room for secondary content without encroaching on the reason the user has come to the site, which is (hopefully) to read something I've written.

Summary

We discussed the beginning phases of designing a site, mobile first. We talked briefly about navigation design patterns and creating elements for use in responsive design.

The role of a designer, strictly speaking, can be the most difficult position on a project because, as a designer, you have to communicate a brand into an artistic medium that you might not have the highest degree of control over. This is the main reason why a design with little or no experience in CSS is at a huge disadvantage. Web design will always feel like a limiting and confining medium if you don't take the time to learn the details, and that ultimately means designing with CSS.


Here are some other Manning titles you might be interested in:

Hello! HTML5 and CSS3

Secrets of the JavaScript Ninja
Rob Crowther

Secrets of the JavaScript Ninja

Secrets of the JavaScript Ninja
John Resig and Bear Bibeault

Sass and Compass in Action

Sass and Compass in Action
Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis


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