We are trending towards a mobile-first world. Nearly a third of US citizens use mobile devices as their primary way of accessing the web. If you want to reach this large group of people, your product or site needs to work on mobile devices. There are a number of ways to do this, but here we’ll talk about a mobile-first responsive design.

Responsive design is a fairly recent approach to creating a product or page that responds to the different devices on which it appears. The same page will resize or reformat to be appropriate for a mobile phone, a tablet, and a desktop (or a TV or refrigerator). There are some beautiful examples of this and it’s easy to see how it works by just resizing your browser. The big benefit to responsive design is that you can build one product or site and maintain one product or site (rather than one for each device or device category).

The promise of mobile-first is that it forces you to think differently about the design. It really started as an observation by Luke Wroblewski, that often the mobile experience for a web application or site is designed and built after the PC version is complete. So Wroblewski asked himself what would happen if the order was flipped. By designing for the mobile screen first you’ll need to prioritize what’s on that screen because of the size constraint. There are other constraints as well. You might have bandwidth issues, distracted users, fat fingers. Similarly, the capabilities of mobile allow for innovative interactions that aren’t possible on the desktop. It’s these constraints and capabilities that create change.

We used both responsive and mobile-first on a recent project at Hot Studio. The project was a new product that enabled people to become smarter about their health care. Our client was a large health insurance company investing heavily in innovation. Here are six ways we approached mobile-first responsive that may be helpful for other product designers and product managers.

1) Wireframe both desktop and phone on the same page

We got this idea from Zurb’s responsive design sketch sheets, a free set of PDFs from the nice folks at Zurb. We chose a sketch sheet that has both the desktop and the mobile phone side-by-side. What’s so great about this approach for responsive design is that it’s really clear that these wires are the same page because they are literally the same page.

2) Proceed from left to right

We created our own responsive design wires in Omnigraffle and began boldly sketching out concepts for the new product. We discovered a problem with the template when we began presenting the wires. Since most of us read from left to right, we would start reviewing the wires on the left, which showed the desktop and tablet version, and then move then to the right, which showed the mobile phone version. A more mobile-first approach would have the mobile wire on the left and the desktop and tablet version on the right. So we created a template for it.

3) Test early concepts on mobile-first

Starting with the mobile phone screen inspired our team to think in terms of “cards” for displaying the information in our product. A card is a chunk of content that is about the size of a business card or baseball card. Cards work well as a single column or as a grid in a three-column page. This was a big departure from the lists and tables that the client was used to, and we needed some confirmation that this was the right concept.

We exported the mobile screens into a PDF which we loaded onto an iPhone and took to our user interviews. With this, we were able to get some early user feedback on the concept and gauge the users’ interest in a mobile version of the product. The feedback helped us sell the idea of a mobile-first approach to the client.

4) Prototype in code

Creating a coded prototype of the product concept helped the team understand how the mobile phone version would respond to different screens. We started by coding two pages, which allowed us to see issues we hadn’t considered on paper. With these two pages we were able to explore how the nav would shrink or how the cards would rearrange when resized. Once everyone understood and agreed on the approach, it wasn’t necessary to prototype every page because we had an approach that could be applied to most pages. If a page didn’t follow the approach, we could just note how it was different.

5) Add features to the desktop

When we created the desktop wires based on the mobile version, there were times when it made sense to add functionality that worked on a larger screen. For instance, our desktop version has a preview feature that works with a desktop screen, but isn’t workable on a phone. We also added a compare feature that is nice to have on the desktop. These additional features were not part of the core functionality of the product, but made for a more robust desktop experience. Using some CSS or server-side magic we could show the buttons for additional functionality on the desktop but not on the mobile version.

6) Break the rules in visual design

Rather than creating comps of the mobile screens first, our visual designers started with the desktop version and then moved to the mobile. Since we had already simplified the content and the functionality, it wasn’t as important to start with the mobile screen. Our visual designer made the desktop version rich and engaging, while simplifying some of the visual elements for mobile

Mobile first and users first

Taking a mobile-first approach was incredibly helpful for our team. Starting with the mobile screen forced us to simplify. It allowed us to strip away a lot of the confusing clutter that tends to be added in design reviews. Additionally, designing and testing the mobile phone experience first really validated our product strategy for a responsive application. Our client loved seeing their users take immediate action by making a phone call from the product, and we got a lot of confirmation that their users wanted a mobile version.

In the end, our approach was still really users first. The way we prioritized for mobile constraints was to ask what the user needs. The way we designed for mobile capabilities was to ask what the user wants. Mobile-first gave us a good framework for designing and making decisions, but it was still about the user, first.

The featured photo is of Bree McKeen, who led many of the user interviews. In the photo, she is showing an early product concept to a user.