Responsive web design is an overall approach to building websites that encompasses web specification standards and flexible design models. The philosophy behind it stems from the desire to make the web accessible to as many devices as possible.
Responsive design ensures that a website displays properly on desktops and mobile devices like smartphones and tablets. This relatively simple idea has spawned an entire generation of frameworks and tools like Bootstrap that automate much of the grunt work involved in designing responsive sites.
- 1 What Is Responsive Design?
- 3 How Responsive Design Works
- 4 Resources
- 5 Responsive Design Improves Accessibility
What Is Responsive Design?
Around the late 2000s, web designers faced some new challenges when smartphones started to dominate. An explosion of different devices hit the market, with the first-generation iPhone leading the way. Web designers were walking through a digital minefield of cross-compatibility problems when it came time to building websites. They had to deal with inconsistencies with window width, screen resolution, different input devices, and numerous other idiosyncrasies that took forever to fix.
This was good money if you were getting paid hourly, but wasteful and inefficient in terms of production.
In response to this problem, the open source community of software engineers and designers got together to create a set of standards to achieve better cross compatibility. Those standards helped shaped best industry practices, which include responsive design. Collectively, these methods and specifications are known as responsive web design.
The actual term “responsive web design” was coined by Ethan Marcotte on his blog, A List Apart, in 2010. He was more than just a PR spokesman for the movement, however; he also played a major role in developing the best practices for it.
- Responsive web Design by Ethan Marcotte: This historically significant blog post is where the term “responsive web design,” was galvanized. It is still one of the best introductions to the topic to date.
- Responsive Web Design Definition: A well-written explanation of responsive web design with a focus on user experience.
- Responsive Images: A blog post by Matt Marquis about the importance of responsive images.
How Responsive Design Works
Responsive design enables us to optimize the presentation of a web page for many devices with a single piece of source code. This allows you to create similar experiences across different devices, or tailor a web page for a specific device.
There are three main technical aspects of responsive web design:
- Fluid Grids
- Flexible Media
- Media Queries
Fluid grids enable your design to adapt based on the user’s hardware and software. The main concept behind a fluid (responsive) grid is that the layout adjusts according to the client’s browsing environment.
Methods used to create a fluid grid involve sizing content with relative (i.e. percentage) units coupled with the use of CSS media queries. Fixed grids, on the other hand, use absolute units such as pixels or centimeters.
- Fluid Grids: Ethan Marcotte explains the fluid grid, and shows tricks to calculate the dimensions.
- Using Fluid Grid Layouts: A tutorial on creating fluid grids in Adobe’s Dreamweaver.
- Basic Responsive Grid and Media Query Reporter: An easy-to-follow tutorial on how to build a pixel-perfect responsive grid.
Another important part of responsive web design is getting the media to adapt to the browsing environment. Some of the elements on the page may need to be resized, or removed from the display completely for certain devices. The resources below show you how to use tags and relative units for responsive media elements.
- CSS Box Model: Understanding the CSS box model is essential to placing content. This is the official documentation of the box model.
- Fluid Images: A very helpful method for creating images that automatically resize based on context.
- W3Cs CSS Units: The official reference on units.
- CSS Units from Mozilla: A good introduction to values and units in CSS from the Mozilla Foundation.
- Viewport Meta Tag: learn how to use the viewport meta tag to optimize the display for mobile devices.
- Responsive Typography: get more control over the typography with this type of configuration.
Fluid grids don’t address all of the problems posed by the growing number of different screen sizes:
- On smaller screens, the layout may appear crowded
- On wider screens, the layout may appear distorted.
In response, the W3C introduced the media query as a component of CSS3 to help fill in the gaps. Today most browsers support media queries.
Media queries determine information about the browsing environment, such as the device, screen resolution, and viewport size. The media query makes it possible to do things like adapt the typography based on device and screen resolution.
- Using Media Queries: Mozilla Foundation’s docs on using media queries.
- CSS3 Media Queries: The official CSS3 docs on media queries.
- Standard Device Media Queries: Useful cheat sheet of media queries for the most popular tablets, phones, laptops, and wearables.
- Media Query Example: Media query example from W3C docs.
Below are a helpful set of tutorials, reference articles, books, and tools that offer deeper insight into responsive web design.
- Responsive Design in 3 Steps: The simplest and clearest responsive design tutorial on the web. It’s the one to read if you’re just looking to see the bare bones of what responsive design is all about and how it works.
- Responsive Web Design for Beginners: Helpful, free articles. You will find many other tutorials on this site as well.
- Guidelines for Responsive Design: A great set of design guidelines that are as relevant today as they were when they were written.
- Sizing Images with Responsive Web Design: Another simple tutorial on sizing images with an interactive demo.
- A Guide to Flexbox: A very easy to understand guide to flexbox, a CSS layout module that enables you to build responsive layouts.
- Progressive Enhancement: Progressive enhancement is about enriching the experience with features that are specific to a given user interface (phone, desktop, etc).
- HTML5 & CSS3 Tools: A live HTML5 and CSS3 playground. Have fun!
- Responsive Web Design: This tutorial from Yello VP Shay Howe is long, clear, and comprehensive. It’s the lesson you want if you understand the basics of responsive design and want to learn it fully.
- Navigation Patterns for Responsive Web Design: Shows some real-world examples of navigational menus, and explains their best use case scenario.
- List of CSS Frameworks: A list of notable CSS frameworks you can use to speed up the development process.
- Google Developers Responsive Design: The official Google Developers section on responsive web design.
- Inclusive Design Patterns by Haydon Pickering (2016): a guidebook put out by Smashing Magazine that discusses designing with accessibility in mind.
- Responsive Design Patterns & Principles by Ethan Marcotte (2015): a resource that walks you through using design patterns for creating better responsive layouts.
- Don’t Make Me Think, Revisited by Steve Krug (2014): a book that helps you learn to think like a usability expert.
- Moving to Responsive Web Design by Inayaili de León (2016): this book walks you through how to take a static site and turn it into a responsive one.
- The Zen of CSS Design by Dave Shea (2005): an oldie now, but an invaluable resource on how to create compelling CSS designs.
Below are tools that will make development a lot easier. We provide responsive grid frameworks as well as testing tools. With them, you should be on your way.
Responsive Grid Frameworks
- Foundation By Zurb: Billed as the most advanced responsive framework in the world. They’ve got an impressive portfolio and great, simple documentation.
- Skeleton: An extremely simple responsive boilerplate you can either download or copy/paste straight into your project. It’s great for small projects.
- Pure: A single responsive grid or framework, but a sort of library of CSS modules developers can sample and use in their web projects. It’s built around minimal CSS with a mobile-first bent.
- Montage: Responsive template for photography websites.
- Susy and Breakpoint: When used with Breakpoint, Susy can help you build a responsive site fast, with very little coding and a whole lot of design options.
Responsive Design Testing Tools
- Matt Kersley’s Responsive Web Testing Tool
- The Browserstack Responsive Design Testing Tool
- The Responsinator
- Website Responsive Test
- Responsive Design Checker
Responsive Design Improves Accessibility
Responsive design is a lot like solving a puzzle (or trying to pack your overhead compartment bag). You’re organizing all the elements so they can be flexibly rearranged yet remain functional on multiple screen resolutions. And that, dear readers, is pretty impressive.