Responsive Web Design Best Practices

Your customers might open your site on a phone on the train, a laptop at work and a tablet on the sofa, all on the same day. Responsive web design is the approach of building one site whose layout adapts to whatever screen it is displayed on, rather than maintaining separate mobile and desktop versions. Most modern sites claim to be responsive, but there is a big difference between a layout that technically shrinks and one that genuinely works well on a small screen. These are the practices that make the difference.

Start with the essentials

Every responsive page needs a viewport meta tag in its head. Without it, mobile browsers assume a desktop-width page and zoom out, making text tiny:

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

Do not add settings that prevent users from zooming. Pinch-to-zoom is an important accessibility feature for people with low vision.

Design mobile-first

Mobile-first means designing and writing styles for the smallest screen first, then adding enhancements as space allows. It has practical advantages:

It forces prioritisation. A phone screen only has room for what matters most, which usually improves the desktop design too.
Base styles stay simple, and wider screens add layout rather than undoing it.
Phones, often on slower connections, are not burdened with desktop-only assets.

In CSS this means base styles without media queries, and min-width queries for larger screens:

.products { display: grid; gap: 1rem; }
@media (min-width: 40em) {
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .products { grid-template-columns: repeat(4, 1fr); }
}

Responsive web design layout practices

Let content decide the breakpoints

A breakpoint is a screen width at which the layout changes. Rather than targeting specific device models, which change every year, widen your browser slowly and add a breakpoint wherever the content starts to look awkward, such as lines becoming too long or cards becoming too squashed.

Use flexible layout tools

CSS Grid and Flexbox create layouts that adapt naturally. A grid declared with repeat(auto-fill, minmax(16rem, 1fr)) fits as many columns as space allows with no breakpoints at all. Use relative units such as percentages, rem and fr rather than fixed pixel widths.

Consider container queries for components

Media queries respond to the width of the whole screen. Container queries, now supported in current major browsers, let a component respond to the width of the space it sits in. A product card can then look right whether it appears in a wide main column or a narrow sidebar.

Avoid horizontal scrolling

Nothing on the page should force sideways scrolling on a phone, except deliberately scrollable elements like carousels or wide tables. Long URLs, fixed-width embeds and oversized images are the usual offenders.

Images and media

Set max-width: 100% and height: auto on images so they never overflow their container.
Use srcset and sizes so the browser downloads an appropriately sized file for each screen, rather than sending desktop images to phones.
Use the <picture> element when a different crop works better on small screens, for example a tighter crop of a wide banner.
Give images and video explicit dimensions or an aspect ratio to stop the layout jumping as they load.

Typography that scales

Body text should be comfortably readable on a phone without zooming; a base of around 16 CSS pixels is a common starting point. Keep line lengths moderate on large screens, since very long lines are tiring to read. The CSS clamp() function lets headings grow smoothly between a minimum and maximum size:

h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3rem); }

Touch-friendly interaction

Make targets big enough. Buttons and links need enough size and spacing to be tapped accurately with a finger. Apple's and Google's design guidelines both recommend generous minimum touch target sizes, and accessibility guidelines set minimums too.
Do not rely on hover. Touchscreens have no hover state, so menus and tooltips that only appear on hover are inaccessible to phone users.
Keep key actions within reach. On large phones, the bottom of the screen is easier to reach with a thumb than the top corners.

Forms on small screens

Forms are where many "responsive" sites fall down, and they are often where the money is made. Use a single column. Use the correct input types (type="email", type="tel", inputmode="numeric") so phones show the right keyboard. Add autocomplete attributes so browsers can fill in names and addresses. Put labels above fields rather than beside them, and show errors next to the field they relate to.

Tables and data-heavy screens

Business applications are full of tables, and tables do not shrink gracefully. Options include:

Wrapping the table in a horizontally scrollable container, with the first column fixed.
Hiding less important columns on small screens, with a way to view full details.
Transforming each row into a stacked card on narrow screens.

Choose per table based on what users actually need on a phone. A field manager checking an order status needs very different information from an accountant reconciling a ledger at a desk. This is a recurring design question in the web application development work we do for data-heavy business tools.

Performance is part of responsiveness

A layout that adapts perfectly but takes ages to load on a mobile network is not truly responsive. Keep pages light, lazy-load images below the fold and test on mid-range phones, not just the latest flagship. If the site is served over HTTPS with modern protocols, delivery is faster too; you can confirm your certificate setup with the SSL checker.

Testing

Use browser developer tools' device mode for quick checks across widths.
Test on real devices, at least one recent iPhone and one mid-range Android phone, because emulation misses touch behaviour and real performance.
Rotate to landscape, zoom text to 200% and try the keyboard-only experience.
Walk through complete tasks, such as finding a product and checking out, not just viewing pages.

Key takeaways

Include the viewport meta tag and never block zoom.
Design mobile-first and let content, not device lists, set breakpoints.
Use flexible grids, responsive images, scalable type and touch-friendly controls.
Give forms and tables specific attention, and test real tasks on real devices.

Web Development articles