How to Build a Responsive Website from Scratch (2026 Guide)

Updated on 9 November 2026 by Nicolas Finet, CEO of Sortlist. This guide has been rewritten for 2026: it replaces older practices (Materialize, graceful degradation, viewport-only media queries) with the modern toolkit of fluid layouts, container queries, responsive images, and testing, and shows how to build a responsive site from scratch.

A responsive website adapts its layout, text and images to the screen it is shown on, from a small phone to a large desktop monitor. It is the standard way to build the web, and Google indexes the mobile version of your pages. This guide explains the principles and walks through the steps, with short code examples.

Why responsive design matters

The UK is mobile-first for many people, even if desktop still shows large page-view shares in some trackers. StatCounter has put the UK at roughly half desktop and 46% mobile for May 2025 to May 2026 by page views, while other analyses of human traffic put mobile above 53%. Either way, a large share of visitors use phones, and tablets and large screens add more variety.

• Experience: text that is readable and buttons that are easy to tap keep people on the page.
• SEO: Google uses the mobile version of your pages for indexing and ranking, so content and structured data must be present on mobile.
• Maintenance: one site is easier to maintain than separate desktop and mobile versions.
• Conversion: a form or checkout that does not work on a phone loses sales.

Understanding responsive web design principles

Fluid grids and flexible layouts

Instead of fixed pixel widths, layouts use proportions that stretch and shrink. CSS Grid and Flexbox do this natively, with the fr unit and percentage widths. A fluid layout means that content flows to fit rather than breaking.

Media queries

Media queries apply CSS only when conditions are met, such as a minimum screen width. They remain the way to change page-level layout, for instance switching from one column to three. Use breakpoints where your content needs them, not for specific devices.

Container queries

Container queries let a component respond to the size of its parent container rather than the whole viewport. A card can be vertical in a narrow sidebar and horizontal in a wide column, wherever it is placed. They have been Baseline widely available since August 2025, with support reported at about 92.6%, so you can use them for components with sensible fallbacks.

Progressive enhancement

Start with a basic, working experience that uses semantic HTML and simple CSS, then add enhancements for browsers that support them. This replaces the older idea of "graceful degradation", where you design for the best case and then patch failures. Progressive enhancement keeps the site usable on older devices and poor connections.

Mobile-first

Write the base CSS for the smallest screen and use min-width media queries to add complexity as space increases. This keeps CSS simpler and favours performance on phones.

Choosing a front-end approach

Approach	Strengths	Consider
Plain CSS (Grid, Flexbox, container queries)	Lightweight, no dependencies, modern and powerful	Requires CSS skills
Tailwind CSS	Fast to build with utility classes; popular in new projects	Markup can become verbose; learning curve
Bootstrap	Ready-made grid and components	Heavier, looks generic without customisation
Website builders and CMS themes	No code needed	Limited control over output

The State of CSS 2025 survey, as reported by industry sites, showed about 37% of developers actively using Tailwind compared with 21.6% for Bootstrap. Older frameworks such as Foundation and Materialize have far less momentum, so choose tools with active maintenance. See also web design tools.

Building the HTML structure

Start with semantic HTML: header, nav, main, section, article, aside and footer. It helps accessibility, SEO and CSS.

The most important line for responsive sites is the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, mobile browsers render the page at a desktop width and shrink it. Do not disable zooming: it harms accessibility.

HTML attributes that help

• lang on the html element for screen readers and translation.
• alt on images, with width and height to prevent layout shifts.
• loading="lazy" for images below the fold, but not for the main (LCP) image.
• srcset and sizes for responsive images.
• inputmode, autocomplete and correct input types to make mobile forms easier.

Styling with CSS

Selectors and declarations

Use class-based selectors, keep specificity low and organise styles with a consistent naming convention. Avoid inline styles.

Responsive units

• rem for font sizes and spacing, so that the user's browser settings are respected.
• clamp() for fluid type and spacing that scale between a minimum and a maximum.
• % and fr for layout structure.
• ch to cap line length (for example max-width: 65ch).
• dvh or svh for full-height mobile sections, which handle changing browser toolbars.
• Container query units (cqi, cqw) for component-level sizing.

The box model

Set box-sizing: border-box globally so that padding and borders do not make elements wider than intended.

Flexbox and Grid layout

Flexbox is best for one-dimensional alignment (a row of buttons, a navigation bar). Grid is best for two-dimensional layouts. A common responsive card grid needs no media query at all:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

Mobile-first breakpoints

.layout { display: block; }
@media (min-width: 48rem) {
  .layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
}

Container query example

.card-wrap { container-type: inline-size; }
@container (min-width: 30rem) {
  .card { display: flex; gap: 1rem; }
}

CSS variables

Custom properties store colours, spacing and type scales in one place, and make theming (including dark mode) and consistent spacing easier.

Responsive images and media

• Use srcset and sizes so that the browser picks the right file for the screen.
• Use the picture element to offer modern formats (AVIF first, then WebP, with JPEG as fallback).
• Set max-width: 100% and height: auto so that images never overflow.
• Lazy-load images below the fold, and do not lazy-load the main hero image.
• Embed video responsively with the aspect-ratio property.

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
     sizes="(min-width: 60rem) 60rem, 100vw"
     width="1200" height="675" alt="Team working in a studio">

JavaScript enhancements

Use JavaScript to enhance rather than to build the basics. The site should still be readable without it.

• Event handling: use touch-friendly events and avoid hover-only interactions, which fail on phones.
• DOM manipulation: keep it light, and avoid layout thrashing (repeated reads and writes that force reflows).
• Navigation: a mobile menu must be keyboard-accessible, with correct ARIA attributes and focus handling.
• Performance: defer non-critical scripts, split bundles and watch Interaction to Next Paint (INP), which should be 200 milliseconds or less.

Touch, typography and navigation

• Tap targets: make buttons and links large enough to tap comfortably, with space around them.
• Text: at least 16px base size on mobile, adequate line height and strong contrast (WCAG 2.2 asks for 4.5:1 for normal text).
• Navigation: keep it simple. A collapsed menu with clear labels, and a visible search or call button where relevant.
• Forms: short, with the right keyboard type, clear errors and autofill support.
• Tables: allow horizontal scrolling or restructure into stacked blocks on small screens.

Testing a responsive website

“Site owners should aim for good Core Web Vitals metrics: Largest Contentful Paint (LCP) under 2.5 seconds, Interaction to Next Paint (INP) under 200 milliseconds, and Cumulative Layout Shift (CLS) under 0.1.”

Google Search Central, Core Web Vitals

• Browser developer tools: use device emulation to check layouts at different widths.
• Real devices: test on at least a recent iPhone, an Android phone, a tablet and a laptop, because emulators miss touch and performance behaviour.
• PageSpeed Insights and Lighthouse: lab data and recommendations; Search Console shows real-user Core Web Vitals.
• Accessibility checks: axe, WAVE and manual keyboard and screen-reader testing.
• Cross-browser checks: Safari, Chrome, Edge and Firefox.
• Slow connections: throttle the network to see how the site behaves on 4G.

Common mistakes

• Forgetting the viewport meta tag.
• Using fixed pixel widths for containers and images.
• Hiding important content on mobile that Google indexes.
• Huge images and unoptimised scripts that slow phones.
• Tiny tap targets and hover-only menus.
• Choosing breakpoints for devices instead of for content.
• Testing only in an emulator.

Checklist

• Mobile-first CSS with content-driven breakpoints.
• Fluid layouts with Grid and Flexbox; container queries for components.
• Responsive images in modern formats with dimensions set.
• Core Web Vitals within the good thresholds.
• Accessible navigation, forms and contrast.
• Tested on real devices and slow networks.

For wider design costs and decisions, see website design quotes and our Google SEO guide.

Frequently asked questions about responsive websites

What is a responsive website?

A site whose layout, text and images adapt to the screen size and device, using flexible grids, media queries and responsive images.

What is mobile-first design?

Writing the base styles for small screens and adding complexity with min-width media queries as the screen grows.

What are container queries?

CSS rules that let a component change its layout depending on the size of its parent container, not the viewport. They have been widely supported since August 2025.

Do I still need media queries?

Yes, for page-level layout changes. Use container queries for components and fluid units to reduce the number of breakpoints you need.

Which framework should I use?

Plain CSS with Grid and Flexbox covers most needs. Tailwind CSS is popular for utility-based builds, and Bootstrap provides a ready-made grid and components.

How do I test responsiveness?

Use browser device emulation for quick checks, then test on real devices, and measure Core Web Vitals in PageSpeed Insights and Search Console.

Need a responsive website built? Post your project on Sortlist and compare UK web design agencies for free.

Sources: Google Search Central, Core Web Vitals, StatCounter, UK desktop vs mobile, Scrimba, responsive web design 2026, LogRocket, container queries, Tailkits, popular CSS frameworks. Usage statistics are indicative.