Mobile first, meant literally

Most traffic to a small site is on a phone, and most small sites are designed on a laptop by somebody who checks the phone version at the end. The order matters because constraints discovered late are expensive.

What actually differs

• One column, always. Anything side by side becomes stacked, which changes the order things are read in, and the order is usually wrong by default.
• A thumb, not a cursor. Targets need to be large and spaced, and the bottom of the screen is easier to reach than the top.
• A keyboard that covers half the screen the moment somebody taps a field.
• Less patience and a worse connection, frequently at the same time.
• Interruptions. A phone session is shorter and more likely to be abandoned mid-task.

The faults that recur

1. 01The action pushed below several screens of marketing copy, so a reader who arrived ready to buy has to scroll past the persuasion.
2. 02Form fields with the wrong input type, so a phone shows letters for a number and the wrong keyboard for an email address.
3. 03Tap targets too small or too close, which produces mis-taps that read to the user as the site being broken.
4. 04Horizontal overflow from one wide element, usually a table or an unresized image, which makes the whole page slide sideways.
5. 05Text at 12 or 13 pixels, which is legible on a desk and not on a bus.
6. 06An interruption on arrival, over content the reader has not yet seen, dismissed by a close button the size of a full stop.

Design the narrow version first

Not because phones matter more in principle, but because narrow is the harder constraint and solving it first produces a wide version almost for free. Starting wide produces a narrow version made of compromises.

Practically: decide the order of the content as a single column. That order is the page. Everything else, the columns and the arrangement, is an enhancement for people with room for it.

The things worth doing once

• Set the viewport meta tag correctly. Its absence is the single most common cause of a site rendering as a shrunken desktop page.
• Make body text at least 16 pixels, which also stops some phones zooming when a field is focused.
• Give every image an explicit width and height or aspect ratio, so the page does not jump as they load.
• Check there is no horizontal scroll at 320 pixels wide, which is the narrowest you need to care about.
• Make the primary action reachable without scrolling on a phone-sized screen.

Interruptions on arrival

On a phone an overlay is not an overlay, it is the whole screen. A newsletter prompt, a discount wheel, a chat window and a consent notice arriving together produce a reader who has seen nothing of your site and has three things to dismiss.

Where you need a consent notice you need it, and it should be the only thing asking for attention on arrival. Everything else can wait for a scroll, or an exit, or not happen at all. Search engines have also been explicit that interstitials obscuring content on mobile are a problem, so this is not purely a courtesy question.

Three widths to check

• 320 pixels, the narrowest you need to care about. Nothing should scroll sideways and nothing should be cut off.
• Around 390 to 430, which is where most actual phones sit. This is the layout that matters most and the one least often looked at.
• Somewhere between 700 and 1000, the tablet and small-laptop range, which is where layouts built for phone and desktop meet and frequently produce a dead zone nobody designed.

That middle range is the one that catches people out. A design tested at phone width and at full screen can be broken at every width in between, and nobody notices because nobody tests there.

Telephone numbers and addresses

Small and worth the minute. A telephone number on a phone should be tappable, so somebody can call without copying digits between applications, and an address should open a map. Both are one attribute. The reverse is also true and less obvious: an eleven-digit number written with spaces and dashes inconsistently across the site is harder to use than one written the same way everywhere, including the international dialling code if you have customers outside your own country.