What Is Responsive Web Design?

How responsive design works

A responsive site serves the same HTML to every device and uses CSS to rearrange it. The building blocks are:

• The viewport meta tag, which tells phones to render at device width instead of shrinking a desktop page.
• Flexible layouts using CSS grid and flexbox, so columns stack, wrap and resize.
• Breakpoints, set with media queries or container queries, where the layout changes. Good designers set breakpoints where the content needs them, not at specific device widths.
• Responsive images using srcset and sizes, so a phone downloads a small file and a large screen a sharper one, ideally in WebP or AVIF.
• Fluid type, so headings scale sensibly between screen sizes.

Responsive, mobile-first and adaptive: the difference

Responsive describes the result: one site that fits every screen. Mobile-first describes the process: design and code for a phone first, then add layout for larger screens. It tends to produce faster, more focused pages because nothing is squeezed down from a desktop design. Adaptive or separate mobile sites (such as m.example.co.uk) serve different layouts or URLs to different devices. They are now rare, harder to maintain and easy to get wrong for SEO.

Whichever approach is used, the content should be the same on every device. Hiding important text or features on mobile to save space used to be common. Now that Google indexes the mobile version, anything missing on mobile may as well not exist for search, and visitors on phones lose out too. Good responsive design rearranges and prioritises content rather than removing it.

Why it matters for Google and for enquiries

Google's Search Central blog announced in June 2024 that it would crawl the remaining desktop-only sites with its smartphone crawler from July 2024, completing its move to mobile-first indexing, and noted that sites not accessible on mobile devices would no longer be indexed. In plain terms, Google judges your site by its mobile version.

Customers do too. Someone searching for an electrician on their phone will not pinch and zoom to find a number. If your site looks broken on phones, they press back and call the next result. A responsive site with a tappable phone number at the top of every page turns that visit into a call.

What good looks like on a phone

• Text readable without zooming, at a comfortable line length.
• Tap targets large and well spaced. WCAG 2.2 success criterion 2.5.8 sets a minimum of 24 by 24 CSS pixels (W3C).
• Phone number and main call to action visible without scrolling.
• No sideways scrolling, and no content cut off at the edge.
• Menus that open and close easily, and footers that collapse into tap-to-expand sections rather than one very long list.
• Forms with the right keyboard: number pad for phone fields, email keyboard for email fields.
• Fast loading on a mobile connection. See Core Web Vitals.

How to test your own site

Open your site on your own phone and try to do what a customer would: find a service, read the price, tap to call, fill in the form. Then try a friend's phone of a different make. In Chrome on a computer, developer tools let you preview common screen sizes. Google's PageSpeed Insights shows mobile performance scores and field data where available. If any of this feels awkward, your customers feel it too.

Pay attention to the footer. On many older sites, three or four columns of links simply stack on a phone into a very long scroll. A better pattern keeps your phone number and email as large tap targets at the top of the footer and collapses link groups into sections you tap to open.

When to call us

If your website is hard to use on a phone, it is usually cheaper to rebuild it responsively than to patch an old fixed-width design. Our responsive web design service builds mobile-first from £250 + VAT for up to 5 pages. Read redesign or start again or get in touch on 01623 650333.

Related