As our digital world continues to expand, with the introduction of countless devices of all form factors, responsive web design is more important than ever. Phones are getting bigger, tablets are getting smaller, and resolutions are ever increasing. The main focus of your website must not be lost: providing clear, easily-accessible content to your users no matter how they view your site. How can we accomplish this? By putting mobile first! 

woman holding smartphone in front of her laptop

What is Mobile First Responsive Web Design?

Simply, the mobile first strategy, first noted by Luke Wroblewski, is focusing your user experience for mobile devices first, and scaling upwards for larger screens and faster connections. This means a focus on the base content and progressive enhancement for additional features. Content must be prepared to display clearly, no matter the circumstance, with innovations and enhancements added when appropriate. This provides an unmatched level of accessibility for all users across all devices.

Why is Putting Mobile First Important?

This approach may be backwards from the typical process of building a full-featured site and scaling downwards for mobile devices and tablets, or even having a stripped down, dedicated mobile site. Though, the importance of a mobile focus cannot be overstated.

Gartner, Inc. reports mobile phones outsold traditional computers nearly 8 to 1 in 2013, with a projected 1.9 billion mobile phones to ship in 2014. Nearly two-thirds of those mobile users (63%) use their phone to access the web according to a survey by the Pew Research Center’s Internet & American Life Project with that stat continuing to rise. Additionally, Google states 77% of mobile web searches take place at a location where a desktop computer is available. Users are foregoing the desktop experience for the convenience of their mobile device. More people than ever are accessing websites on their mobile device, so this focus can no longer be an afterthought as it once was.

Technology is ever-changing and devices will continue to evolve, but providing your content will remain ever essential. Using the mobile first approach to building a strong foundation with progressive enhancement ensures all users of today and tomorrow access to your website.

How to Get Started with a Mobile-First Site?

There’s no doubt that optimizing our web presence for mobile access is critical to effectively engaging today’s online audience. But how do we put mobile first principles into practice to delivery this experience?

  • It starts with planning of course. Similar to any other website redesign project, we focus on the objectives of the website, our audiences and what information or services we want to make available. The big difference with a mobile first approach – you’ll want to start by carefully identifying the minimum baseline experience you need to provide your audiences to meet your core website (or web app) objectives. Second, identify the “bells and whistles” that, while not absolutely critical, will enhance this experience where possible, i.e. on devices with larger/higher resolution screens and greater rendering capabilities.   
  • Next is information architecture and design. Rather than starting with a full-featured desktop-optimized website experience, then figuring out how to scale it down for smaller resolution screens, start small then go big. Start with the lowest common denominator - ensuring that core/critical website information and capabilities are accessible and optimal on the most basic type of device you expect your audiences to use. Then scale up from there adding your bells and whistles as you go.
  • During the IA and design process on a typical responsive website, we define layout breakpoints to support screen resolutions across various device types. The approach for these tasks in mobile first is similar, but we start with the smallest resolution breakpoint first and build up from there. We also don’t get quite as hung up on aligning breakpoints with existing device resolutions. We focus more identifying a handful of breakpoints that make sense for our design. Testing on various devices is still important but we don’t necessarily want to be constrained by today’s devices and have to retool for another resolution when the next batch of smartphones, tablets or phablets (yes, that’s a thing) hit the market.    

These guidelines are intended to just provide a high-level overview of the mobile first design approach. For a deeper dive on mobile first responsive web design strategy and implementation, please attend our webinar, "On Second Thought, Put Mobile First" on July 29, 2014.