Responsive Design for Mobile-Friendly Websites

Web developers make a site mobile-friendly with responsive design: one set of pages whose layout adapts to the screen, built from a viewport meta tag, fluid layouts, flexible images and CSS media queries. The reliable way to do it is to build for the smallest screen first and add breakpoints only where the content starts to look wrong, not at the widths of particular devices. Here is how each part works and how to test the result.

What are the building blocks of responsive design?

The viewport meta tag, which tells mobile browsers to use the real width of the screen.
Fluid layouts built with flexbox and CSS grid, sized in relative units rather than fixed pixels.
Flexible images and media that shrink to fit their container and load an appropriate file size.
Media queries that change the layout at chosen widths, or by device capability such as hover support.

Google recommends responsive design for mobile sites because it is the easiest pattern to implement and maintain: the same HTML and the same URL serve every device. If you are deciding whether this is worth the effort for your business, our post on why a mobile-first website matters makes that case. This one is about the method.

How do you set the viewport?

Without a viewport tag, phones render the page as if on a desktop-width screen and shrink it, so text is tiny and users have to zoom. Put this in the <head> of every page:

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

width=device-width matches the page to the screen width, and initial-scale=1 sets a one-to-one starting zoom. web.dev advises against adding maximum-scale or user-scalable, because they can stop people zooming in, which causes accessibility problems.

How do fluid layouts work?

A fluid layout lets columns stretch and wrap instead of holding a fixed width. In practice:

Use flexbox for rows of items that should wrap onto new lines, such as cards, navigation links or form fields.
Use CSS grid for page-level structure. A rule like grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) creates as many columns as fit, without a single media query.
Size containers with percentages, rem and max-width, not fixed pixel widths. A fixed-width element wider than the phone is the most common cause of sideways scrolling.
Limit line length on wide screens. web.dev notes that classic readability theory puts the ideal at 70 to 80 characters per line.

How do you make images responsive?

Stop them overflowing. web.dev recommends giving all images max-width: 100% so they shrink to fit their container.
Serve the right file size. Use srcset and sizes so a phone downloads a smaller image than a large monitor. A large photo scaled down in CSS still costs the phone the full download.
Set width and height attributes. They let the browser reserve space before the image loads, so the page does not jump.
Lazy-load below the fold only. Add loading="lazy" to images further down the page. web.dev warns against lazy-loading images likely to be visible when the page loads, especially the main (LCP) image.

How should you choose breakpoints?

Many older guides list fixed breakpoints at typical phone, tablet and desktop widths. web.dev advises against defining breakpoints by device classes, products or brands, because devices change and that code becomes hard to maintain. Instead:

Design the content for a narrow screen first.
Widen the browser slowly until the layout starts to look wrong: lines too long, cards too stretched, white space in the wrong place.
Add a breakpoint there with a min-width media query, and change only what needs changing.
Add minor breakpoints for small adjustments, such as padding or font size, where they help.

Media queries can also test capabilities rather than width. @media (hover: hover), for example, applies hover effects only on devices that can hover, so touch users are not left with menus that need a hover to open.

What about touch, text and hidden content?

Tap targets. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, with some exceptions. Primary buttons should be comfortably bigger than that, with space between neighbouring links.
Text size. Body text should be readable without zooming. Set it in rem so it respects the user's browser settings.
Do not hide content to make it fit. web.dev warns that screen size does not predict what a user wants to see. Google also indexes the mobile version of your pages, so content removed from mobile is effectively removed from search.

How do you test a responsive website?

Use the device mode in your browser's developer tools to drag through every width, not only a few preset devices.
Test on at least one real mid-range Android phone and one iPhone. Emulators do not show real touch behaviour or real network speed.
Check reflow. WCAG requires content to work without scrolling in two directions at a width equivalent to 320 CSS pixels, which is the same as 1280-pixel-wide content zoomed to 400%.
Fill in every form and open every menu on a phone.
Check Core Web Vitals for mobile in Google Search Console once the site has real traffic.

A free site audit catches many technical issues, such as missing titles and slow pages, but responsive layout problems still need a person and a phone.

Can an existing site be made responsive?

Often, yes. If the site is built on a modern CMS theme, the fix may be a set of CSS changes, image work and a cleanup of fixed-width elements. If the layout is built on tables or fixed-width containers throughout, a rebuild is usually cheaper than patching every page. Either way, keep the same URLs, or redirect each old one to its new equivalent, so search history is not lost. Our web design and development team audits an existing site before recommending one or the other, and maps every old URL to its new page at launch.

Questions people ask about responsive design

What breakpoints should I use?

Use the ones your content needs. Start with the narrow layout, widen the window, and add a breakpoint where the design starts to break.

Is responsive design the same as mobile-first?

Not quite. Responsive design is the technique that lets a layout adapt to any screen. Mobile-first is the order of work: write the base CSS for small screens, then add min-width media queries for larger ones. Used together, they produce lighter, simpler stylesheets.

Does responsive design help SEO?

Google recommends responsive design for mobile sites and indexes the mobile version of your content. Responsive design keeps the same content and URL on every device, which avoids the duplicate-site problems of a separate mobile site. It does not replace good content, but it removes a common technical risk.

Do I need a framework like Bootstrap?

No. Modern CSS with flexbox, grid and media queries handles responsive layouts on its own. A framework can speed up a team that already knows it, but it adds code that every visitor downloads.