5 mistakes people make in mobile design
Most visitors arrive on a phone, but design still happens on a big screen. Here are five mistakes that come from that gap, and how to fix them.
The design is done on a 27-inch screen with a mouse, and the site is used on a 6-inch screen with a thumb. That gap usually leads to the same five mistakes.
1. Tap targets that are too small
A mouse pointer can hit a single pixel and a thumb can't. An adult fingertip covers roughly 9 millimetres of screen.
Every tappable element should be at least 44 × 44 pixels. It can look smaller, but the area that responds to a tap needs to be that size.
Leave at least 8 pixels between two targets. Menu links crammed together are the most common cause of mis-taps.
2. Horizontal scrolling
If the page slides left and right, something is wider than the screen. It's usually a table with a fixed width, a long link that doesn't wrap, or a negative margin.
To find it, press F12 in your browser and type document.documentElement.scrollWidth into the console. If the number is bigger than the screen width, something is overflowing.
For tables, put the table in a box that scrolls sideways, or turn it into a stack of cards on mobile.
3. Text under 16 pixels
Small text causes two problems. It's hard to read, and on iOS there's a less obvious one: tap a form field with text smaller than 16 pixels and the browser zooms in automatically, which breaks the layout.
Set body text to at least 16 pixels. For form fields there are no exceptions.
4. Hiding important content behind the menu
A hamburger menu saves space, but anything you put inside it is far less likely to be seen.
Don't put your most important action in the menu. Keep it in the header as a visible button. A phone number, WhatsApp or "Get a quote" shouldn't get lost inside a menu.
5. Sticky elements eating the screen
A sticky header at the top, a cookie bar at the bottom, a chat bubble in the corner, a newsletter popup in the middle. On a phone, half the screen is covered.
Sticky elements together shouldn't take up more than 20% of the screen height.
On mobile, hide the header as the visitor scrolls down and bring it back when they scroll up. Show the cookie bar once, and once it's dismissed, don't show it again.
The easiest way to test
The mobile simulator in your browser helps, but it isn't enough, because clicking with a mouse is nothing like tapping with a finger.
Open your site on your own phone and try using it one-handed while walking. Note every spot where you struggle and fix it.