--- title: Why Mobile-First is the Right Way to Build Responsive Websites pub_date: 2014-04-05 12:04:25 slug: /blog/2014/04/why-mobile-first-responsive-design metadesc: Why taking a mobile-first approach is the best way to build responsive website. tags: Responsive Web Design --- [*Note: This is an excerpt from my book, [Build a Better Web With Responsive Web Design](https://longhandpixels.net/books/responsive-web-design). If you like what you read here, pick up a copy of the book and be sure to sign up for the newsletter over there in the sidebar.*] The goal of responsive web design is to create websites that look great and function well on any device that accesses them. Assuming you're already familiar with the flexible foundations of fluid layouts and typography along with @media queries you're ready to dive into the world of responsive web design. In fact, you're probably itching to dive in and start writing @media queries for tablet-size devices and others for mobile devices to trick out your current fixed-width sites in shiny new responsive duds. That approach works. You can approach responsive design as something you tack on to a desktop site. That is, you can build out your designs for larger screens and then use media queries to make sure things look good on tablets, phones and all the other myriad devices out there. Indeed, this is often the only practical approach to take when you're adding on to an existing design with clients who have a tight budget or timeline and don't want a completely redesigned website. In other words, there's nothing wrong with building a desktop site and then adding some @media queries to handle other screens. In fact I guarantee that, no matter how much you want to embrace the approach I'm about to outline there will be cases where it just isn't an option. That said, there is, to my mind, a far better place to start your responsive designs -- with the least capable device. Developer Luke Wroblewski, who, among other things, was the Chief Design Architect at Yahoo, has helped popularize what he calls a "mobile-first" approach to design. In fact he's written a book on the subject entitled, appropriately, *[Mobile First](http://www.abookapart.com/products/mobile-first "buy Mobile First")*. I'm going to briefly discuss why I think what Wroblewski calls mobile first is the best approach for responsive design. For a deeper look at why a mobile first approach makes the most sense be sure to pick up a copy of Wroblewski's *Mobile First*. Why does Wroblewski think you should start designing for mobile devices first? Here's what he [writes on his blog](http://www.lukew.com/ff/entry.asp?1333 "Luke Wroblewski on why mobile-first is the right approach" ): >We start with the value of our service and our content. The constraints in mobile devices force us to focus on what really matters so we only include and emphasize the most valuable parts of our offering first and foremost. In other words the constraints of mobile devices -- often, though not always, limited bandwidth, small screens, touch interfaces, etc -- help you focus on what's really important in your designs. That means cutting the cruft and getting the content your users are after front and center. For example, it might force you to consider, given the limited screen sizes of mobile devices -- often less than 480px in height -- whether that 100px tall logo is really worth the screen real estate it requires. Ditto menus, sharing buttons and all the other cruft that can accumulate around the actual content users want. Some of that "cruft" might be important, some might not. The point is that starting with mobile devices helps to create constraints, which in turn creates focus. While I like Wroblewski's mobile-first approach, I have a slightly different way of looking at it. As I already mentioned, I like to think not just mobile-first, but *least capable device first*^[1]. Clearly I'm no good at coining a phrase, but I prefer to think of it this way because most of the constraints of mobile devices will be gone in the next few years -- networks are getting faster, so are mobile processors. However, while the phones of tomorrow may be as powerful as the laptops of today, there will be an entirely new class of devices we haven't even thought of yet connecting to the web that will have constraints. In other words, don't get hung up on the "mobile" part of mobile-first, think ***least capable device first***. Naturally, *least capable* is very open-ended. Does that mean you have to make sure your site renders in Lynx running on a BBC Micro? No, it just means starting with the basics and layering on complexity rather than starting with the complex desktop layout and trying to strip it back. In fact the first step is determining the least capable device you want to support. Sometimes that might be a feature phone browser that doesn't understand @media queries. Other clients might not care about reaching that market and just want something that works well on the mobile devices most popular in the U.S and Europe. Whatever the case, first determine where you're going to start. Once you have that least capable device to target you can start building. So what are the practical components of a least capable device mindset? What does this mean for our actual code? It means we start by building a site that works on these least capable devices. No media queries, no fancy JavaScript. Just a basic site optimized for the least capable device you're targeting. Start simple. Build your site so it looks good without many bells or whistles. This has two advantages, the first is practical, it supports older phones and mobile web browsers that don't understand @media queries (as noted earlier it might even mean obscurities like Lynx works as well). The second advantage to the approach is that it forces you to focus on what's important from the get-go. Then, once you have a baseline experience you can add the bells and whistles. You wouldn't start building a massive skyscraper without first laying a strong foundation. That's precisely what this bare-bones experience provides, a strong foundation to support all the rest of your progressively more complex enhancements. [^1]: I'm pretty sure Wroblewski also means least capable device when he says mobile first, I just like to be explicit about it.