Mobile design: how to design a mobile app for real hands and real conditions

A phone is not a small monitor. It is a device held in one hand, used in short bursts, interrupted constantly, and pointed at by a thumb that cannot reach the top of its own screen.

Designing mobile as a narrowed desktop layout produces something that technically fits and practically fails. The constraints are not about width. They are about attention, posture and context, and they change which decisions are even available to you.

• The thumb comfortably covers the lower two thirds of the screen. Primary actions belong there; destructive ones do not.
• Top corners are the hardest reach on a large phone, which is exactly where desktop instinct puts the main navigation.
• Fingers are imprecise. Touch targets need about 44 to 48 points, with real spacing between them, not just a larger tap area behind a tiny icon.
• Screens get used in sunlight, in the dark, and at an angle. Low-contrast gray text that reads fine in the studio disappears outdoors.
• The keyboard eats half the screen. Any form must be designed with the keyboard open, not just closed.

Desktop sessions are minutes with a goal. Mobile sessions are seconds with an impulse, and they end without warning when a notification arrives, the bus comes, or someone starts talking. Design accordingly.

• Resume, never restart. State survives backgrounding, drafts save themselves, scroll position holds.
• The main task should be reachable in one tap from launch, not three levels down a menu.
• Long flows get broken into steps that each survive an interruption, with visible progress.
• Never make the user retype something the device already knows: autofill, camera, location, contacts.
• Confirmations cost a session. Prefer undo over are-you-sure wherever the action is reversible.

Choose one navigation model and commit. Products that mix three of these usually reflect three different quarters of decision-making rather than a structure anyone designed.

• Body text at 16 to 17 points minimum. Smaller is a readability decision disguised as an aesthetic one.
• Line length lands naturally on a phone, so the variable to manage is line height. Give it more than desktop, not less.
• Support dynamic type. Layouts that break when a user increases text size exclude a lot of people quietly.
• Hierarchy comes from weight and space, not from many sizes. Three or four sizes is usually enough for a whole app.
• Hover does not exist. Every state must be expressible through rest, press, loading, success and error.
• Motion should explain where things came from and went. On mobile it also covers latency, which is its most underrated job.

Your product will be used on a train, in a basement, on hotel wifi. Connectivity is a design material, and treating it as an engineering concern is how you end up with an app that is unusable exactly when people need it.

• Skeletons over spinners, so the layout does not jump when content lands.
• Optimistic updates for anything cheap to reverse, with a clear, quiet recovery when the server disagrees.
• Cache the last good view, and label it as such rather than showing an empty screen.
• Queue writes offline and tell the user what is pending, rather than failing the action outright.
• Test on a throttled connection routinely. A slow-network pass should be part of review, not a launch-week discovery.

1. 01

   Map the flows before the screens

   Three to five core journeys, written as sentences. Screens are the output of flows, not the input.

2. 02

   Sketch at real size

   Work at device dimensions from the start. Designs enlarged on a monitor hide every reach and legibility problem.

3. 03

   Design the states early

   Empty, loading, error, offline, permission denied, first run. On mobile these are most of the experience.

4. 04

   Prototype on the device in week one

   Get it on a phone, in a hand, outside. Ten minutes of that beats a week of desk critique.

5. 05

   Cut one thing per screen

   Whatever survives the cut is the screen. This single habit improves mobile work more than any other.