What does responsive design mean?

Responsive web design refers to the approach of developing a website that displays optimally across different devices. The term responsive design is as old as the mobile web and is established as a standard approach in web design.

Responsive design at a glance

Before the rise of the mobile web, the landscape of internet-enabled devices was relatively homogeneous. There were desktop or laptop computers, which were quite similar in terms of input and output devices. Both types of devices featured a keyboard and mouse or trackpad, as well as a screen with a width of around 1,000 to 2,000 pixels.

Back then, creating a website that displayed properly on most devices did not require excessive effort. The easiest solution was to limit the page width to the smallest common denominator. A popular approach was to display pages 800 pixels wide and centred or left-aligned. On a larger screen, this might result in a bit more white space, but the pages were easy to read on all devices.

With the rise of mobile devices, the landscape of internet-enabled devices has changed fundamentally. While early internet-capable devices had fairly similar screen sizes, modern devices such as smartphones and tablets vary significantly. Today, screen widths range from 320 pixels to well over 4,000 pixels. Beyond basic pixel dimensions, factors like physical resolution (‘pixels per inch’, ppi), Retina displays, and the device pixel ratio (DPR) also play an important role. Interaction has evolved as well. Navigation is no longer limited to a mouse but increasingly happens via touch.

A responsive website adapts to the available space on the screen. This is also referred to as ‘screen real estate’. The website should look good on all devices and provide an optimal user experience (UX).

Responsive design includes a wide range of techniques and approaches that are combined to develop a fully responsive website. These include in particular:

• HTML5 elements such as picture and attributes like srcset and sizes
• CSS media queries
• CSS units
• Use of multiple assets for a resource
• Mobile-first approach

In addition to classic smartphones and tablets, foldables and dual-screen devices are becoming increasingly important. These devices can change their display area dynamically, for example when unfolded or when switching between single- and split-screen views. For responsive design, this means that layouts must not only react to different screen sizes, but also to sudden changes in available space during use. Modern responsive websites should therefore be flexible enough to present content consistently and user-friendly, even with changing form factors.

Why should a website be built with responsive design?

Developing a responsive website offers several advantages, with user experience taking centre stage. In principle, a good user experience can also be achieved without responsive design. However, this then requires either a separate mobile site or the use of JavaScript. Overall, this is often significantly more complex than the CSS-based responsive design approach and results in more effort to maintain the different site versions.

Responsive design for optimal layout

The design of a website has a decisive impact on how visitors perceive the information presented. A well-crafted design reflects the identity of the organisation behind the website and helps to build a connection with the brand. Visitors should feel comfortable on the site and have a positive experience. Let’s look at two examples of how responsive design contributes to an optimal user experience:

• Imagine a headline that fills the entire screen on a mobile device. However, on the desktop version, the same font size hardly stands out. On desktop, the headline must be displayed larger to truly grab the visitors’ attention.
• On a blog, a sidebar is shown to the right of the article. The sidebar contains links to additional articles with small preview images. On desktop, the sidebar helps limit the article width and improves readability. On mobile devices, however, the sidebar would take up nearly half the screen. The layout must adjust on mobile devices so that the sidebar content appears below the article.

Responsive design for optimal user experience (UX)

In principle, a website not built with responsive design is displayed on the small screen of a mobile device exactly as it is on the desktop, just much smaller. This forces users to zoom in on individual sections of the page. It is therefore better to offer an optimised version. Here are a few examples:

• A button on a website is clicked with a mouse on a desktop, but a mobile device is operated with a finger. The button needs to be larger for the mobile version and should have more spacing from other elements.
• Imagine a form on a page. Normally, CSS assigns it inner spacing (padding) so the text is easy to read and doesn’t touch the form’s edges. An inner spacing of 20 pixels on both the right and left is standard and looks good on large screens. But on a mobile device with only 320 pixels of screen width, 40 out of 320 pixels are lost (about one eighth). If the form also has outer spacing (margin), say another 20 pixels per side, 25 percent of the available space is lost on the mobile device. To prevent this, the spacing should be reduced on mobile devices.

The consequences of not using responsive design

A significant number of users now access web content through mobile devices. If a website isn’t fully built with responsive design, there are serious drawbacks. These include:

• Low conversion rates and high bounce rates due to subpar design and disruptions to the user experience
• Poor search engine ranking, as Google takes into account factors like mobile usability, Core Web Vitals, and touch target sizes
• Reduced performance caused by loading non-optimised resources, which can be measured through metrics such as Largest Contentful Paint (LCP) and Interaction to Next Paint (INP)

Core web vitals and understanding user experience metrics

Google uses Core Web Vitals to objectively evaluate the real user experience. These are standardised performance metrics that assess how fast content loads, how stable the layout remains, and how quickly a responsive website responds to user interactions. The key Core Web Vitals are:

• Largest Contentful Paint (LCP): measures how long it takes until the largest visible content element is rendered (target value ≤ 2.5 s)
• Interaction to Next Paint (INP): captures how responsive a page is during user interactions (target value ≤ 200 ms)
• Cumulative Layout Shift (CLS): evaluates whether content shifts unexpectedly while loading (target value ≤ 0.1)

Non‑responsive websites often perform worse on these metrics, for example due to oversized image files, lazy‑loaded content, or layout adjustments that are not tailored to mobile devices.

Tools for analysing Core Web Vitals

Core Web Vitals can be measured using various tools. Some of the most commonly used ones are:

• Google PageSpeed Insights: analyses individual pages, combining real user data with lab results
• Google Lighthouse: integrated into Chrome developer tools, perfect for in-depth performance analysis
• Google Search Console: displays aggregated Core Web Vitals data for entire websites and highlights problematic URLs

These tools help you identify weaknesses and assess how changes in responsive design impact the user experience.

Which aspects of web development are affected by responsive design?

Responsive design includes various approaches and technologies. Typically, there are multiple solutions for the different scenarios. Development in this area continues to evolve.

Responsive layout

Implementing complex layouts on websites has been a science of its own since the early days of the World Wide Web. HTML includes different element types: block, inline, and inline-block. Block elements take up the full available width and are stacked vertically. Inline elements only use the width actually required by their content and are positioned next to each other. Here is an overview of the most important element types for responsive design:

In the past, table-based or float-based layouts were used to arrange content side by side. These approaches are now considered outdated. Modern responsive design layouts are based almost exclusively on CSS Flexbox and CSS Grid. Flexbox is particularly suitable for one-dimensional layouts, such as horizontal or vertical lists, while CSS Grid is used for complex, two-dimensional page structures.

A clear example is a page with four preview elements for blog articles. Each preview contains an image, headline, teaser, and a ‘Read more’ button. Flexbox makes it easy to implement the following responsive layout:

• On a large screen, all preview elements are displayed side by side in a single row, with each element taking up 25 percent of the available space.
• On a medium-sized screen, two preview elements are displayed side by side in two rows, with each element taking up 50 percent of the available space.
• On a small screen, all four preview elements are stacked vertically in a single column, with each element taking up 100 percent of the available space.

Responsive layout with CSS Grid and media queries

Modern responsive design layouts can often be implemented without the need for an additional CSS framework. Native layout tools like CSS Grid and Flexbox are widely supported, making it easier to create flexible and maintainable structures. A key tool in this process is CSS media queries. These allow CSS rules to be applied based on the properties of the output device, particularly the viewport width. Media queries determine under what conditions a specific layout should be used, such as a certain screen size or device orientation.

Let’s consider a page with four preview elements for blog articles. Each element includes an image, a headline, a short text, and a link to the full article. The goal is to adjust the number of elements displayed side by side based on the available screen width.

HTML structure:

<div class="blog-grid">
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
</div>

CSS implementation with CSS Grid:

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
/ *medium screens* /
@media screen and (min-width: 600px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/ *large screens* /
@media screen and (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Without a media query, a simple layout for small screens is defined first. Starting at a width of 600 pixels, two columns are displayed, and from 1,024 pixels, four columns. This approach follows the mobile-first principle and ensures that content remains clear on small displays and is used optimally on larger screens. Media queries always respond to the viewport, meaning the size of the browser window or screen.

How container queries enable responsive design at the component level

While media queries respond to the viewport size, CSS container queries take a different approach. They allow styles to be applied based on the size of a surrounding container, rather than the screen size. This means elements no longer react to the entire browser window but to the available space within a specific layout. This is particularly useful in modular layouts where components are used multiple times in different contexts, such as in a narrow sidebar or a wide main content area. Media queries alone can only represent these scenarios in a limited way.

A common example is a preview element for articles. When placed in a narrow sidebar, the image and text should be stacked vertically. In a wider main content area, however, the image and text can be displayed side by side. Container queries allow for this context-based adjustment without needing to define additional breakpoints for every layout variation. First, the parent container is designated as a ‘query container’.

.preview-container {
    container-type: inline-size;
}

The preview component itself gets a simple basic layout that is optimised for limited space:

.article-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Next, a container query specifies that the layout adjusts once the container exceeds a certain width:

@container (min-width: 500px) {
    .article-preview {
        flex-direction: row;
    }
}

The component automatically adjusts to the available space within its container, regardless of whether it’s in a sidebar or the main content area. The key factor is the container’s width, not the viewport size. Container queries enable a component-based approach to responsive design and serve as a valuable complement to traditional media queries. In modern projects, both techniques are often combined to achieve broad layout changes as well as detailed adjustments of individual components, ensuring a fully responsive website.

Responsive typography and text content

To provide an optimal user experience, the font size of a website’s text elements must adapt to the available screen space and usage contexts. Beyond readability, factors like scalability, accessibility, and layout stability are also crucial. To achieve this, various font techniques are employed in responsive design.

A fundamental approach involves using the CSS unit rem (‘root element’), which links an element’s font size proportionally to the HTML root element. By adjusting the font size of the root element through CSS breakpoints, all fonts can be scaled uniformly.

html {
    font-size: 16px;
}
h1 {
    font-size: 3rem;
}

This approach can be effectively combined with media queries in a mobile-first strategy to moderately increase the base font size on larger screens:

@media screen and (min-width: 30em) {
    html {
        font-size: 18px;
    }
}

In modern layouts, fluid typography is increasingly used, adapting smoothly to the available space. The CSS clamp() function is now the preferred tool for this. It lets you define a minimum, a preferred, and a maximum font size, all without additional breakpoints.

h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

This keeps the text easily readable on small displays, lets it grow dynamically on larger screens, and ensures it never exceeds the defined limits. Today, clamp() is considered best practice for responsive typography in modern responsive design.

Responsive images

Along with layout and typography, optimising image rendering is a crucial aspect of responsive design. It clearly doesn’t make sense to load an image with a 1,920‑pixel width onto a phone with a 400‑pixel-wide screen. First, the browser must downscale the oversized image, which consumes extra processing power. Second, the file size of an image increases with the number of pixels.

For example, an image with 1,920 x 1,080 pixels will require about four times more storage than an image with 960 x 540 pixels. Downloading such a large image to a mobile device also takes significantly longer. Overall, this has a negative impact on website performance and usability if images aren’t optimised for different screen sizes.

For responsive images, the srcset and sizes attributes have become standard, enabling browsers to select the appropriate image based on the context. These are often referred to as ‘assets’. Each image file is linked to a CSS media feature query. This allows the browser to choose the most suitable asset from the list based on the specific device.

Here’s a brief example. The following HTML code defines an image with two assets using srcset: one with a 480‑pixel width and another with an 800‑pixel width. The sizes attribute specifies that the 480‑pixel image should be used for screens up to 600 pixels wide. For larger screens, the browser will load the 800‑pixel image:

<img
    src="image-800w.jpg"
    srcset="image-480w.jpg 480w,
                    image-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
                 800px"
    alt="Image description">

The main advantage of this approach is that the browser automatically determines which image variant to load. Developers only need to specify appropriate image sizes, without having to manually manage the selection process.

Traditionally, screens were designed in landscape format, but mobile phone screens are oriented in portrait format. A landscape image appears quite small on a portrait device. To improve the result, it’s better to use a square or portrait image cropped specifically for that purpose. Choosing different crops of an image is called ‘art direction’. This can be achieved using the <picture> element, which enables the definition of multiple image variants for different scenarios.

Here’s an example. The following HTML code defines a <picture> element that specifies different assets for landscape and portrait orientations, with multiple versions optimised for different screen sizes in both cases:

<picture>
<source
media="(orientation: landscape)"
srcset="image-small-landscape.png 320w,
image-large-landscape.png 1200w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<source
media="(orientation: portrait)"
srcset="image-small-portrait.png 160w,
image-large-portrait.png 600w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<img src="image-small.png" alt="Image description">
</picture>

This ensures that a subject is displayed just as effectively on small, portrait‑format displays as it is on large screens.

Responsive navigation

Navigation is a key element of a website and presents a unique challenge in responsive design. Traditionally, navigation is placed in the header on large screens and includes submenus that appear when hovered over with a mouse pointer. This approach doesn’t work on mobile devices. On small screens, there isn’t enough space for the menu, and interaction is via touch, not a mouse.

There are several ways to display navigation menus on mobile devices, all of which save space and do not require a mouse pointer. Navigation activation is often accompanied by an animation to capture the user’s attention. Some of the most common approaches for responsive navigation include:

• The ‘hamburger menu’ icon (three horizontal lines): This serves as the main control to activate the menu.
• The ‘off-canvas’ navigation: The menu slides in from the edge of the screen, pushing the page content aside.

In practice, other established navigation patterns are also used, each offering benefits depending on the context. For example, bottom navigation places key navigation items at the bottom edge of the screen for easy access with the thumb. ‘Priority+’ menus prioritise important items, dynamically moving less relevant entries into a submenu. For large, content-heavy websites, mega menus with touch optimisation are also used, providing clear organisation even on larger tablets and hybrid devices.