top of page

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.

Profile picture of Nick Babich

8.17.2022

19 min read

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.



What we'll cover



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. (See lots of responsive website design examples here.)


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 Wix Studio, 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 read the page out loud for visually-impaired users), all (for all media types). If you don’t specify this property, CSS will apply the all property by default.

  • Media feature: The min-width sets a minimum browser or screen width that certain styles will apply to. If a browser or screen width is below this limit, the styles will be ignored. The max-width property does just the opposite, anything above the maximum browser or screen width would not apply to the respective media query.

  • Orientation: Device orientation can be portrait (vertical orientation) or landscape (horizontal orientation). This property mostly applies to mobile devices and tablets.


Inside the parenthesis, a style condition can be applied when all conditions are met. In our sample, we’re checking three conditions:

  • Is the type of device desktop, mobile or tablet?

  • Is our device in portrait orientation?

  • Is our device screen resolution (max-width) equal to or less than 480px?


If all conditions are met, it means that the user is likely viewing our work on a small-screen mobile device in portrait mode. In this case, the device will load the CSS instructions for the footer object—otherwise, the instructions in this section will be ignored.



CSS media queries


There are two common approaches for structuring CSS styles, either placing them in one file or using different files for different types of devices. Each approach has its pros and cons. For example, by placing media queries all in one CSS style sheet with the rest of the CSS styles for the website, you will minimize the number of systems required to render a web page.


In addition, by distributing media queries between different files (i.e. desktop.css, mobile.css) will make it easier for developers to navigate in code, since all styles relevant to mobile viewport will be located in the same file.



Breakpoints


The resolution that we’ve defined in our media query example above acts as a breakpoint. Breakpoints are the building blocks of responsive web design, as they help designers define categories of devices and adjust design for each group.


“Which breakpoints should I use for my website?” is a typical question among web designers. There is no universal set of breakpoints since all projects are different and might require different resolutions. It’s possible to rely on screen resolution stats worldwide to define a few common groups of screen resolutions:

  • 360 x 640px (small mobile device screen): 10.10%

  • 1366 x 768px (average laptop screen): 9.3%

  • 1920 x 1080px (large desktop screen): 8.35%


When using Wix Studio design features, you’ll have 3 default breakpoints to start with:

  • 350 - 750px for mobile devices

  • 751 - 1000px for tablets

  • 1001px and larger for desktops


But these breakpoints aren’t set in stone. If you want to adjust, you can easily edit them or add custom breakpoints to fit your project’s needs, without diving into code.


Here are two essential rules to remember when selecting breakpoints for your project:

  • Choose breakpoints based on the content you have. The layout you use to showcase your content should dictate what breakpoints you want to use.

  • Try to use the least possible number of breakpoints. Remember that you will need to adjust content to match each breakpoint. Three or four breakpoints will give you enough flexibility to frame your content.



Resizing images for responsive web design


Images are an essential element of the modern web. The quality of images greatly affects the perception of a design—irrelevant imagery or pixelated assets are likely to create a bad impression on your visitors. It's not only important to handpick relevant images (ones that communicate the right messages to your audience) but also to ensure that images scale nicely to fit any browser size.


There are two types of images, raster images (JPG, PNG, TIFF) and vector images (SVG). The first group represents most images on the web, and the key problem with this group is that they are not naturally fluid. Unlike vector images that can scale in size without losing quality, raster images have to be modified for different resolutions.


An image of nine phones in dark mode, with a different image on each.
Images need to be responsive, just like the rest of your layout. That means scaling in size—without sacrificing quality.

Three ways of optimizing raster images for different resolutions


Let’s learn more about image optimization and get practical tips on how to resize images. You can optimize your images for different resolutions using CSS properties:


1. Resize images with image width attribute. The width property defines the fixed width of the image. The following CSS rule will define the width to 500px:


img {
    width:500px;
}

The downside of this approach is that it uses fixed width for your images, so it will be displayed at the exact same size across all devices. This approach is not very usable for responsive websites because improperly sized images can easily break layouts.


2. Resize images with CSS width property set to 100%:


img {
    width:100%;
}

The key difference with the previous method is that you don’t specify the precise width of the image in code, but instead let the browser resize the images as needed. With the width: 100%; property the image will scale up and down automatically. The downside of this approach is that the image can become pixelated when scaled up.


3. Receive with CSS max-width property:


img {
    height: auto;
    max-width: 100%;
}

Max-width property allows the image to maintain its aspect ratio and proportions. When the max-width is set to 100% the image will fit to the full width of its container. As long as no other width-based image CSS styles override this rule or the viewing area is narrower than the image’s original width, this image will load in its original size. This approach can be very useful for responsive web design.



Display size and visual assets


It’s also important to consider how different types of devices render images. While it’s possible to use the same file on all types of devices, the process of image resizing for small screen devices requires extra computational power, so using large files in their original resolution might cause performance degradation.


At the same time, high-resolution displays such as Apple “Retina” and Android “hDPI” might require you to provide visual assets at two or three times the normal resolution to achieve decent visual quality (@2x, and @3x). To solve both problems it's recommended to use a special tool such as Responsive Breakpoints that will allow you to prepare individual images for every breakpoint.


If you use Wix Studio to build a responsive website, you don’t have to write CSS code to make your raster images display correctly in different viewports. The platform allows you to set an exact width or height, set a max width or height percentages, and set a max width or height in pixels. You can also set an image focal point, so the visual stays centered when viewed in different formats.



Responsive use of typography


People visit websites for content, and written text represents the vast majority of this. That means that it’s essential for text to be legible at any viewport size. So when it comes to responsive type, there are a few things to keep in mind. (Before anything else, make sure you know the difference between typefaces and fonts.)


An illustration that reads "font scale" and features different letters on a red and green gradient.
When making type choices, consider the fact that your user may view a page on desktop, mobile, or tablet—and the text has to be legible in all of them. Responsive type is essential.

Never put text within graphics


By putting text within graphics, you immediately make it less responsive. Text cannot be enlarged without loss of quality, therefore you’d have to re-create visual assets for every breakpoint.



Select fonts that scale


The process of optimizing typography for responsive web design starts with selecting the right fonts.


To do this, web designers need to ensure font size is large enough to be legible at a glance. This is especially important for mobile devices—users should never have to double-tap or pinch-to-zoom in order to be able to read the text.


Choose fonts that scale clearly and are equally legible on a large TV screen and the tiny screen of a smartwatch. Generally, it's recommended to use web-safe fonts like Helvetica because they are optimized to look good at different resolutions.



Size text properly


Fonts can be sized in two different ways on the web:

  • Absolute values (pixels, points)

  • Relative values (percentages, em/rem, viewport width or height vw/vh)

Let’s start with the most popular option—pixels. Pixels are absolute values. The font size defined in pixels will be based on the pixel size of the user’s screen. Modern browsers are capable of making your design look similar across different resolutions when you use px.


Since most designers use pixels, this unit is very popular among product teams. However, pixels won’t enable users to adjust the text for their own needs and make your design less accessible.


Another popular option is a relative value called em. When you use em, the actual size of an element’s em is computed relative to the font-size of its parent element. Em relative values provide two significant benefits:

  • Benefits for designers: Relative values allow nesting font sizing. Em inherits its size from its parent, while rem inherits from the root styling.

  • Benefits for users: When you use relative values, you give users an opportunity to change their preferred default font size and the website will adjust automatically to suit their needs.


Now let's talk percentages. With a font-size of 100%, all the elements in one page are sized relative to the browser’s default type size:


body {
    font: normal 100% Roboto, sans-serif;
}

Last but not least, when the font is defined in “vw” units, the text size will follow the size of the browser window:


<h1 style="font-size:12vw">Hello World</h1>

Another thing to consider is that font sizes need to be different across different devices. It should be larger on desktop and smaller on mobile. Again, the benefit of using relative values is that you can define not just the desired size of a particular element, but also the relationship of that size to the sizes of other elements, maintaining nice proportions in your layout.


The following CSS will set a default font size for a h1 element to 3.5 rem for desktop and 2 rem for mobile:


h1 {
    font-size: 3.5rem;
}

@media only screen and (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }
}


While there are no exact rules for font sizing, it's recommended to apply the golden ratio to find exact font sizes. For example, if the base-font text for desktop is 16px, the size of a header h1 will be calculated by multiplying base-font size to 1.618 (it will be approximately 26px).


You can also set the text to scale between different ranges of maximum and minimum size for different breakpoints to make your website typography fully responsive. This will ensure your text will scale smoothly as you resize the screen.



Line length and line spacing


To achieve good readability, you need to limit the length of text lines. A good rule of thumb is to use 50 to 60 characters per line for desktop and 30 to 40 characters per line for mobile devices. It's possible to limit the number of characters per line using a width property of the content container or using a “length value”of ch. Ch represents the width of the glyph "0" (zero, the Unicode character U+0030) in the element's font.


p { 
overflow: hidden;
max-width: 40ch; 
}


Also, you shouldn't squeeze lines because line spacing that is too tight can cause eye strain. It’s optimal to use 120%-140% line spacing for good readability. The line-height CSS property is commonly used to set the distance between lines of text. We can set this property in percentages to make it relative to the font size of the element itself.



p {
line-height: 34%;
}


Mobile-first vs. responsive design


The role that mobile devices play in our daily lives has changed drastically in the