Why the Small Screen Keeps Getting Left Until Friday

Most freelance designers I know start a layout the same way: a wide artboard, a generous grid, a hero image that breathes. It feels good. It is also the version that fewer than half of your client's visitors will ever see. In the UK, the majority of web traffic now comes from phones, and plenty of that happens on the move — on a train into Leeds, in a queue, on a sofa with one bar of signal. If the mobile layout is the thing you sketch last and polish least, you are designing for the minority and charging for the whole job.

This is not about shrinking the desktop design. It is about treating the small screen as its own piece of work with its own rules.

Design for Thumbs, Not Cursors

A mouse pointer is precise to the pixel. A thumb is not. When you place a link, a button or a form field, assume it will be tapped by someone holding a phone in one hand while carrying a coffee in the other. That changes your numbers.

• Give every tap target at least 44 by 44 pixels. The widely cited minimum sits here for good reason; 48 pixels is kinder still. If a button looks tidy at 30 pixels tall in your mock-up, it will feel broken in the hand.
• Leave breathing room between targets. Two links stacked tightly will produce mis-taps — usually on the destructive one. Eight to twelve pixels of clear space between interactive elements costs you nothing and saves a lot of frustration.
• Keep primary actions in the lower third. That is where thumbs naturally rest, especially on larger handsets. Navigation at the top is fine, but the thing you actually want people to do should be within easy reach.
• Never rely on hover. Tooltips, drop-down menus and any state that only appears on hover simply do not exist on a touchscreen. If information matters, it needs a tappable or always-visible home.

Speed Is a Design Decision

Loading speed gets filed under "developer stuff", which is a mistake. Most of what slows a page down was chosen by a designer: the full-bleed hero photograph, the three web fonts, the carousel, the animated logo.

A useful rule of thumb is to decide what the visitor needs in the first second and let everything else arrive later. That hero image at 3000 pixels wide is wasted on a screen that is 390 pixels wide. Serve a smaller version, compress it sensibly, and specify its dimensions in your handover notes so the layout does not jump as it loads.

Fonts deserve the same scrutiny. Each weight you add is another file to fetch. Two weights of one typeface, carefully used, will almost always look more confident than five weights used vaguely. If a client insists on a display face for headings, consider pairing it with a system font for body text rather than loading a second family for every paragraph.

On a slow 3G connection — still a reality across parts of the UK — a page that loads in two seconds on your office wi-fi can take eight on a phone. That gap is the difference between a booking and a bounce.

Type and Spacing on a Narrow Column

Text that reads beautifully at 1200 pixels can turn into a wall on a phone. Aim for a comfortable body size — 16 pixels is a floor, not a target — and a line length of roughly 35 to 45 characters on small screens. Increase the line height slightly to compensate for the shorter measure.

Watch your line breaks, too. Headings set in all caps or with very tight tracking will often collapse into something unreadable at 390 pixels. Test the actual words your client uses, not placeholder text, because real headlines are frequently longer and clumsier.

Testing That Actually Catches Problems

Resizing a browser window is a starting point, not a test. It will not show you how a sticky header behaves when the address bar appears, or how a form feels when the keyboard covers half the screen.

• Use a real device. Borrow an older, cheaper handset if you can — a mid-range phone from a few years ago is far more revealing than a brand-new flagship.
• Test with one thumb. Genuinely hold the phone in one hand and try to complete the main task. You will spot friction you never noticed at a desk.
• Fill in the forms. Check that the correct keyboard appears for email and number fields, and that labels stay visible while typing.
• Check the awkward states. Long error messages, empty search results, a really long client name in the navigation. That is where layouts break.

Keeping the Desktop Experience Intact

Prioritising mobile does not mean flattening everything into one narrow column and calling it done. Desktop gives you room to tell a richer story — side-by-side comparisons, generous imagery, multi-column layouts — and that is worth protecting.

The trick is to design the small screen first, then ask what the extra width genuinely buys. Often the answer is better whitespace and a more confident hierarchy rather than more stuff. What you should avoid is hiding a great desktop section entirely on mobile, or dumping content into an accordion so nobody finds it.

Treat the two as sibling layouts built from the same content, and you will end up with a site that feels considered everywhere, rather than impressive on a 27-inch monitor and merely survivable in a pocket.