Complete guide to responsive design

How to build interfaces that adapt to every screen, from mobile to ultrawide

9 min

Responsive design stopped being optional years ago — it is the standard. Over 60 % of global web traffic comes from mobile devices, and Google uses the mobile version as its primary indexing reference. A site that does not adapt to small screens loses users and rankings.

This guide covers responsive design fundamentals with a practical lens: mobile-first, breakpoints, fluid grids, adaptive images and testing strategies. It is not just about "looking good on mobile" — it is about designing coherent experiences across every device.

Mobile-first: designing from constraint

Mobile-first means starting the design on the smallest screen and scaling up. It is not just a CSS technique — it is a design philosophy that forces you to prioritise essential content and simplify interactions before adding complexity for larger screens.

Designing mobile-first avoids a common pitfall: creating a full desktop version and then trying to squeeze it onto mobile, which usually results in a poor experience with too much content and not enough space. Starting from mobile, every element added on desktop must earn its place.

  • Prioritise key content and actions on the small screen
  • Progressively scale layout, typography and navigation towards desktop
  • In CSS, write base styles for mobile and use min-width media queries

Breakpoints: where to shift the layout

Breakpoints are the viewport widths where the layout changes structure. The temptation is to define breakpoints per device (iPhone, iPad, desktop), but the reality is that hundreds of different screen sizes exist. Breakpoints should be set where the content needs them, not where a specific device demands them.

A sensible set of breakpoints for most projects: 640 px (large mobile / landscape), 768 px (tablet), 1024 px (tablet landscape / laptop), 1280 px (desktop), 1536 px (large desktop). Tailwind CSS uses these values by default with the sm, md, lg, xl and 2xl prefixes.

  • Set breakpoints based on content, not on specific devices
  • Start with 3–5 breakpoints; add more only when the content requires it
  • Use relative units (em or rem) in media queries to respect user zoom settings

Fluid grids and flexible layouts

A fluid grid uses percentages or relative units (fr, rem, vw) instead of fixed pixels. Combined with CSS Grid and Flexbox, it creates layouts that adapt naturally to the available width without relying solely on media queries.

CSS Grid is ideal for two-dimensional layouts (rows and columns simultaneously), while Flexbox works better for one-dimensional distributions (a row of cards, a horizontal menu). Combining both covers virtually any responsive layout need.

  • Use CSS Grid for page layouts and complex sections
  • Use Flexbox for linear components (navbars, card rows, form groups)
  • Combine fr units and minmax() for columns that adapt without media queries
  • Avoid fixed px widths for containers; use max-width with percentages

Responsive images: performance and quality

Images are typically the heaviest resource on a web page. Serving a 2000 px image to a 375 px mobile screen wastes bandwidth and slows down loading. Responsive images solve this by serving different versions based on screen size and pixel density.

The srcset attribute with sizes lets the browser pick the optimal image. Modern formats like WebP and AVIF cut file size by 25–50 % compared to JPEG with no visible quality loss. Frameworks like Astro and Next.js include image components that generate srcset, modern formats and lazy loading automatically.

  • Use srcset and sizes to serve images based on viewport and density
  • Adopt WebP or AVIF with JPEG fallback
  • Implement native lazy loading (loading="lazy") for below-the-fold images
  • Set aspect-ratio in CSS to prevent layout shifts during loading

Responsive typography: fluid scaling

Typography also needs to adapt to the viewport. A heading that works at 48 px on desktop may be far too large on a 320 px mobile. Fluid scaling with clamp() lets you define a minimum size, a preferred viewport-relative size and a maximum in a single declaration.

For example, font-size: clamp(1.25rem, 2.5vw, 2rem) smoothly scales text between 20 px and 32 px based on the viewport width, without abrupt jumps at breakpoints. This reduces the need for typography-specific media queries and produces a more natural scale.

Responsive testing: beyond browser resizing

Dragging the edge of the browser window to watch the layout respond is a first step, but it does not replace real testing. Touch behaviour, performance on slow networks and platform-specific browsers (Safari on iOS, Chrome on Android) introduce variables that a desktop simply cannot replicate.

Chrome and Firefox DevTools include device simulators that replicate dimensions, pixel density and network throttling. For real-device testing, services like BrowserStack or LambdaTest let you test on remote physical devices. At a minimum, test on a recent iPhone, a mid-range Android phone and an iPad.

  • Use device mode in DevTools for quick simulations
  • Test on real devices (at least iOS + Android) to catch platform-specific behaviour
  • Verify performance with network throttling (slow 3G) to optimise load times
  • Check accessibility: 200 % browser zoom should not break the layout

Key Takeaways

  • Mobile-first is not just CSS — it is prioritising content from the smallest screen
  • Breakpoints should be based on content, not specific devices
  • CSS Grid + Flexbox cover most responsive layout needs
  • Responsive images with srcset and modern formats are key to performance
  • clamp() enables fluid typographic scaling without media queries
  • Testing on real devices is essential — browser resizing is not enough

Does your site need a solid responsive experience?

We design and develop responsive interfaces that work on every device, with optimised performance and built-in accessibility.