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.
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.
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.)
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 last decade. In fact, 56% of all website traffic comes from smartphones. Optimization for mobile design is a crucial part of the web design process—because a website that’s not optimized for mobile devices is losing out on approximately half of its traffic.
Making a responsive website doesn’t imply it is mobile first, and there are several differences when it comes to mobile first vs. responsive design. Mobile-first design is an approach that suggests designers create a layout that works well at the smallest breakpoint, before adjusting it for larger viewports.
Differences between mobile and desktop design:
Size of display. On mobile, you have less room for your content, and need to carefully prioritize what you want to display
Interaction methods. Since users interact with content using their fingers on mobile devices, animation like hover effects won’t work well.
Context of use. People can interact with content on the go (e.g., while waiting for a train), so mobile sites should be designed for shorter user sessions and a smaller attention span.
Benefits of using the mobile-first approach:
Makes responsive design easier. It will help you prioritize content and features, and remove everything that isn’t absolutely necessary. As a result, you will likely reduce the user's cognitive load on mobile and any other platforms you design for.
Good for search engine optimization. Google evaluates websites rankings mostly based on the content of their mobile versions. Google might not judge a page as mobile-friendly if it requires extra interaction from mobile users, such as scaling content up to make it readable. You can take the Mobile-Friendly Test from Google to check your site’s design.
How to design a responsive website with a mobile first strategy:
Practice arranging content-first
The process of creating a responsive website should always start with planning a layout. Organize your content and functional elements in a way that offers the best possible experience for visitors. That doesn't mean that you need to create a final, pixel-perfect design right from the start. In fact, it's recommended to create a schematic representation of a future design to show where each block with content and functional elements will be located on the page. This way, you can evaluate different variations of the layout with your team and stakeholders, and select the one that you think will work best for your users.
Use conditional loading
When prioritizing content, you might want to hide some content on mobile devices. CSS property display: none; allows you to do it. You can apply this property in CSS for specific elements that need to be hidden. For example, you might have two CSS styles,desktop.css for desktops and mobile.css for mobile devices:
Desktop.css:
#content { width: 100%; }Mobile.css:
#content { display: none; }Note that display:none sometimes confused with visibility: hidden. These are two different CSS instructions. Visibility: hidden just hides the content, so it becomes invisible (not drawn) and cannot receive focus although it’s still on the page. Display: none on the other hand gets rid of the content entirely.
Design for comfortable interactions
Users interact with the desktop website via clicks, but the mobile version via finger taps and swipes. People also use their mobile devices with only one hand, and it's important to optimize web layouts so that all key functional elements—such as call to action buttons—are located in a thumb-friendly zone (the user shouldn't have to stretch their thumb to reach for an important element).
All tap targets should be sized appropriately. The size of functional elements such as call to action buttons should be at least 9mm, which is equal to the size of a user thumb. If you place two interactive controls side-by-side, you need to add enough whitespace between those interactive options.
Use clear visual indicators
Touchscreens have no capability to display hover effects, since there is no cursor. Clarity of UI plays an even more important role on mobile devices, and it's important to design every element in a way that maximizes the chances that users will understand its function. It's possible to achieve this goal by using a consistent visual style. For example, you can use a particular blue color for all interactive elements.
Adapt navigation for mobile
Most of the time, web designers rely on hamburger menus on mobile. However, it's possible to utilize a more beneficial pattern such as prioity+ navigation pattern. This pattern guarantees that the top-priority options will always be visible for the user while the remaining options will be hidden behind a “more” link.
Minimize typing
Responsive web design isn’t just about making content fit, it's also about creating more comfortable interactions for your users. In the case of mobile devices, typing is one of the most painful parts of the user journey.
Small screens make typing hard and error-prone on mobile devices. Whenever possible, try to use pre-fill data in online forms. The great thing about mobile is that you can utilize some of its hardware capabilities.
Here are a few tips to minimize typing on mobile:
Use GEO-location data to pre-fill user city in shipping and billing information. You can use Google’s Places API to offer accurate suggestions based on the user’s location.
Use a device camera to allow users to take a photo of their credit card and fill-in credit card details automatically.
Use Touch ID / Face ID instead of asking the user to type their credentials.
Use voice input in search forms.
Optimize responsive design for mobile device capabilities
Slow loading time is a common reason why people abandon web sites.
Jakob Nielsen defined three response-time limits: 0.1 seconds gives the feeling of instantaneous response. Ideally, your website should respond in 0.1 seconds. One second keeps the user's flow of thought seamless. 10 seconds is about the limit for keeping the user's attention. But according to Google research, as page load time goes from 1s to 3s, the probability of bounce increases 32%.
Mobile devices are less powerful than desktop computers. That’s why when you design for mobile you need to avoid heavy visual content, fancy animated effects and complex visual transitions because they might have a negative impact on system performance.
Use these tips to optimize your design for mobile:
Define key performance metrics. Focus on metrics that will tell you how fast content renders. The key metric is Time to Interactive (TTI), which defines the state where your layout is stable:all fonts are visible, and the UI is ready to handle user input. You should also consider Speed Index (how quickly the page contents are visually populated) and CPU time spent (how often and how long the main thread of a central processor is blocked).
Evaluate animated transition and motion effects. Ask yourself “Is this visual effect worth the time it takes to load on mobile?”
Optimize image delivery. If your product serves a large number of images, it's worth considering what content could be served statically from a content delivery network (CDN). Cloudflare and Cloud CDN are two popular options.
Optimize animation and videos. Avoid using animated GIFs because they consume significant hardware resources and start using looping HTML5 videos.
Use lazy loading for images and video. Most of the time, you don’t need to load all visual assets all at once. The content located below the fold can be loaded dynamically, as the user scrolls below the fold. This practice is called lazy loading. You can use LazyLoad library for this purpose—this library is written in plain JavaScript and supports responsive images. In Chrome 76+, you can use the loading attribute to defer the loading of offscreen images that can be reached by scrolling. Here's an example:
<img src="image.png" loading="lazy" alt="…" >Always measure your site performance. Use tools like Google’s Speed Scorecard and Dexecure to track your current performance,such as the time required to load your site on mobile. Check Front-End Performance Checklist to learn more about performance optimization.
Test your design on real devices and in different browsers
At the time when you finish working on your website, you should invest time in testing it on a real device. Create a list of common tasks that users are supposed to complete on your website and invite individuals that represent your target audience to a usability testing session.
During the testing you can see how your website works on different platforms (Android, iOS), and it’s cross-browser compatibility (Chrome, Safari, Firefox). If you doubt that some CSS style instruction is supported by a particular browser, you can check it in Caniuse. The testing will show you where users face friction and what areas of your website require optimization.
4 responsive web design examples
Explaining how responsive web design works is one thing, seeing the practice in action is another. Check out the responsive website design examples below and change your browser size to see how each design responds to the change. (More on good web design here.)
1. KT Estep
Award-winning multidisciplinary designer KT Estep has an outstanding example of a responsive web design. The full screen web layout is flexible with your browser’s width, aligning the content with the relevant size screen space. When you open the design on mobile, you’ll notice none of the content is removed, rather it is arranged into one column which provides a better viewing experience and easy scrolling on small screens.
Ja1da is a producer and songwriter with one exciting responsive website. Using handwritten type, one-of-a-kind vector graphics, Video Boxes and scroll effects throughout the site are all ways in which the artist injects personality into his design. None of this is lost when we view the desktop version compared to mobile.
On mobile, Ja1da rearranges the website imagery and changes its proportions in order to maintain the site’s theme and ensure visual balance. The responsive switch to a hamburger menu also provides more screen real estate on the small mobile device.
3. Melitas
The responsive web design for venture capital fund Melitas relies heavily on images to communicate its message. In this case, the mobile version adjusts the design to feature a cropped hero image, and rearranges the homepage’s galleries into a vertical format. The additional white space on the mobile site works well to frame and break up content for visitors viewing on a smaller scale.
We see a similar approach with developer Domaine Alepin's website, we see a similar approach. The one page site utilizes a zig-zag layout on the homepage, but adjusts to a simplified symmetrical layout as the viewport size changes to mobile. As is the case in many responsive web designs, Domaine Alepin’s written content is adjusted for the smaller screen. One neat feature in particular is the way we interact with the business’s map on mobile vs. desktop version—when viewed from a smartphone, visitors can tap their fingers to zoom in on the image.
Invest in responsive design, invest in user retention
The more you invest in creating good content, the more chances your users will love your website. If you’re using Wix Studio, the process of how to meake a responsive website doesn’t involve coding, defining grids and breakpoints at all, so you can focus on the content that you want your audience to see—no matter which device they’re on.
