Responsive design has evolved far beyond "does it work on phones?" Today's web must accommodate an enormous range of devices, screen sizes, and contexts. Modern techniques make truly fluid design possible, not just breakpoint-jumping layouts.

The Device Landscape

We're no longer designing for desktop, tablet, and phone. The reality includes:

Phones from 320px to 430px wide
Tablets in portrait and landscape
Laptops with varying pixel densities
Desktop monitors from modest to ultrawide
TVs used for browsing
Foldable devices with dynamic screen sizes
Tablets used with keyboards as laptops

Fixed breakpoints can't elegantly handle this diversity. Modern responsive design creates layouts that work at any size, not just predetermined widths.

Fluid Typography

Traditional responsive typography used fixed sizes at different breakpoints, 16px mobile, 18px tablet, 20px desktop. This created jarring jumps.

Modern approaches use fluid typography that scales smoothly with viewport size:

font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);

This sets a minimum size (1rem), a maximum size (1.5rem), and a fluid middle that scales with viewport width. Text size adjusts smoothly across all screen sizes.

The same approach applies to spacing, padding, and margins, creating layouts that feel intentional at every size, not just at specific breakpoints.

Container Queries

Media queries respond to viewport size. But components often appear in different contexts, a card might be full-width on mobile but in a three-column grid on desktop. Media queries can't know the card's actual available space.

Container queries solve this by responding to the parent container's size rather than the viewport:

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Now the card changes layout based on its container, regardless of screen size. This enables truly modular components that adapt to wherever they're placed.

Container queries are now supported in all major browsers, making them practical for production use.

Modern Layout Systems

CSS Grid

Grid creates two-dimensional layouts with unprecedented control. Combined with modern features, it enables truly responsive grids:

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

This creates columns that are at least 300px wide, filling available space and wrapping automatically. No breakpoints needed, the grid responds to available space fluidly.

Flexbox

Flexbox handles one-dimensional layouts and component-level arrangement. Combined with flex-wrap, it creates responsive patterns without explicit breakpoints.

Subgrid

CSS Subgrid allows nested elements to participate in parent grids, solving long-standing alignment problems. It's now widely supported and enables more sophisticated responsive layouts.

Intrinsic Design

The term "intrinsic design" captures modern thinking: design that responds to content and context, not just viewport size. Principles include:

Let content inform sizing where possible
Use constraints (min/max) rather than fixed values
Create flexible spaces that compress and expand gracefully
Components should work in isolation, regardless of placement

This approach reduces the number of breakpoints needed and creates more robust designs.

Touch vs. Pointer

Responsive design isn't just about screen size, it's about input methods too. CSS can detect pointer precision and hover capability:

@media (hover: hover) {
  /* Styles for devices with hover capability */
}

@media (pointer: coarse) {
  /* Styles for touch/imprecise input */
}

This allows larger touch targets on touch devices regardless of screen size, a tablet in laptop mode might have a precise pointer, while a large touchscreen TV needs bigger targets.

Performance Implications

Responsive design affects performance:

Image Optimisation

Serving a 2400px image to a 375px phone screen wastes bandwidth. Modern responsive images serve appropriate sizes:

<img 
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="image-800.jpg"
  alt="Description"
>

The browser chooses the optimal image based on viewport and screen density.

Critical CSS

Loading all CSS for all breakpoints delays rendering. Consider loading only critical CSS initially, with non-critical styles loaded asynchronously.

Conditional Loading

Some features might only be needed at certain sizes. JavaScript can load components conditionally based on viewport, reducing initial bundle size.

Testing Across Devices

Browser developer tools simulate viewports, but they can't replicate everything:

Actual touch behaviour
Real network conditions
Device-specific rendering quirks
Actual screen readability

Test on real devices when possible, especially for critical user journeys. Services like BrowserStack provide access to real devices for testing.

Accessibility in Responsive Design

Responsive design must remain accessible:

Text remains readable when zoomed
Touch targets are sufficiently large
Content order makes sense on all devices
Focus states work with keyboard navigation
Layouts don't break at 200% zoom

Testing at various zoom levels catches issues that breakpoint testing misses.

The Mobile-First Principle

Starting with mobile constraints remains valuable:

Forces prioritisation of essential content
Ensures core experience works everywhere
Makes enhancement easier than reduction
Aligns with progressive enhancement philosophy

But "mobile-first" doesn't mean "mobile-only." The full spectrum of devices deserves thoughtful design.

Beyond Screens

Responsive design increasingly considers contexts beyond visual screens:

Print styles for pages people might print
Reduced motion for users sensitive to animation
Dark mode preferences
High contrast modes

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

@media (prefers-colour-scheme: dark) {
  /* Dark mode styles */
}

Respecting user preferences creates better experiences for everyone.

Our Approach

We build websites using modern responsive techniques, fluid typography, intrinsic layouts, container queries where appropriate. The result is sites that look intentional at every size, not just at predetermined breakpoints.

If your site struggles on certain devices or you want to modernise an aging responsive implementation, contact us to discuss how updated approaches could improve user experience.

Blog

Master Layouts with Our Free CSS Grid & Flexbox Builder

Responsive Design in 2025: Beyond Mobile-First