The order most people work in is backwards
The standard sequence is: build it comfortably on a large monitor, admire it, then near the end check what it looks like on a phone and patch the damage. For a majority of the people who will ever see your work, the patched version is the only version that exists.
Reverse it. Design at phone width first and expand outwards. The reason is not moral, it is diagnostic. Scaling a desktop layout down hides hierarchy faults, because every element shrinks together and their relative ranks are preserved even though none of them is legible any more. Scaling a phone layout up exposes faults, because you have to decide what deserves the extra room. The direction that forces decisions is the useful one.
Design at the width most people actually have
Common Android phone widths land around 360 to 412 CSS pixels. An iPhone is typically 390 or 393. If you draw at 360 or 390 and it works, it works nearly everywhere; the reverse is not true.
You do not need an expensive tool to do this. Figma's free tier and Penpot both ship phone frame presets. So does Canva's free tier. In a browser, Chrome and Firefox both have a device toolbar built in — press F12, then the device icon — where you can set an exact width and throttle the connection to something slow, which is the second half of the test.
The numbers that are load-bearing
- 16 pixels minimum for body text on the web. Not a style preference: iOS Safari zooms the whole page when a text field with a font size below 16px receives focus. A type decision therefore becomes a layout bug, and it is one of the most common ones on the mobile web.
- Tap targets. Apple's guidelines say 44 by 44 points; Google's Material guidance says 48 by 48; the WCAG 2.2 minimum is 24 by 24 CSS pixels. Under those, people miss, and on a touch screen a miss is not a small annoyance — it often triggers the wrong thing.
- Thumb reach. Held one-handed, the easy zone is the lower half and the side of your dominant thumb. The hardest point on a large phone is the opposite top corner. Put the main action low. Do not put a destructive action next to it.
- Safe areas. Notches, rounded corners, the home indicator bar, and the browser chrome that appears and disappears as you scroll. Content that reaches the very edge of your artboard will be clipped or covered on some real device.
What survives the shrink, concretely
- A logo with a tagline locked inside it does not. At a 48-pixel avatar the tagline is a grey smudge, and at a 16-pixel favicon so is the wordmark. Draw a second, simplified mark for small sizes. Every large brand has one.
- Three-column layouts do not. They stack, and stacking changes reading order. Decide the stacked order deliberately rather than accepting whatever the source order happens to be.
- Wide tables do not. A table with six columns becomes a horizontal scroll nobody scrolls. Turn each row into a small card with labelled values.
- Thin type weights do not. A hairline weight that looks elegant at 60 pixels disintegrates at 14 on a screen being viewed at an angle.
- Pale grey text does not, for the reason in the next section.
Daylight is a contrast problem, and it is the real test
Your design was approved in a room, on a bright screen, indoors. Your reader is outside, at 30 per cent brightness, with a smeared screen protector. In those conditions a combination that just passed 4.5:1 disappears.
The test costs nothing: take a screenshot, walk outside with your phone, and look at it. That is the whole procedure, and it will change your greys permanently. It is also why a contrast floor is a floor rather than a target.
Weight is money for your reader
A 3MB hero image is not just slow. On a metered connection it is a cost the reader pays, and on a slow one it is a blank rectangle they will not wait for.
- Export at 2x, not 3x. The visible difference on a phone is small and the file is roughly half.
- Use WebP, or a JPEG at quality 75 to 80. Between quality 80 and 100 the difference is invisible at phone size and the file is often three times bigger.
- Resize before you export. A 4000-pixel-wide photo displayed 390 pixels wide is 99 per cent waste.
Free tools for all of this: Squoosh, a browser page that compresses images on your own machine; GIMP's export dialogue, which shows the resulting file size as you move the quality slider; Photopea's Save for Web. On a phone, most gallery apps can resize on export.
Test on the cheapest device you can borrow
Not your phone. Your phone is fast, new and bright, and it is not representative of the person you are designing for. Borrow the oldest, cheapest handset in the room and open your work on it. This single habit catches more real problems than any amount of theory, and it is free.
Today
Screenshot something you have made, open it on a phone, and take it outside. Then hold the phone in one hand and try to reach every interactive element with your thumb without shifting your grip. Write down what you could not read and what you could not reach.
Before you move on