# Mobile-first design: thumb zones, tap targets and performance Source: https://sarang.pro/mobile-first-design-tap-targets-performance/ Author: Sarang | Published: 25 October 2026 Mobile-first design means designing for the smallest, most constrained screen first, then adding layout and detail as space allows. The constraint is useful. A phone screen forces you to decide what matters on each page, and a design that works with one thumb on a patchy connection usually works everywhere else too. This guide covers the three areas where mobile designs most often fail: how people hold their phones, how big tap targets need to be, and how fast pages must load. It uses Steven Hoober's field research, the W3C's accessibility criteria, Apple and Google's platform guidance, and Google's Core Web Vitals. ## How people hold their phones The best-known study is Steven Hoober's article [How do users really hold mobile devices?](https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php), published in UXmatters in 2013. He made 1,333 observations of people using phones in public, 780 of them involving touching the screen. Among those, 49% used one hand, 36% cradled the phone in one hand and tapped with the other, and 15% used two hands. People also switched grip often as tasks changed. The article included charts of the "thumb zone": areas easy to reach with one thumb, areas needing a stretch, and areas needing a change of grip. These charts have been widely copied. Hoober himself later added a comment, in 2017, saying his further research found people touch the centre of the screen more, faster and more accurately, and asked readers to ignore those drawings. What survives is practical: - Put the most frequent actions where they are easy to reach and see, which usually means the middle and lower parts of the screen. - Keep destructive actions, such as "Delete account", away from spots people hit by accident. - Don't assume one grip. Hoober's own warning was not to ignore 20 to 30% of users by designing for a single way of holding the phone. ## Tap targets big enough for fingers A tap target is the area that responds to a touch, which can be larger than the visible icon or text. Small, crowded targets cause mis-taps, which are frustrating for everyone and a real barrier for people with tremors or limited dexterity. SourceGuidance[WCAG 2.5.8 Target size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html), level AAAt least 24 by 24 CSS pixels, or enough spacing that a 24px circle around each target doesn't touch another[WCAG 2.5.5 Target size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html), level AAAAt least 44 by 44 CSS pixels[Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility)Default control size of 44 by 44 points on iPhone, minimum 28 by 28[Android accessibility guidance](https://developer.android.com/guide/topics/ui/accessibility/apps)Touch targets of at least 48 by 48dp, and larger is betterWCAG 2.5.8 has exceptions, including links inside a sentence and controls whose size the browser decides. The W3C page suggests aiming for the stricter 44px for important controls. Apple adds that spacing matters as much as size, suggesting about 12 points of padding around elements with a visible border and about 24 points around those without. A sensible working rule for a website: make primary buttons and navigation items at least 44px tall, never let any target fall below 24px, and give adjacent targets clear space between them. ## Performance on real phones Phones often have slower processors and less reliable connections than the laptops designers work on. Google's [Web Vitals](https://web.dev/articles/vitals) guidance defines three Core Web Vitals and the thresholds for a good experience: - **Largest Contentful Paint (LCP):** the main content should appear within 2.5 seconds of the page starting to load. - **Interaction to Next Paint (INP):** the page should respond to taps and clicks within 200 milliseconds. - **Cumulative Layout Shift (CLS):** layout shift should stay at 0.1 or less, so buttons don't jump as the page loads. Google recommends measuring the 75th percentile of page loads, split by mobile and desktop. That is, three-quarters of real visits should meet the target, not just your own visit on office wi-fi. Free tools such as PageSpeed Insights report these figures from real Chrome users where enough data exists. The usual causes of slow mobile pages are oversized images, too many third-party scripts (chat widgets, trackers, embedded feeds) and large fonts. Layout shift is commonly caused by images and adverts without reserved space, and by cookie banners that push content down. ## Designing mobile first, step by step - **List the top tasks.** Decide the two or three things most visitors come to do on each key page. - **Design the narrowest layout first.** One column, top tasks visible early, nothing that needs hovering. - **Size and space every control.** Check primary actions are at least 44px and nothing is under 24px. - **Set a performance budget.** Agree limits for page weight and third-party scripts before adding them. - **Enhance for larger screens.** Add columns, side navigation and richer media as width allows. - **Test on real devices.** Use a mid-range phone on mobile data, not only a browser's device emulator. ## A worked example *An example (illustration only).* A local bakery's site was designed on a desktop. On phones, the order button sits in a crowded header next to a basket icon and a search icon, each about 20px wide. The home page opens with a full-screen video, and a newsletter pop-up appears after three seconds. Reworking it mobile first, the owner decides visitors mainly want to see today's bakes and order for collection. The video becomes a single compressed photo with fixed dimensions, so nothing shifts. "Order for collection" becomes a full-width 48px button below the opening photo. Header icons are enlarged with spacing between them, and the pop-up is replaced by a sign-up box at the end of the page. PageSpeed Insights is checked before and after, and the owner tests the order flow on an older phone using mobile data. ## Common mistakes and when the approach needs adjusting - Shrinking a desktop design rather than designing for the phone. - Icon-only buttons with tiny hit areas and no labels. - Menus and tooltips that only work on hover. - Pop-ups that cover the content on arrival. - Testing only on new, high-end phones. - Treating the thumb-zone diagram as a rule rather than a rough guide. Mobile first sets the starting point, and desktop still matters. Some products are mainly used at a desk, such as accounting software or design tools, and their analytics will show it. Check your own device split before you decide where the design effort goes. Even then, the discipline of choosing top tasks and keeping pages light pays off on every screen.