Mobile Website Design: Best Practices for Responsive Sites

Responsive web design lets a site adapt its layout and content to different viewport sizes. Start with flexible layout rules, let content determine where it needs to change, and check that the result remains usable at narrow widths, wide widths, and zoomed sizes. A page that fits on a phone is not necessarily easy to read or operate.

MDN describes responsive web design as “an approach” rather than a separate technology. The practical work is combining a suitable viewport, flexible layout, responsive media, and usability checks. MDN’s responsive design guide explains the underlying techniques.

1. Set the viewport and start with flexible layout

Include the viewport meta element so mobile browsers lay out the page at the device’s width. Without it, some mobile browsers may use a wider virtual viewport and scale the page down.

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

Use flexible containers instead of giving the whole page a fixed pixel width. CSS Grid and Flexbox can arrange content according to available space; percentage widths, fractional tracks, and sensible maximum widths let it grow and shrink.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.page {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

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

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

The grid above creates as many columns as fit and lets cards wrap when the available width gets smaller. The inner min(100%, 16rem) prevents the minimum card width from forcing overflow on a very narrow viewport. Treat the values as starting points for your content, not universal device breakpoints.

2. Add breakpoints where the content needs them

Do not choose breakpoints just because a particular phone or tablet has a named width. Resize the page and add a breakpoint when the content becomes cramped, a navigation pattern stops working, or a layout change improves reading and interaction.

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav {
  display: flex;
  gap: 1rem;
}

@media (max-width: 42rem) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    flex-wrap: wrap;
  }
}

This example changes the header when its contents need more room. The appropriate breakpoint depends on the width of the actual logo, navigation labels, and spacing. Test intermediate widths too: a layout can work at the smallest and largest sizes yet break between them.

Keep text lines comfortable to read on wide screens by constraining the text column, while allowing it to shrink on small screens. Avoid fixed minimum widths on content that must fit narrow screens. For wide tables or diagrams, decide whether they can reflow or need a clearly indicated horizontal scroll region.

3. Serve images and media for their display size

Keep media inside its container with a responsive constraint. For photographs and other images that keep the same composition, provide multiple resolutions with srcset and describe the rendered size with sizes. The browser can select an appropriate source for the viewport and display density. If the subject or crop should change on small screens, use <picture> for art direction.

<img
  src="/images/team-800.jpg"
  srcset="/images/team-400.jpg 400w,
          /images/team-800.jpg 800w,
          /images/team-1400.jpg 1400w"
  sizes="(max-width: 40rem) 100vw, (max-width: 72rem) 50vw, 36rem"
  width="1400"
  height="900"
  alt="The project team gathered around a table"
>

For a crop that changes with the layout:

<picture>
  <source
    media="(max-width: 40rem)"
    srcset="/images/product-detail-mobile.jpg"
  >
  <img
    src="/images/product-detail-wide.jpg"
    width="1400"
    height="800"
    alt="A close view of the product on a desk"
  >
</picture>

Supply well-composed, optimized assets; responsive markup cannot make an oversized image file small by itself. Declared dimensions also reserve space before an image loads, helping avoid unexpected layout movement. See MDN’s guide to responsive images.

4. Make the mobile layout usable and accessible

Responsive design includes interaction, not only layout. Check that text remains readable without requiring horizontal scrolling, controls are easy to identify and operate, navigation is understandable, and forms remain usable. Allow users to zoom. Do not use color as the only signal for errors or state changes, and associate each form control with a label.

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">

<button type="submit">Subscribe</button>

Test keyboard navigation and focus visibility as well as touch interaction. Make sure content order still makes sense when columns stack, and that important content or navigation is not missing on mobile. W3C’s accessibility tips, reflow guidance, and MDN mobile accessibility guide provide additional checks.

5. Measure loading, interaction, and visual stability

Google’s Core Web Vitals guidance gives these good-experience targets: Largest Contentful Paint (LCP) within 2.5 seconds, Interaction to Next Paint (INP) below 200 milliseconds, and Cumulative Layout Shift (CLS) below 0.1. These are performance targets, not a guarantee of search ranking or business results. Google Search Central explains the metrics and thresholds.

Loading: Check whether the main content appears promptly, especially on mobile connections. Avoid sending unnecessarily large desktop media to small displays.
Interaction: Look for slow responses to menus, forms, and other controls. Reduce work that blocks the main thread where measurements show it matters.
Stability: Reserve space for media and late-loading content so the page does not shift under the user.

Use field data to understand how real visitors experience the page, and local testing to reproduce and debug issues. Google Search Console’s Core Web Vitals report is one source of field information. A single local run is not a substitute for real-user measurements.

6. Preserve useful content for search and visitors

Google recommends responsive web design as an implementation pattern that is easier to implement and maintain. Keep useful content and image quality available on mobile, and provide equivalent descriptive image text when mobile and desktop use different image variants. These are content and accessibility practices, not ranking promises: Google says meeting technical requirements and best practices does not guarantee that a page will be crawled, indexed, or served.

See Google’s mobile-first indexing guidance and Search Essentials.

7. Test across widths and capture evidence

Test representative narrow, intermediate, and wide viewport sizes, plus zoom and real devices where available. Check the page’s actual content: long headings, navigation labels, validation messages, tables, and unusually large images often expose issues that placeholder content hides. Inspect both the full page and important sections after fonts and images load.

A screenshot is useful for visual review, but it does not replace keyboard, screen reader, interaction, or field-performance checks. If you use browser automation, test the same route at multiple viewport sizes and compare captures after the page reaches its intended ready state. Avoid treating a single viewport preset as proof that the site is responsive.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API takes one GET request and returns an image or PDF. For example, capture a page while checking its responsive layout:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o responsive-check.webp

See the ScreenshotNeo API documentation for request options. Cookie banners, newsletter popups, and chat widgets are removed before the shot, and each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and whether it was billed. An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card.

Common responsive design problems

Symptom	Likely cause	What to change
Horizontal scrolling on a phone	A fixed-width element, long unbroken text, or media wider than its container.	Find the overflowing element in responsive inspection. Use flexible sizing, allow text wrapping where appropriate, and constrain media to the container.
Text appears tiny on mobile	The viewport meta setting is absent or incorrect, or text sizes are fixed too small.	Set `width=device-width, initial-scale=1`; choose readable text sizing and verify zoom works.
Cards become too narrow or overflow	A grid track or child has a minimum width larger than the available space.	Use flexible tracks such as `minmax(min(100%, 16rem), 1fr)` and inspect intrinsic content widths.
Images download slowly on small screens	Only a large source is provided or responsive source hints do not match the rendered layout.	Supply appropriate `srcset` candidates and accurate `sizes`; optimize each asset.
Layout jumps when images load	Image dimensions or reserved aspect ratio are missing.	Set width and height attributes or reserve the media box’s aspect ratio.
Navigation wraps awkwardly	The breakpoint was chosen without checking real labels, or navigation has no wrap/stack behavior.	Base the change on available space and content; allow wrapping or switch to a suitable compact navigation pattern.
Mobile page omits important information	Content or functionality was hidden as a layout shortcut.	Keep useful content and functionality available, and verify the mobile page is equivalent where it should be.

FAQ

Should I design for phones first?

A narrow-first workflow can help keep the initial layout simple, but the essential rule is to let content and available space drive layout decisions. Start wherever fits your project, then verify the full range of sizes.

Are responsive design and mobile-friendly design the same?

Responsive design is an approach to adapting layout and media. Mobile usability also includes legibility, accessible controls, navigation, zoom, and interaction quality.

Do Core Web Vitals targets guarantee better rankings?

No. They describe good-experience thresholds for loading, interaction, and stability. Passing them does not guarantee search position.

Does a responsive site need separate mobile pages?

Responsive web design adapts a page to the viewport. Google recommends it as an implementation pattern; the right architecture still depends on the site’s requirements.