Lesson 002 · Mobile First · 4 min
The pinch-and-zoom crime
Principle: If people have to zoom, they leave.
1 · The crime
What goes wrong
You open a restaurant's site on your phone. The menu is tiny, the buttons touch each other, and the page slides sideways. You pinch, zoom, scroll, give up and call someone else.
2 · The law
If people have to zoom, they leave.
- Most visitors arrive on a phone. Design for 360 to 430 px wide first, then grow to desktop.
- Body text should be at least 16 px; tap targets at least 44 by 44 px with space between them.
- Nothing should scroll sideways. If it does, something is wider than the screen.
3 · The tool
Check it yourself, for free
- Your own phone: the most honest test there is.
- Chrome DevTools device mode (F12, then the phone icon) to test many screen sizes.
- Google PageSpeed Insights: its mobile report flags small text and tap targets.
4 · The fix
Step by step
- Add <meta name="viewport" content="width=device-width, initial-scale=1"> to every page.
- Set body text to 16 px or more and line height around 1.5.
- Make buttons full-width on phones and keep at least 8 px between tap targets.
- Find anything wider than the screen (images, tables, embeds) and make it max-width: 100%.
5 · Homework
Open your homepage on your phone. Can you read everything and tap every button with your thumb without zooming? Write down the first thing you had to zoom to see.