The ultimate guide to responsive web design

Profile picture of Nick Babich

{date}

{#hash1}

{#hash2}

Illustrations by {name}

From the basics, like what responsive web design is, to details like responsive type and designing mobile-first, this explainer has it all.

19 min read

Illustration by Anita Goldstein.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Web design has changed a lot over the years. In the beginning, the primary goal of web design was to create a smooth browsing experience for desktop users—it was the only way people accessed the internet, after all. But since then, the mobile revolution has drastically changed the way we design for the web.


When designers build a new website today, they need to make sure it looks great, functions well, and communicates the right message across all sorts of browsers and devices. It’s pretty much guaranteed that website design clients will ask for a mobile version of their site. Responsive design principles make it possible.


In this comprehensive guide, we’ll cover everything you need to know about responsive web design—from the history surrounding it, to the best practices, and strong examples to learn from.


The ultimate guide to responsive web design

  1. What is responsive web design?

  2. The history of responsive web design

  3. Accommodating different viewports

  4. Methods used for designing responsive websites

  5. Resizing images

  6. Responsive use of typography

  7. Mobile-first design

  8. Responsive website examples



What is responsive web design?


An illustration depicting a website layout on mobile, desktop, and tablet.
Responsive web design changes the layout of a site to best fit the viewport the user is viewing it through. Illustration by Anita Goldstein.


Responsive web design is an approach to designing websites that makes it possible to render web pages on various screen sizes. This is an example of user interface plasticity—the capacity of an interface to be fluid and present itself in an ideal arrangement based on the available screen space.


But responsive design is more than just a technical approach, it’s the backbone of good user experience. Instead of thinking about screen size and resolutions as design constraints, think of your content as fluid, giving users complete control of how they want to view it.


Responsive design requires a combination of fluid grid, flexible images and media queries. Fluid grid, flexible images and media queries work together as one—they reformat web pages according to the user preferences and provide the best possible web experience:



Fluid grid


A grid is a two-dimensional structure of intersecting lines that lets you arrange content in columns and rows. In a fluid grid, each element of a grid is expressed as a proportion relative to its container, so it resizes depending on the size of the container it sits within. That means the exact number of columns in a grid can vary depending on the size of a user’s viewport (the visible area on the user’s device where content can be seen). For example, you can display a three-column layout on desktop and a one-column layout on mobile.


Relative units


Web page elements such as content blocks or buttons are sized in relative units like percentages. Relative units make it possible to size elements according to the size of a viewport.


Media queries


CSS (Cascading Style Sheets) media queries can change a page’s style based on the characteristics of the viewport, like its display resolution and the actual size of a browser window.



The history of responsive design


The proliferation of smartphones in the aughts prompted the web design community to think about how to display content on various display sizes and resolutions, without sacrificing usability or performance.


Web designer Ethan Marcotte first introduced the term “responsive design” in his 2010 article, Responsive Web Design. Marcotte was inspired by responsive architectural design, whereby a space automatically adjusts to the number of people within it. As the name suggests, responsive designs respond to changes in browser width by adjusting the layout elements to fit within the available space.


A second, more tailor-made approach emerged in addition to responsive design: adaptive design. With adaptive design, coined a year earlier in a book by web designer Aaron Gustafson, designers create a layout for each breakpoint (typically 320px, 480px, 760px, 960px, 1200px, and 1600px). The design adapts to different sizes of a viewport using media queries to define what properties will be changed for small and large screens. So each web page has multiple versions of fixed layouts fit for different screen sizes.


When we compare responsive and adaptive design, responsive is often a more effective approach for advanced designers. It takes less work to implement and maintain the design, since you don’t need to create multiple versions of layouts. With responsive design, the content of the page arranges itself optimally for each browser window. Responsive web design is also better for search engine optimization since it saves resources when Googlebot crawls your site. A single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times to retrieve multiple versions of your design.