Phone layouts

One line every page needs

Every web page needs this line near the top of its code:

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

Without it, a phone shows the page as if it were a computer screen, shrunk down to tiny letters. Please don’t add settings that stop people from zooming in. Many people with weaker eyes zoom in with two fingers to read, and taking that away from them is unkind.

It should fit a small phone

The accessibility rules, WCAG 2.2, say a page should work on a screen 320 pixels wide without making you scroll sideways. That is the width of a small phone. It is also what a computer page turns into when someone zooms in a lot to read it. Wide tables, maps and diagrams may scroll sideways inside their own box, but the page itself should not.

Pages usually break at that width for simple reasons. Something has a fixed width, like a picture set to 600 pixels. A long web address doesn’t wrap onto the next line. Or a row of buttons refuses to stack. Developers can fix most of these with flexible widths and by letting long words wrap.

Typing boxes that don’t jump

On an iPhone, if the text inside a typing box is smaller than 16 pixels, the page zooms in when you tap the box. Everything jumps, and afterwards people have to zoom back out by hand. Setting the text in typing boxes to at least 16 pixels stops this. It also makes what people type easier to read.

Think about thumbs

Many people hold their phone in one hand and tap with their thumb. The middle and bottom of the screen are easy to reach. The top corners are a stretch.

So put the things people use most near the bottom, like a bar with the main sections, or an “Add to cart” button that stays at the bottom of a product page. Keep risky actions, like deleting an account, away from where the thumb rests, so nobody hits them by accident. And whenever something works with a swipe, also give people a button for it.

Rounded corners and the camera notch

Newer phones have rounded corners, a cut-out for the camera and a thin bar at the bottom for going home. If a page fills the whole screen, developers should add a little space at the edges, so a bar at the bottom of the page doesn’t end up underneath the phone’s own bar.

Pictures and speed

Phones are often on slower connections. Send pictures at the size they will be shown, not a huge photo shrunk down. Modern picture formats like WebP and AVIF are much lighter. Pictures further down the page can load only when the visitor scrolls to them. And if every picture has its width and height set, the text doesn’t jump around while the pictures arrive.

Test on a real phone

The phone preview in a computer browser is good for checking the layout. It won’t show how slow the page feels on an ordinary, inexpensive phone, how the keyboard covers half of a form, or how hard a small button is to hit with a thumb. Keep one cheap phone in a drawer and try every new page on it at least once.