Profile picture of Nick Babich

19 min read

The ultimate guide to responsive web design

This explainer has it all: from what responsive web design is, to details like responsive type and designing mobile-first.

Illustration by Anita Goldstein.

Illustrations by {name}

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. 

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 web design principles, tools, and templates 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.


Start creating responsive sites on Editor X.



What we'll cover

  1. What is responsive web design?

  2. The evolution of responsive web design

  3. Responsive web design methods

  4. How to accommodate different viewports

  5. Resizing images

  6. Responsive use of typography

  7. Mobile-first vs. responsive design

  8. Responsive website examples



What is responsive web design?


Responsive web design is an approach to how to design a website 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.


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 design requires a combination of fluid grid, flexible images and media queries, which work together to 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 evolution 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 vs 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.




Responsive web design methods


CSS media queries are the basic tool for making a responsive website. All modern web browsers natively parse CSS media queries, so you won’t face trouble adjusting your design to a particular platform.


But just because they’re a basic tool doesn't mean you should start your CSS media queries from scratch. Insead, use a CSS framework like Bootstrap, Bulma, or Foundation CSS. The great thing about this approach is that the framework comes with a predefined set of breakpoints and visual styles for basic objects, such as body text, buttons, and input fields.


Of course with advanced low code platforms like Editor X, you can craft dynamic websites seamlessly without all that code, using smooth drag and drop tools and advanced design features like flex and grid layouts and full breakpoint control.


Another method that can be used for responsive design is JavaScript. JavaScript detects the size of a browser window and loads relevant style sheets, and can be applied to devices that don't support CSS media queries. CSS media queries and JavaScript aren’t competitive methods, they can work nicely together.


Here is a code that can be used to calculate the current size of a window:


$(window).height(); 
$(window).width();


The following JQuery code will be triggered every time the user changes their browser window and it will load relevant styles on the fly:


<script type="text/javascript">
  $(document).ready(function(){
    $(window).bind("resize", resizeWindow);
    function resizeWindow(e){
      // this code will be triggered every time the user will change the browser window
      var newWindowWidth = $(window).width();

      if(newWindowWidth < 481){  
      // if the size of the windows is less than 481 it's likely that the person browse on mobile   
               $("link[rel=stylesheet]").attr({href : "mobile.css"});       
        }       
    }
  });
</script>


How to accommodate different viewpoints with responsive web design


From the giant TV screens to the tiny screens of smartwatches, there are manifold ways that people can access the web today. It's important to accommodate different viewports to create a comfortable browsing experience for users.


Responsive design addresses this issue by allowing designers to target specific device classes and various screen sizes.



To create a responsive design, web designers need to do two things:


1. Add “viewport” meta tag to all their HTML pages:


<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

This tag gives the browser instructions on how to render the web page, defining its dimensions and scaling.


2. Use media queries to tailor their layout to a particular viewport.


For example:

  • Increase the size of functional controls such as buttons or a relative distance between them on mobile. It will help to comply with Fitts’ Law on touch devices and create more comfortable user interactions.

  • Show or hide particular elements in a website layout.

  • Change visual attributes of certain elements (such as font color) on a particular type of device.


Defining media queries


CSS media queries modify a website’s design according to a user’s specific browser and device preferences. The syntax of CSS media queries may seem complicated initially, but as soon as you familiarize yourself with the structure, it becomes easier to decode the message. Here’s a sample of a media query in the CSS file:


@media screen and (max-width: 480px) and (orientation: portrait) {
.footer {
    float: none;
    width: auto;
  }
}


The part after the @media and before the first open { bracket defines conditions. Let’s review the conditions of our example:


  • Media type: A media type is a type of device where we want to apply CSS setting. It's possible to define four categories of devices:screen (desktop, mobile and tablet), print (printers), speech (for screen readers that