How to make a website mobile friendly

01Why it matters

Most visits to small business and personal sites come from phones. Google's documentation on mobile-first indexing explains that Google uses the mobile version of a site's content for indexing and ranking, so content or links missing on mobile can be missing from search. A site that is awkward on a phone loses visitors and rankings at once.

02The checklist

web.dev's responsive design basics covers each technique in detail with examples.

1. 1Add the viewport tag<meta name="viewport" content="width=device-width, initial-scale=1"> in the page head, as MDN documents. Without it, phones show a shrunken desktop page.
2. 2Use a responsive layoutFlexible grids that stack into one column on narrow screens, using CSS media queries or flexbox and grid.
3. 3Make text readableBody text around 16px or larger, line length under about 75 characters, good contrast.
4. 4Make tap targets big enoughButtons and links at least about 44 to 48 pixels tall, with space between them.
5. 5Size images for phonesResponsive images and modern formats so phones do not download desktop-sized files.
6. 6Avoid horizontal scrollingNothing wider than the screen; let wide tables scroll inside their own box.
7. 7Keep pop-ups smallFull-screen pop-ups on mobile frustrate visitors and can hurt search performance.

03How to test

The most common faults are text that is too small, elements wider than the screen and buttons too close together. Does page speed affect SEO? covers the speed side.

• Open the site on your own phone and a friend's, ideally one Android and one iPhone.
• Use your browser's device toolbar (F12 in Chrome, then the phone icon) to try common widths such as 375px.
• Run PageSpeed Insights for speed and mobile issues.
• Check Search Console for pages with mobile problems once the site is live.
• Try every form and button with your thumb, not a mouse.

04On website builders

Most modern builders produce responsive sites automatically, but you still need to check. Wix, Squarespace and others have a mobile preview; use it after every major change. Watch for text added as images, very long headlines that wrap awkwardly, and columns that stack in a confusing order. What responsive design means and mobile-first design explain the principles.

05Beyond the basics

A Hacker News debate from 2012 asked whether responsive design was worth it; front-end developers answered that it is a quick, cheap way to make a site work on phones and to reduce bounce rates. More than a decade later, that is the default.

• Put the most important action (call, book, buy) within easy thumb reach.
• Use click-to-call phone links and map links that open the phone's map app.
• Make forms short and use the right keyboard (email, phone, number).
• Keep navigation simple: a few clear items in a menu.

06Quick fixes for an existing site

These four changes take an hour on most hand-built sites and remove the most common complaints.

• Add the viewport tag if it is missing; this alone fixes many "tiny page" problems.
• Set images to max-width: 100% so they never overflow.
• Increase body text to 16px and line height to about 1.5.
• Make buttons full-width on small screens.