Designing for small screens and portable devices
A phone is the most capable computer most people carry: a touchscreen, vibration, a camera, sensors, storage and a share menu that reaches every other app. But it is used standing up, in one hand, in bad light, between other things. Apps that respect that win. This guide shows how.
Key takeaways
- Design for one hand and a moving person, not a seated one with a mouse.
- Put the most frequent action within thumb reach and make it big.
- Confirm with touch and motion, so eyes can stay on the real-world task.
- Save every change instantly, work offline, and assume interruption.
- Share through what Android already has before building a server.
Small screen, big context
Desktop software assumes a desk: two hands, a keyboard, a big display and your full attention. A portable device gets none of those guarantees. The person holding it may be walking a warehouse aisle, standing at a customer's door, wearing gloves, squinting in sunlight, or holding a coffee in the other hand. They will be interrupted by a call, a colleague, or a notification.
So the question for every screen is not just "does it fit?" but "can someone use this while doing something else?" Shrinking a desktop layout fails that test. Designing for the context passes it.
Seven principles
Each principle has its own guide with examples and Jetpack Compose code.
Touch first, keyboard last
On-screen keyboards are slow, cover half the screen and are error-prone while walking. Most data entry on a phone can be designed around the thumb instead:
| Android building block | Use it for |
|---|---|
| Large tap targets | The most common action, one tap away |
| Swipe gestures | Opposite or destructive actions, like decrementing or dismissing |
| Double-tap | Quick toggles such as flags and favourites |
| Long-press | Opening extra options without cluttering the screen |
| Bottom sheets | Menus and choices where the thumb already rests |
| Haptic feedback | Confirming an action without looking |
| Undo instead of "Are you sure?" | Keeping the flow fast while still forgiving mistakes |
Keep typing for the rare cases that truly need it, like naming something new, and prefer steppers, chips and pickers over number fields.
Mobility: capture data where it happens
A lot of useful data lives away from desks: on a shelf, at a job site, next to a machine. A desk-based workflow means remembering things and typing them in later, which is where mistakes creep in. A phone app can:
- record the moment you see it, one-handed, in front of the thing you're counting or checking,
- save every change instantly on the device, so nothing is lost if you're interrupted,
- work fully offline anywhere without signal,
- confirm each action with a vibration, so your eyes stay on the work.
Good fits: stock counts, site inspections, attendance, meter readings, delivery checklists, field surveys and equipment logs. The app ideas page sketches a dozen of them.
Getting more out of your own phone
The same principles make you faster as a user, not just as a designer. A few Android settings that help on a small screen:
- Gesture navigation (Settings → System → Gestures → Navigation mode) frees the bottom of the screen and lets you go back with a side swipe from either edge.
- One-handed mode, where your phone offers it, pulls the top half of the screen down within thumb reach.
- Font size and display size (Settings → Display) make text larger without zooming. Good apps reflow for it.
- Dark theme reduces glare at night and, on OLED screens, can save battery.
- The share menu: long-press a target to pin it, so your most-used apps and contacts stay at the top.
- Quick Share and hotspot move files between nearby phones without mobile data.
Test like your users hold it
An emulator on a 27-inch monitor hides every problem this guide is about. Install on a real phone, with --watch so each change lands in seconds, and then:
- Use it one-handed, standing up, with your other hand full.
- Take it outside and try it in direct sunlight.
- Set font size to the largest setting and check nothing is cut off.
- Turn on airplane mode and use it for five minutes.
- Switch apps mid-task, take a call, rotate the phone, then come back.
The Thumb Inventory walkthrough shows all of this applied to one complete app, built with android_scaffold.
Frequently asked questions
What is the most important rule when designing for small screens?
Design for the context, not just the size: one hand, partial attention and frequent interruption. In practice that means the main action is big and within thumb reach at the bottom, every change is saved immediately, and the app confirms actions with touch feedback.
How big should buttons be on a phone?
At least 48 by 48 dp, the Material Design minimum, with about 8 dp between targets. The most frequent action can be much bigger. WCAG 2.2 sets 24 by 24 CSS pixels as the minimum at level AA and 44 by 44 at level AAA.
Do these guidelines apply to tablets and foldables?
Mostly yes. Thumb reach matters even more on large devices held in two hands, where the comfortable zones are along the sides. Offline-first, interruption handling and sharing apply to every portable device.
How can I try these ideas quickly?
Write a single Jetpack Compose file and run python3 android_scaffold.py my-app --watch. The app reloads on your phone every time you save, so you can feel each design change in your hand within seconds.