What Is Mobile-First Responsive Web Design?

Brad Frost, 06/19/2011

Mobile-First Responsive Web Design is a combination of philosophies/strategies, and ultimately boils down to a broader application of good ol’ web best practices. As the digital landscape gets increasingly complex, we need to design experiences that work across the entire spectrum of digital devices. Sounds like fun, right?

Mobile First

Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences. Starting with mobile first:

  1. Allows websites to reach more people (77% of the world’s population has a mobile device, 85% of phones sold in 2011 equipped with browser)
  2. Forces designers to focus on core content and functionality (What do you do when you lose 80% of your screen real estate?)
  3. Lets designers innovate and take advantage of new technologies (geolocation, touch events and more)

Responsive Web Design

Responsive Web Design is a term coined by Ethan Marcotte that articulates how to adapt a website’s layout for multiple screen resolutions. Creating a responsive web design utilizes:

  1. Fluid grids that ebb and flow with a devices’ screen size
  2. Flexible images and media that keep content intact on any resolution
  3. Media queries allowing designs to adapt by establishing dimension breakpoints

Progressive Enhancement

Ultimately, mobile-first responsive web design comes down to using Progressive Enhancement as a foundation for web strategy and design. Designing with progressive enhancement involves smartly adding layers of enhancements to a strong foundation in order to deliver an accessible (and hopefully optimized) experience to all.

Why Mobile-First RWD Works

The interactive landscape is increasingly complex. It includes a vast array of mobile devices (feature phones, smartphones, tablets), highly-specialized devices (eReaders, TVs, Internet of things) and more traditional digital devices (desktops, laptops, netbooks). Plus, we don’t know what’s right around the corner. So the question becomes clear: How do we design for all these devices?

That’s what makes mobile-first responsive web design a great approach. Starting with mobile and designing with progressive enhancement covers all bases (even if just at a rudimentary level). Any web-enabled device will be able to access the website and have a functional experience. Period. Then using feature detection, conditional script loading, media queries and plenty of other delicious techniques allow the experience to be enhanced and optimized for the device’s context. This means the site will work (to some degree) on that shiny new web-enabled gizmo sitting under your neighbor’s Christmas tree 4 years from now.

Where It Can Be Applied

Mobile-first responsive web design requires overhauling a site’s foundation and more importantly requires a mental overhaul. This is not a quick fix; this requires careful planning, time, and solid execution. It’s hard. It may sound daunting, but the payoff is huge. Instead of having to create a completely new iteration of a website every time a device gets hot, that time saved can be applied to optimizing the experience for the new context without reinventing the wheel.

How To Create a Mobile-First Responsive Web Design

In case this sounds like pipe dreams to you, rest assured that these principles are really just a broader application of web standards and best practices. That means we can start building mobile-first responsive web designs today. So where to begin?

Structure Content First

Content. You know, that stuff that replaces lorem ipsum text and placeholder images. As it turns out, content is important. Really important. This means creating strong, versatile and purposeful content is of utmost importance. Think of your site’s content devoid of any interface. Ask yourself why anyone would care about it. If you can’t confidently answer that question, I’m afraid no design, no matter how adaptive, can help you.

Structuring content first creates content focus and hierarchy. It’s about constructing your message and telling your story in a way that’s meaningful to your users and is cohesive in whatever context they may be in. It’s preparing your content to go anywhere.

As the debates roar on: native versus web, mobile site versus “one web”, etc, the one thing everyone can agree on is that a strong content strategy is becoming increasingly important. At the end of the day, devices will come and go and technological trends will wax and wane, but content, business goals and user goals remain. Nike will always try to get people to buy shoes (even when we’re all interacting with holograms). So while different factions will argue over the best way to display content, at least we can agree that creating purposeful, versatile content is one thing to strive toward.

Start with Mobile

Once content is structured, the first context to pipe the content into is the mobile web. Why start here and not the desktop? The mobile web is far more restrictive, eclectic and unstable than other contexts. The mobile context is hazy. Is the user on the go or on the couch? Are they on WiFi or EDGE? By first creating an experience that prioritizes a worst-case mobile scenario, you ensure that your users will be able to accomplish their goals despite a lot of factors working against them. In short, if you can support the mobile web, you can support anything.

Scaling up from the mobile context versus scaling down from the desktop context ensures that your message, content and functionality remain intact as the screen real estate and connection speed increase. Scaling down runs the risk of your core message and functionality getting lost by the time you squish it all the way down to the mobile context.

Note: I’m simplifying things a bit here because properly designing for the entire mobile web is HARD. Really hard. A lot of very very smart people have been working on the problems of the mobile web forever and the conclusion is that “it’s hard”. However, mobile is exploding and as a result mobile experiences are getting better all the time. Don’t despair!

Optimize for Context

Now that the mobile site is in place and the responsive foundation has been laid, it’s time to begin scaling up the site’s layout, functionality and (perhaps even) content. There’s tons of techniques and tools to help you enhance, (for example dynamic image replacement with responsive images, Sencha.io Src and more), but again because this is really just progressive enhancement at it’s finest I’ll defer to the experts.

Designing with Progressive Enhancementadaptive-web-designAaron Gustafson’s Adaptive Web Design book provides a metric-shit-tonne of best practices, examples and techniques to progressively enhance websites. The Filament Group’s Designing with Progressive Enhancement dives deep into the beauty of progressive enhancement. The topics discussed in these books are the road map to future-proofing the web. These concepts combined with a strong focus on user’s context is the wave of the future.

Support vs. Optimize

It’s important to note the different between support and optimization. Optimizing for every web-enabled device on earth is impossible, so eventually you need to make the strategic (read: business) decision of what target devices and browsers for which to optimize. Using site analytics can help you understand your audience better, but they can be misleading (they might rely on JS, they don’t count impatient visitors that don’t ever wait for your site to load, etc) so you must truly research your audience to gauge what best to optimize for.

There are plenty of inconsistencies across experiences and you’ll encounter some of the weirdest browser behaviors and bugs along the way, but ultimately well-structured content will be digestible by even the most heinous browsers out there.

A Quick Note About Context

The reason so many mobile experts have issues with responsive web design is that shallow designers think they can simply shrink existing sites down and declare it “mobile-optimized”. Mobile context is so much more than screen size. Mobile-first responsive web design accommodates the most difficult context first. By removing convenient user assumptions (Of course the user has a strong connection! Of course they have AJAX support!), you’re forced to provide a dirt-simple way for users to achieve their goals. Enhancing that experience to take advantage of any extra screen real estate and device capabilities creates a better user experience that translates all the way up. Win win win.

Also, “context” is inherently blurry. The mobile context of the days of yore are slowly fading as more people expect full experiences on their mobile phones. Do we really want to continue the trend with m.site.com, tablet.site.com, tv.site.com, etc? Of course there are plenty of cases for separate experiences, but for the meat and potatoes content out there do you need so much redundancy?

To Infinity…and Beyond!

The question being asked right now is “Where Are the Mobile First Responsive Web Designs?”. There’s so few examples out there of adaptive experiences done right (this one’s the best) and a lot of that has to do with the fact that the mobile web is perceived (in many people’s minds) as a nascent technology that doesn’t need attention (yet). The desktop web is more mature, so naturally everyone’s approaching mobile by cramming their existing content onto a smaller screen. It’s up to us to reverse that trend. The numbers don’t lie, and those numbers are all pointing at mobile, tablets and other emerging technologies.

The sooner we adapt mobile-first mentality and start creating sites that scale up rather than down, the sooner we can be prepared for whatever digital landscape lies ahead.