Free tools Windows power users keep installed
One-click scans. No signup required.
Make a website mobile-friendly by using a responsive layout that adapts to the available screen width, keeping content readable and operable without horizontal scrolling, and checking it at narrow and wide sizes. You usually do not need a separate design for every phone: the same page can rearrange itself as the viewport changes.
1. Use a responsive layout
Responsive design lets the same URL and HTML adapt to different viewport widths. For most sites, that is simpler to build and maintain than serving separate mobile pages or generating different HTML for mobile visitors. Google Search Central recommends responsive web design as the easiest of its supported mobile configurations to implement and maintain: Mobile-first Indexing Best Practices.
Other configurations are possible, but they add device-specific work:
| Configuration | URL and content | What to consider |
|---|---|---|
| Responsive design | Same URL and HTML; layout changes with screen size. | Google recommends it as easiest to implement and maintain. |
| Dynamic serving | Same URL; server provides different HTML based on the user agent. | Requires device-dependent serving behavior. |
| Separate URLs | Different URLs for device-specific versions. | Requires maintaining distinct mobile and desktop URLs. |
For a new or existing site without a specific need for device-dependent content, start with responsive design.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
2. Set the viewport
Add this tag inside the page’s <head> so the browser uses the device’s width as the layout viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width matches the layout viewport to the device width in device-independent pixels; initial-scale=1 sets an initial 1:1 relationship between CSS pixels and device-independent pixels. Without a suitable viewport, a page can appear as a shrunken desktop layout on a phone. Avoid viewport settings such as user-scalable=no, minimum-scale, or maximum-scale when they prevent users from zooming. See web.dev’s responsive web design basics and accessible responsive design guidance.
3. Make the layout flexible and choose breakpoints by content
Build for a narrow viewport first, then widen it. Use flexible layout rules so text blocks, navigation, columns, and spacing can use the available room. Add a breakpoint only when the content no longer fits comfortably—for example, when a row of navigation links wraps awkwardly or two columns become too narrow to read.
Rank #2
Do not tie breakpoints to a particular phone brand, model, operating system, or named device category. Screen sizes vary, and a content-led breakpoint is more likely to work on devices you did not design around. The web.dev responsive design guide recommends widening the viewport until the layout needs to change rather than selecting breakpoints by device class.
Recommended Free Tools
4. Keep images within their containers
An image wider than its container can force the whole page to scroll sideways. Constrain responsive images so they shrink to fit:
img { max-width: 100%; height: auto; }
Include the image’s intrinsic width and height attributes in the HTML as well. The browser can use them to reserve space while the image loads, reducing layout shifts. These practices are described in web.dev’s responsive web design basics.
5. Make text, controls, and reading order usable
Text should remain legible as the layout changes, and people should be able to enlarge it. Relative font units such as rem or em make text sizing more adaptable than relying only on fixed pixel sizes. Do not disable browser zoom.
Make buttons and other frequently tapped controls easy to activate. These published dimensions are guidance from different sources, not one universal requirement:
- web.dev calls 48 pixels a good size for a tappable element in its accessible responsive design guidance.
- W3C’s explanation of WCAG 2.2 Success Criterion 2.5.5 gives a 44-by-44 CSS-pixel target as an example of the enhanced target-size criterion and describes exceptions. It notes that inline text links do not need to meet that example’s minimum: Understanding Target Size (Enhanced).
When rearranging content visually, preserve a sensible source and keyboard order. Someone tabbing through the page should encounter items in an order that makes sense, even if columns stack or move at a narrow width. web.dev discusses this in its accessible responsive design guidance.
Rank #4
6. Check reflow and preserve mobile content
At narrow widths, readers should be able to read and operate the page without depending on a wide visual layout. Check that text, navigation, forms, and other essential content reflow rather than requiring horizontal scrolling for ordinary use. W3C/WAI explains how reflow helps people using small viewports and people who need content rearranged to fit their viewing area in its guidance on WCAG 1.4.10: Reflow.
Do not remove important content from the mobile version merely to make it look simpler. Google says it uses the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking. Keep primary text, images, metadata, and crawlable resources available on mobile; keep mobile and desktop robots meta tags consistent; and do not make primary content load only after an interaction the crawler cannot trigger. Google’s details are in Mobile-first Indexing Best Practices.
7. Review the page across widths and input methods
Inspect representative narrow and wide viewports, not just one phone-sized preview. Look for concrete failures:
- Horizontal scrolling caused by an image, table, or fixed-width element.
- Text or controls clipped, overlapping, or too cramped to use.
- Navigation or page sections that become difficult to follow when stacked.
- Keyboard focus that jumps in an illogical order after a visual rearrangement.
- Important mobile content, images, or resources missing from the version available to search crawlers.
Also try zooming and keyboard navigation, and activate controls as a touch user would. Fix the specific overflow, ordering, sizing, or content issue you find, then review the affected widths again.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
