Responsive Website Design: What It Is and How to Get It Right

Responsive web design is a way of building a website so that the same page works comfortably on any screen, from a wide monitor to a phone. The layout doesn’t just shrink: it rearranges itself. Columns stack on top of each other, the menu folds into a button, and text and buttons stay large enough to read and tap with a finger.

Below: what responsive design is in plain words, what a responsive layout is made of, how to check your own site in 15 minutes, and what to ask of the agency building your website.

What responsive design means

A responsive site has one address and one codebase. The browser knows how wide the screen is and, following the rules in the CSS, decides how to lay out the blocks. The three ideas it rests on were described back in 2010 by Ethan Marcotte in his article Responsive Web Design:

• a fluid grid: widths are set relative to the screen, not in fixed pixels;
• flexible images: a picture never spills out of its container;
• media queries: separate CSS rules for different screen widths.

People often use “responsive” and “adaptive” as synonyms, but strictly speaking they are two different approaches:

In practice, modern sites combine the two: the grid is fluid, and at a few widths the layout visibly rearranges.

Responsive site or a separate mobile version

Ten years ago many companies built a separate mobile version on a subdomain like m.example.com. For a new website today that’s almost always the worse choice:

Google’s own documentation recommends responsive design as the easiest option to implement and maintain.

Why every website needs to be responsive

Most people open websites on their phones. According to Statista, mobile devices have generated more than half of global web traffic for several years now. In some niches, such as delivery, local services or traffic from Instagram ads, the share of phones is even higher. Check your own number in Google Analytics: the Tech report, broken down by device category.

Google judges your site by its mobile version. This is called mobile-first indexing: for indexing and ranking, Google uses what a smartphone sees. If part of the text is hidden on mobile or the page falls apart, that’s exactly how Google sees your site.

A site that’s awkward on a phone doesn’t get enquiries. Nobody will pinch-zoom tiny text and aim at a miniature button. They’ll go back to the search results and open a competitor. What stops people from getting in touch is covered in our article on the website UX audit.

How to make a site responsive: what the layout is made of

Responsiveness starts in the design: for the key pages, the designer draws not only the desktop but also the mobile screen. Then the front-end developer turns it into code. Here’s what every responsive site needs.

1. The viewport meta tag

One line in the page code: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it the phone shows the site as a scaled-down desktop, and no other rule will help. MDN reference.

2. Breakpoints based on content, not on phone models

Breakpoints are the screen widths at which the layout rearranges. They go where a particular block starts to break, not at the width of an iPhone or a Samsung: there are hundreds of models and a new one comes out tomorrow. This site, for example, has two main breakpoints, 1024 and 500 pixels, and the grid stretches smoothly in between.

3. A fluid grid

Blocks are laid out with CSS Grid and Flexbox, widths are set in percentages or fractions, spacing and font sizes in relative units. If the design is in pixels but the code needs relative values, you can convert them with our free px to vw converter.

4. Responsive images

A phone doesn’t need a 2,000-pixel-wide image. The browser is given several sizes of the same picture (the srcset and sizes attributes) and picks the right one itself. This directly affects speed, since images are usually the heaviest part of a page. How it works is explained in the MDN guide; what else slows a site down on mobile is in our article on website loading speed.

5. Text you can read without zooming

Body text on a phone should be at least 16 pixels, lines shouldn’t be too long, and the contrast with the background should be sufficient. Headings get smaller on narrow screens so that a single word doesn’t take up the whole line.

6. Buttons sized for a finger

Google advises making tap targets at least 48×48 pixels, roughly the size of a fingertip, and not placing them right next to each other. Another common mistake is hover effects: there’s no mouse on a phone, so after a tap the button “sticks” in its hover colour. That’s why we only enable hover effects on devices with a mouse or trackpad.

7. Tables, forms and everything wide

A wide table or price list shouldn’t stretch the whole page; it should scroll inside its own block. In forms, the phone field should open a numeric keypad and the email field a keyboard with “@”, and a phone number on the site should be a link you can tap to call.

How to check your site’s responsiveness yourself

You don’t need any special knowledge. Google retired its Mobile-Friendly Test at the end of 2023, so here’s how to check instead.

Step 1. In a desktop browser. Open the site in Chrome, press F12, then Ctrl+Shift+M (Cmd+Shift+M on a Mac). This turns on device mode: at the top you can pick a phone model or drag the window width and watch the page rearrange.

Step 2. On a real phone. An emulator doesn’t show everything: real speed, a keyboard covering the form, spots that are hard to hit with a finger. Go through the site the way a customer would, from the home page to the enquiry form.

Step 3. In PageSpeed Insights. Paste the address into PageSpeed Insights and look at the Mobile tab: it shows speed and flags issues such as tap targets that are too small.

A checklist for step 2:

1. The page can’t be scrolled sideways; nothing sticks out past the edge of the screen.
2. Text is readable without zooming.
3. Buttons and links are easy to hit on the first try.
4. The menu opens and closes and doesn’t cover the content for good.
5. Images aren’t cropped at the most important spot.
6. Tables and price lists scroll inside themselves instead of breaking the page.
7. The enquiry form is comfortable to fill in, and the keyboard doesn’t hide the Send button.
8. The phone number is tappable and starts a call.
9. Pop-ups can be closed, and the close button isn’t off-screen.
10. The page loads quickly over mobile data, not just over Wi-Fi.

If three or more items fail, the problem is usually not a few small details but the fact that the site was built for desktop from the start.

What to ask of the agency building your website

• Mobile layouts in the design. At least for the home page, a service page and the enquiry form. If the mobile look is “left to the developer”, you’ll be the one deciding it, at acceptance.
• Responsiveness included in the price. It isn’t an add-on: in our projects it’s always included and never billed separately.
• Acceptance by checklist. Agree in advance on the widths and devices you’ll test before launch. The checklist above will do.
• The same content on mobile. Hiding half the text on phones is a bad idea for both people and Google.

If your current site isn’t responsive, retrofitting it usually costs more than it seems: the front end has to be rewritten almost from scratch. In that case it’s worth working out whether a full redesign makes more sense. You can see how our sites look on a phone in our case studies.