Everything you need to know about responsive web design

Responsive web design is an approach where one website adapts its layout, images and text to the screen it’s viewed on, from a small phone to a wide desktop monitor. For any business with a website, it’s a requirement rather than an option: Google uses the mobile version of your pages for indexing and ranking, and many of your customers will see your site on a phone first.

Developers used to build separate sites for different screen sizes. With so many devices in use (phones, tablets, laptops, large monitors and folding phones), that approach no longer makes sense. A responsive site responds to each visitor’s screen size, orientation and capabilities instead.

Responsive design is one of the elements of an outstanding business website. Here’s how it works and how to get it right.

What does responsive web design consist of?

A responsive website combines a few building blocks:

• A viewport setting that tells phones to display the page at the device’s real width, instead of shrinking a desktop layout to fit.
• Flexible layouts and grids that stretch, wrap and rearrange as the screen changes.
• Flexible images and text that scale within their containers.
• Media queries, and now container queries, that apply different styles when conditions change, such as the width of the screen.

Together, these let the same page adjust its layout, image sizes and features to suit each device.

Three ways to offer a mobile-friendly website

Google’s documentation describes three ways to serve a site to mobile visitors.

1. Responsive web design

Every device gets the same URL and the same HTML, and CSS adjusts the layout to the screen. Google recommends responsive design because it’s the easiest pattern to implement and maintain.

2. Dynamic serving

The URL stays the same, but the server detects the visitor’s device and sends different HTML and CSS. It depends on identifying each browser correctly and telling caches that the page varies by device, so it’s more complex to run.

3. Separate mobile site

Mobile visitors are redirected to a completely different site on its own address, often something like m.example.com. You maintain two sites, and the two versions need careful linking so search engines understand how they relate. Google has published guidance for moving these “m-dot” sites to responsive design.

Whichever setup you use, mobile-first indexing means the mobile version of each page should carry the same content as the desktop version, because that’s the version Google indexes. For most businesses, responsive design is the simplest and safest choice.

Building a responsive design

A responsive layout starts with a content hierarchy (what matters most on each page) and a design system (consistent rules for spacing, type and components). Three technical elements then do most of the work.

1. A fluid grid

Grids have structured web pages for many years, but a fluid grid sizes columns in proportions rather than fixed pixels, so elements keep consistent proportions and spacing as the screen widens or narrows. Today, CSS Grid and Flexbox handle this natively: content can wrap onto new rows, columns can collapse into a single stack on phones, and elements can change order without duplicating any content.

2. Flexible images and text

Images should scale within their containers and never overflow the screen. Responsive image techniques go further: with the srcset and sizes attributes, the browser picks the most suitable file for each screen, so phones don’t download desktop-sized images. The picture element lets you show a different crop on small screens when a wide image wouldn’t work.

Text needs to stay readable everywhere. CSS functions such as clamp() let font sizes scale smoothly between a minimum and a maximum, instead of jumping at fixed breakpoints. Keep line lengths comfortable on wide screens, and give lines enough height to breathe.

3. Media queries and container queries

Media queries apply CSS only when certain conditions are met, such as a minimum screen width, an orientation, or a user preference like dark mode or reduced motion. They’re what lets one page have several layouts from the same HTML.

Container queries are the newer addition. Instead of looking at the whole screen, a component responds to the space available in its own container. A product card can show its image beside the text in a wide column and above it in a narrow sidebar, wherever you place it. Container size queries have worked in all major browsers since 2023.

Set breakpoints where your content starts to look cramped or stretched, not around specific devices. Device sizes keep changing; your content’s needs don’t.

Other ways to refine your responsive design

Test how real people use your site

Watching people use your site is one of the best sources of insight. Ask a few customers to complete common tasks on their phones, like finding a price, making a booking or getting in touch, and note where they hesitate. Remote user testing services, card sorting (to see how people group your content) and quick “in the wild” tests with people outside your business can all uncover hidden pain points.

Test across devices and browsers

Your layout has to hold up across the browsers and devices your customers use. Chrome DevTools’ device mode is a quick first check, as it simulates different screen sizes and slower networks. It’s only an approximation running on your computer, though, so also test on real phones and tablets, including both iPhone and Android devices. Dragging a desktop browser window narrower isn’t enough on its own.

Get inspiration from responsive websites

Designers learn from each other’s work. Look at the sites and apps you use most on your phone and ask yourself:

• Which websites and apps do you use most often on your phone?
• Why do you prefer some sites over others that offer similar services?
• Do you prefer their mobile experience or their desktop experience, and why?

The answers often reveal details you’d overlook during everyday browsing.

13 responsive web design tips

These tips will help you make sure your site isn’t just responsive, but genuinely comfortable to use on every screen.

1. Plan your design first

Plan your layout before you design it. Successful designers usually start with wireframes, move on to the visual design and only then write code. This makes it easier to get the look and feel you want, and to adapt a template so it fits your brand.

Prototype key pages at several screen sizes and test them before you build. Design tools such as Figma (with auto layout and constraints) and the open-source Penpot (with flex and grid layouts that map to CSS) let you design layouts that resize, and Figma’s mobile app lets you try prototypes on a phone.

2. Know how your visitors use mobile devices

People often use a website differently on a phone than on a computer. Use your analytics to see which pages mobile visitors view most, how they arrive and where they drop off. Then make sure those pages and actions are the easiest to reach on small screens.

3. Optimise images

Images help people connect with your business and picture what they’re buying, but they’re often the heaviest part of a page.

• Use modern formats for photos. WebP and AVIF can deliver similar visual quality to JPEG at smaller file sizes, and AVIF has been supported by all major browsers since January 2024.
• Use SVG for logos and icons so they stay crisp at any size, and PNG for other graphics that need a transparent background.
• Compress every image, and serve different sizes for different screens with srcset.
• Lazy-load images further down the page so they load only as visitors scroll towards them, but never the main image at the top.

4. Make navigation excellent

Navigation is how visitors reach the rest of your site. On desktop, the important links usually sit in a visible menu bar; on phones, many sites tuck them behind a “hamburger” menu icon.

That saves space, but hidden menus are easy to miss, and visitors who can’t find their way around may leave. Keep the one or two most important links (such as “Book” or “Shop”) visible on small screens and use the menu for the rest. Linking to key pages from your homepage content helps too.

5. Make buttons and links easy to tap

When you shrink a layout, it’s tempting to shrink buttons too, but small targets are hard to hit with a finger. WCAG 2.2, the W3C’s accessibility guidelines, sets a minimum target size of 24 by 24 CSS pixels at level AA, and larger targets are more comfortable still.

• Make buttons look like buttons, with a clear shape and a colour that stands out from the rest of the page.
• Use padding to enlarge the tappable area without making the design feel heavy.
• Leave space between links so people don’t tap the wrong one.

6. Use a mobile-first approach

One of the best approaches to responsive design is to design for the smallest screen first. It forces you to decide what really matters, and it shows early on how your logo, text and images behave in a tight space. You then add enhancements for larger screens with min-width media queries. If the design works well on a phone, adapting it to bigger screens is usually straightforward.

It’s also how Google looks at your site, since it indexes the mobile version.

7. Use media queries and container queries wisely

Media queries have been supported by all major browsers for many years, and they remain the main tool for adapting a page’s layout to different screen widths, orientations and resolutions. Use container queries for components that appear in different places, such as cards, widgets and sidebars, so each one adapts to the space it actually has. Keep the number of breakpoints small and base them on your content.

8. Trigger the right keyboard in forms

Forms should fit the screen and be quick to complete with a thumb. Use the right input types for each field: an email field brings up a keyboard with the @ symbol close at hand, and a phone field brings up a telephone keypad. The inputmode attribute can refine the keyboard further, and autocomplete attributes let browsers fill in names, addresses and email addresses for your visitors.

9. Use microinteractions thoughtfully

Microinteractions are small animations that respond to what people do, like a button that changes when tapped or a subtle confirmation when an item lands in the cart. Used well, they make a site feel responsive and help people understand what just happened. Keep them quick and purposeful, and respect visitors who have asked their device to reduce motion: CSS can detect that setting.

10. Optimise typography

Text must be legible on every screen. A body size of around 16px (1rem) is a sensible starting point, with headings scaled to match, and a line height of about 1.5 gives paragraphs enough breathing room. Avoid script or decorative fonts for menus and body text, as they become hard to read on small screens, and make sure text contrasts strongly with its background.

11. Keep the design minimal

Minimal design removes clutter, helps visitors focus on your content and calls to action, and speeds up pages because there’s less to load. It also suits responsive design: it’s easier to highlight the most important parts of each page when fewer elements compete for space.

12. Use a framework or a well-built theme

You don’t have to start from scratch. CSS frameworks such as Bootstrap or Tailwind CSS come with responsive grids and components that save time. If you use a content management system such as WordPress, choose a well-maintained responsive theme and test it with your own content. Our guide to the advantages and disadvantages of website themes can help you decide between a theme and a custom design.

13. Don’t let overlays block your content

Share buttons, chat widgets, cookie notices and pop-ups all have their uses, but on small screens they can easily cover the content people came for. Test every floating element on real phones, keep banners compact and easy to dismiss, and consider hiding floating share bars on smaller screens.

How to check your website’s mobile responsiveness

Once you’ve applied these tips, test your site. Google retired its Mobile-Friendly Test tool, along with the Mobile Usability report in Search Console, on 1 December 2023, and pointed site owners to other tools such as Lighthouse. These are the checks to use now.

PageSpeed Insights

Enter a page’s address in Google’s PageSpeed Insights to get two kinds of results, for mobile and for desktop:

• Field data from real Chrome users over the previous 28 days, if your site gets enough traffic. This includes your Core Web Vitals. For at least 75% of visits, aim for a Largest Contentful Paint of 2.5 seconds or less, an Interaction to Next Paint of 200 milliseconds or less and a Cumulative Layout Shift of 0.1 or less.
• Lab data from a Lighthouse test run in a simulated environment, with specific suggestions for what to fix.

Lighthouse in Chrome DevTools

Lighthouse is built into Chrome’s developer tools. Open DevTools, choose the Lighthouse panel, select mobile or desktop and run an audit. You’ll get scores and suggested fixes for performance, accessibility, best practices and SEO.

Device mode and real devices

Chrome DevTools’ device mode lets you preview pages at common screen sizes and on slower connections. Treat it as a first approximation, then finish on real phones and tablets: tap every button, fill in your forms, open the menu and rotate the screen.

5 benefits of having a responsive website

The main benefit of a responsive website is that people get a good, consistent experience whatever device they use.

Responsiveness also pushes you to refine your content, so people on small screens see the most important information first. And because Google indexes the mobile version of your pages, a site that works well on phones gives your search visibility a stronger foundation.

1. A better user experience

First impressions count. A site that’s easy to use on any device encourages first-time visitors to stay longer and come back. That consistency builds satisfaction and trust, which supports enquiries, conversions and sales. If your site is awkward on a phone, many visitors will simply leave for a competitor.

2. Easier maintenance

Separate mobile and desktop sites mean double the updates and two sets of SEO work. With a responsive site, you manage one website, one set of content and one place for analytics and reporting. That takes less time and money, and you can make changes from any device.

3. Stronger SEO foundations

Google recommends responsive design, and it suits the way search works today:

• Each page has one URL and the same HTML on every device, which makes it simpler for Google to crawl and index your site.
• Links and shares all point to the same address, rather than being split between mobile and desktop versions.
• You avoid the extra setup, redirects and confusion that separate mobile URLs can create for search engines and users.

Google also says its ranking systems use Core Web Vitals, although content that matches what people are searching for still matters most. For the bigger picture, see what SEO stands for and how it works.

4. More visitors and customers

People search, browse and buy on the go. When your site is easy to use on a phone, more of those visitors stay, explore and get in touch, and you stay ahead of competitors whose sites are still awkward on mobile. If you’re also weighing up an app, read about the role of mobile apps in digital marketing.

5. Lower design and development costs

With one responsive site, you design, build and maintain one codebase instead of separate desktop and mobile versions. That saves time and money now, and with every future update.

If your website isn’t working as well on phones as it should, we can help you revamp or rebuild it. Take a look at our websites and digital systems service.