How to make a website mobile-friendly

Web designUpdated 29 October 20263 min read

Short answer: add the viewport meta tag, use a layout that reflows (CSS grid or flexbox with breakpoints), keep body text at least 16 px, make buttons at least 44–48 px tall, serve images that fit the screen and test on a real phone. Most problems come from fixed widths, tiny tap targets and images or tables wider than the screen.

1. The viewport tag

Without this line in <head>, phones show a shrunken desktop page:

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

2. A layout that reflows

Design for the narrow screen first, then add columns as space allows:

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

Avoid fixed widths such as width: 1200px. Use max-width and percentages instead. Keep 16 px of padding on each side on phones.

3. Readable text

Body text at least 16 px, with a line height around 1.5.
Lines of about 45–75 characters. Long lines are hard to read.
Enough contrast. Light grey on white fails outdoors in sunlight.

4. Tap targets

Fingers aren't mouse pointers. Make buttons and links at least about 44–48 px tall, with space between them. Put the main action where a thumb reaches it easily.

5. Images and media

Use max-width: 100%; height: auto; so images never spill over the edge.
Serve smaller files to phones with srcset. The SEO image pack makes the sizes and HTML. See responsive images with srcset.
Compress everything. Mobile data is slow and costs money. Use the image compressor.
Make videos responsive and don't autoplay with sound.

6. Tables, menus and forms

Wrap wide tables in a container that scrolls sideways, or turn rows into cards on small screens.
Use a clear menu button with a visible label or icon. Keep the menu short.
Use the right input types (type="email", type="tel") so phones show the right keyboard, and turn on autofill.

7. Avoid annoying pop-ups

Full-screen pop-ups that cover the content on phones frustrate visitors, and Google flags intrusive interstitials. Use small banners instead.

8. Test it

Chrome DevTools device mode, at 360, 390 and 768 px widths.
A real Android phone and a real iPhone. Check scrolling, the menu and forms.
Look for anything that makes the page scroll sideways. It means something is wider than the screen.
Run PageSpeed Insights on mobile. See why is my website slow.

Questions

Is responsive design the same as mobile-friendly?

Responsive design is the usual way to get there: one site whose layout adapts to the screen. A site can be responsive and still unfriendly if its text is tiny or its buttons are too small, so test both.

Does Google use the mobile version of my site?

Yes. Google mainly uses the mobile version for indexing and ranking, so content hidden on mobile may count for less.

What screen widths should I test?

At least 360 px (small Android), 390 px (common iPhone), 768 px (tablet) and 1280 px or wider (laptop).