With Web users increasingly using mobile devices to browse Web sites and apps, Web designers and developers need to be sure that their creations look as good and work as well on mobile devices as on traditional desktop computers.
In the past, this was often accomplished by building separate sites; that is, a mobile site and a desktop site. But a number of problems with this approach have led to a new methodology for developing Web sites: this relatively new idea (which is actually quite old) involves ditching user-agent detection, and instead involves making your page respond on the client side to the browser's capabilities. This approach, introduced by Ethan Marcotte in his article for A List Apart, came to be known as Responsive Web Design. Like the separate sites approach, responsive Web design has positive and negative aspects.
The responsive design technique can be taken a step further: Prominent designer Luke Wroblewski advocates designing for "Mobile First", rather than as an afterthought to designing for desktops. Whether you design for mobile devices as a primary target or as a nice extra, you can use the power of CSS to ensure that the same content can be accessed across all hardware platforms, from mobile phones to wide-screen high-resolution displays.
The advantages
Though it wasn't initially proposed as method for creating mobile sites, responsive design has recently gained a lot of attention as a way of taking some first steps towards mobile-friendliness in lieu of a separate mobile site.
- It saves time and money as there isn't a need to maintain separate websites for different devices.
- Responsive Design provides every page with a single and unique URL.
- Social sharing stats (Facebook Likes, Tweets, +1 on Google plus) are not split, since the mobile and desktop versions of your web pages use a single and unique URL.
- Responsive Design doesn't care about user agents.
There are some really nice aspects to this approach. Since it does not rely on user-agent detection, it is more resilient and future-proof than the separate sites approach. For simple sites, it can also be significantly easier to implement and maintain than other options.
The drawbacks
This approach isn't without its limitations. Because content must be altered on the client-side with JavaScript, only minimal content changes are encouraged. In general, things can get very hairy very quickly if you are trying to code two separate sets of JavaScript to work with the same DOM. This is a big reason why web applications tend not to adopt this approach.
Giving your existing site a responsive design also involves a rewrite of your styles if the you are not sporting a flexible layout already. This could be a blessing in disguise, though; making your site's layout responsive could be a good opportunity to modernize and clean up your site's CSS.
Finally, since you are adding code to your scripts and styles, performance may be worse than the Separate Sites approach. There is not really any way around this, though a thoughtful refactoring of your scripts and styles might actually save a few bytes in the long run.
Strategies for responsive design
There are many things that can be adjusted based on the user's device of the moment, and many ways to detect what you can and should do. Some of these strategies include:
- Liquid or fluid layout
- Defining all container widths in terms of percentages of the browser viewport, so that they expand and contract as the browser window changes size.
- Media queries
- Invoking different style sheets based on the capabilities of the display being used, such as size, resolution, aspect ratio, and color depth.
- Fluid images
- Setting images to occupy at most the maximum display width, so they don't require scrolling left and right (or scaling to the point of illegibility) to see the entire thing.
When it is right to choose this option
As mentioned above, because content changes can be difficult, when you take this approach, you are not able to give users a strikingly different experience on mobile without a significant increase in code complexity. That said, if the desktop and mobile versions of your site are very similar, then this approach is a great option. It is well-suited to document-centric sites whose a primary use case is consistent across devices, like product pages. You may notice that the examples below are all blogs or portfolios!
Examples
Though it is not as popular as the separate sites approach, there are more and more websites employing this technique every day. Luckily, since all the code is client-side, if you'd like to see how a site technically implements this approach, it is as simple as visiting the site and clicking “View Page Source.” Here are a few examples:
- https://teixido.co/ – one of my favorite responsive designs, also pictured above!
- https://adactio.com/journal/1696 – also a good article to read, with its own links to examples
- https://thinkvitamin.com/
- https://stephencaver.com/
- https://hicksdesign.co.uk/
- DevDerby demos of CSS media queries
- 20 Amazing examples of using media queries for responsive Web design, by Joshua Johnson
- Responsive Web design: 50 examples and best practices
Despite being a relatively young approach, there are already some emerging best practices. For example, if you are designing a site from scratch with this option in mind, it is usually worthwhile to create a small-screen design first, so that the constraints of mobile are with you from the beginning. It's also great to use progressive enhancement for your styles instead of hiding elements of your existing site with media queries. This way, older browsers that might not support media queries still show the proper layout. An excellent presentation on the merits of this method is available here.
Approaches to mobile Web development
See the following articles for background and other approaches to developing for mobile platforms.
Minimum requirements for Firefox Marketplace
If you submit an app to the Firefox Marketplace for Firefox OS or Firefox for Android, it needs to be responsive to mobile screen sizes and screen pixel densities. Keep in mind that screens start as small as 320px by 480px. Another common pitfall is not recognizing screen density and then not adjusting font sizes and touch targets accordingly. For more information see Marketplace review criteria.
See also
Overviews
- Responsive versus adaptive design
- Responsive Web design, by Ethan Marcotte
- Beginner's guide to responsive Web design, by Rick Petit
- Responsive Web design: What it is and how to use it, by Kayla Knight
- Multi-device Web design: an evolution, by Luke Wroblewski
- Responsive Design Workflow by Stephen Hay (book)
Techniques
- CSS media queries reference page
- pointer Media Query, Pointers for Mobile devices, by David Walsh
- CSS media queries and using available space, by Chris Coyier
- Liquid layouts the easy way, by Russ Weakley
- Fluid images, by Ethan Marcotte
- Designing for touch screen, by Chris Kemm
- Responsive Web Design Techniques, Tools and Design Strategies, by Smashing Editorial Team
Tools
- Responsive Design Mode in Firefox
Original document information
Originally published on 27 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 3 - Responsive Design", by Jason Grlicky. Additional content integrated from old MDN page "Responsive Web design" which now redirects here.