How to Create a Mobile-Friendly Website

For many businesses, most visitors arrive on a phone, often a mid-range Android device on mobile data. A website that looks good on a laptop but is hard to use on a phone loses those visitors quickly. Google also primarily uses the mobile version of a page for indexing. This guide covers what a mobile-friendly website needs and how to test it.

1. Use a responsive layout

A responsive website adjusts its layout to the screen size instead of showing a shrunken desktop page. Every page should include the viewport meta tag (width=device-width, initial-scale=1), and multi-column layouts should stack into a single column on small screens. Modern Shopify themes and most current website builders are responsive by default. The risk usually comes from custom sections, embedded content, or wide tables added later.

2. Make text readable without zooming

Use a body text size of around 16 pixels, generous line spacing, and strong contrast between text and background. Light grey text on white may look elegant on a large monitor but becomes hard to read on a phone outdoors in sunlight. Keep paragraphs short; a paragraph that looks reasonable on desktop can fill an entire phone screen.

3. Make buttons and links easy to tap

Fingers are less precise than a mouse. Give buttons enough size and spacing so users do not tap the wrong thing. Common guidance is a touch target of roughly 44 to 48 pixels. Keep links in menus and footers well separated, and make primary buttons full-width on small screens where it helps.

4. Prevent horizontal scrolling

Wide images, tables or embedded videos often push content beyond the screen edge, so the whole page wobbles sideways when users scroll. Set images to a maximum width of 100%, make wide tables scroll inside their own container, and check every page for sideways movement.

5. Keep pages light

Mobile connections are slower and less stable than office broadband. Compress images, avoid autoplay videos, limit custom fonts, and remove scripts you do not need. If you run a Shopify store, our guide How to Improve Shopify Store Speed goes into detail.

6. Design forms for thumbs

• Ask only for information you actually need
• Use the right input types: email and tel fields show the correct keyboard on phones
• Put labels above fields, not inside them, so users can still see what the field is for while typing
• Stack fields in one column instead of placing two side by side
• Show clear error messages next to the field that needs fixing

7. Avoid intrusive pop-ups

Full-screen pop-ups that cover content as soon as a page loads are frustrating on a small screen, and Google's guidance discourages intrusive interstitials that make content less accessible. If you use a pop-up, delay it, keep it small, and make the close button easy to tap.

8. Keep navigation simple

A short menu behind a clearly labelled menu button works well. Put the most important action, such as Contact or WhatsApp, where it can be reached easily, but do not let sticky headers or floating buttons cover the content people are trying to read.

How to test

1. Test on real phonesAt least one Android phone and one iPhone, including an older or cheaper model.
2. Use browser developer toolsChrome's device mode previews different screen sizes quickly.
3. Run PageSpeed InsightsCheck the mobile results and the specific issues listed.
4. Complete real tasksFind a service, fill the contact form, or buy a product using only your thumb.

Google retired its standalone Mobile-Friendly Test tool, so use Lighthouse (in Chrome) or PageSpeed Insights instead.

Example

A service business's contact form had two fields side by side and a small submit button. On phones, the fields were too narrow to read and users often missed the button. Stacking the fields vertically, switching the phone field to type=tel and making the button full-width solved all three problems with a small CSS change.

Frequently asked questions

Is a separate mobile site better than a responsive one?

For almost all businesses, no. One responsive site is easier to maintain and avoids duplicate content.

Does Google rank websites based on the mobile version?

Google primarily uses the mobile version of a page for indexing, so content and links should be the same on mobile and desktop.

Which screen sizes should I test?

Test a small phone (around 360–390 pixels wide), a larger phone, a tablet and a desktop. If it works at the smallest width, it usually works everywhere.