Responsive design: phone first, then computer

Most people hold their phone in one hand and tap with their thumb. The thumb comfortably reaches the lower half and the side where the hand rests; the opposite upper corner is hard to reach. This has consequences for design.

• Important actions at the bottom or in the middle. A fixed bar at the bottom edge with “Call” and “Enquire” is easier to reach than a button at the top right.
• Tap targets large enough. As a rule of thumb, about 44 by 44 pixels; WCAG 2.2 gives 24 by 24 pixels with spacing as the minimum, which is also a sensible guide for older versions. The larger the target, the fewer mistaken taps.
• Space between links. Two links close together with no gap lead to wrong clicks. A line of space between entries in lists and menus is often enough.
• No hover effects as the only way in. There is no hovering on a phone. Submenus that only open on hover cannot be used there.
• Do not force gestures. Swiping, pinching and dragging are difficult for some people. Every function needs an alternative using a simple tap.
• Keyboard to match the input. For telephone numbers the number pad appears, for email addresses the keyboard with the at sign. This saves input errors.

These rules also apply to people using a computer with a touchscreen and to visitors with motor impairments. Putting them into practice improves the site for everyone.

On a phone everything sits one below the other. That is why you need a ranking. Work through these questions for every page:

1. What does someone with only 20 seconds need? That goes at the top: the key message, the main action, contact details.
2. What does someone who wants to decide need? That comes next: benefits, process, evidence, prices or price factors.
3. What does someone who wants to know everything need? That goes further down or in expandable sections: details, technical information, questions.
4. What is decoration? Anything that neither helps nor proves something leaves the mobile version. Decorative images and long introductory texts cost space and time.

Expandable sections (accordions) are a good way to offer depth without overloading the page. They work best when the heading reveals what lies beneath and when the most important content is not hidden behind them. If you hide content only in collapsed sections, you risk it being neither seen nor read.

A small café (entirely invented) has a website with attractive photos, a long story about its founders and a menu as a PDF. Someone looking for opening hours on a phone sees a full-screen photo, scrolls past three paragraphs of history and finds the hours in the PDF of the menu. The call is lost at this point.

Mobile redesign

• At the top: the name, one sentence about the location (“Coffee roastery and breakfast, city centre”), and below it today's opening hours, highlighted automatically according to the day of the week.
• Directly underneath, two buttons: “Open route” (a link to the device's maps app) and “Call”.
• The menu as text with subheadings (breakfast, coffee, cake), not as a PDF. Prices are searchable and readable without zooming.
• The founders' story stays, but moves to the end of the home page.
• Photos at a suitable size, the first as an eye-catcher, the rest loaded later.

The structure is no worse on a computer: there, opening hours and map sit side by side, and the menu in two columns. The redesign shows how mobile first also improves the desktop version, because the priorities have been clarified.

Forms

Use a single column, full width and visible labels. Use the right field types so that the phone shows the correct keyboard: number pad for telephone, email keyboard for addresses, date picker for appointments. The browser's autofill for name and address saves typing and reduces errors, as long as the fields are marked up correctly.

Tables

Wide tables do not fit on a phone. Three approaches help: the table is made horizontally scrollable (with a visible hint that there is more), the rows are rebuilt as cards (each row a block with labels), or the table is reduced to the most important columns. Which approach suits depends on whether visitors want to compare rows or look up individual entries.

Maps and directions

An embedded map is often more of a hindrance than a help on a phone, because swiping moves the map instead of the page. Better options are a clear address as text, an “Open route” link that launches the device's maps app and, where useful, a static image of the surroundings.

Documents

PDF files are awkward on a phone: they open in a separate viewer, are hard to read and work less well for search engines. Important content such as prices, menus or service descriptions belongs on the page as text; the PDF can additionally be available for download.

Before a page goes live, someone should work systematically through the most important combinations of device, browser and orientation. It need not be a hundred devices; a considered selection uncovers most of the problems. The table shows an example of a checklist that you can adapt to your visitor numbers.

Choose at least one browser on Apple devices and one on Android devices, plus Chrome or Edge and Firefox on the computer. Browsers differ in small ways in forms, video and font rendering, which can add up to real annoyance. Record findings in a list with the device, browser version and a screenshot, so that they are fixed in a traceable way.

If you want to know whether the mobile site is doing its job, you should count actions, not just page views. For many local businesses, the call is the most important mobile action. It is easy to capture: a telephone link can trigger an event that appears in a privacy-friendly analytics tool as “call tapped”. The same applies to “Open route” and to submitting the form.

Then compare the journeys on phone and computer. If many people on the phone reach the contact page but hardly anyone submits, the problem lies in the form. If conspicuously few reach the contact page on mobile, the menu navigation needs checking. How this ties in with analytics and data protection is described under data protection on websites.

Important: measure over several weeks and compare like with like. Especially on small sites, the figures sit in a range where chance plays a large part. Drawing conclusions from a handful of visits is misleading.