Designing for mobile first

Most first visits happen on a phone. For many organisations, the first time a prospective customer meets the brand is on a small screen, often on the move, sometimes on a patchy connection. Yet many websites and web applications are still designed on large monitors and then squeezed down to fit a phone as an afterthought.

Mobile-first design reverses that order. You design for the smallest, most constrained screen first, then expand the layout for tablets and desktops. Starting there improves the whole experience, because the constraints of a phone force decisions that make every version clearer. This guide sets out how to do it in practice.

Check how your visitors actually arrive

Before changing anything, look at your own analytics. Split visits by device type and compare what people do on each. In many consumer businesses the majority of first visits are on phones, with desktop use rising later in the journey when people come back to compare options or complete a purchase. In some business-to-business settings, desktop still dominates during working hours.

The pattern matters more than the totals. If phone visitors arrive, read one page and leave, while desktop visitors go on to enquire, that may be a sign the mobile experience is failing rather than that mobile visitors are less interested. Look at bounce rates, form completion and time to first action by device.

• Share of visits, enquiries and sales by device type.
• The top ten landing pages for phone visitors.
• Form completion rates on phone versus desktop.
• Page load times on a mid-range phone, not just on office broadband.

Prioritise content for the small screen

Decide what matters most on a small screen. A desktop page can hold a sidebar, a large hero image, three columns of features and a newsletter sign-up all at once. A phone shows one thing at a time, in a single column, and the visitor has to scroll to see the rest. That makes the order of content a design decision of real consequence.

Start each page by writing down the one thing a visitor most needs to do or learn there. Put that first. Then list everything else in descending order of importance and be prepared to cut items from the bottom. If something is not worth a place on the phone version, ask whether it is really worth a place on the desktop version either.

A practical exercise

1. Print or screenshot a key page and cut it into its separate blocks.
2. With the page owner, arrange the blocks in a single column in order of importance.
3. Draw a line where a typical phone screen ends; everything above it must earn its place.
4. Remove or shorten anything near the bottom that nobody argues to keep.
5. Use this order as the basis for the mobile design, then expand for larger screens.

Make touch easy

Use clear tap targets and simple forms. A finger is far less precise than a mouse pointer, and people often use a phone with one thumb while holding something else. Small links placed close together lead to mis-taps and frustration.

Give buttons and links enough size and space. Platform guidelines from the major phone makers suggest touch targets of roughly 44 to 48 points or pixels square, which is a sensible minimum. Place the main action where a thumb can reach it easily, and keep destructive actions such as “delete” away from frequently used buttons.

Forms deserve special care

Forms are where most mobile journeys fail. Typing on a phone is slow and error-prone, so every field you remove makes a difference. Ask only for what you genuinely need at this stage; you can collect more later.

• Use the right keyboard for each field: numeric for phone numbers, email layout for addresses.
• Allow autofill and password managers to work.
• Put labels above fields rather than inside them, so they stay visible while typing.
• Show errors next to the field, in plain words, as soon as they occur.
• Offer payment and sign-in options that avoid typing where possible.

Keep it fast

Light pages load quickly on slower connections. Visitors on a phone are often on mobile data, in a building with weak signal or on a train. Every large image, video and script adds seconds to the load time, and people tend to give up on pages that keep them waiting.

Speed is mostly a matter of discipline. Compress images and serve smaller versions to smaller screens. Avoid autoplay video on mobile. Question every third-party script, such as chat widgets, tracking tags and social feeds, because each one slows the page. Set a performance budget, such as a maximum page weight or load time, and treat breaking it as a defect.

There is a trade-off between richness and speed. A full-screen background video may look impressive on a designer’s desktop, but on a phone it costs data, battery and time. Mobile-first design asks whether each element is worth its weight for the person on the slowest reasonable connection.

Simplify navigation

Desktop menus with dozens of links do not survive the move to a phone. Collapsing them all behind a single menu icon hides the structure of the site, and long nested menus are hard to use with a thumb. Mobile-first design is a good moment to look again at how the site is organised.

Keep the top level short, ideally five to seven items, and name them in plain words that match what visitors are looking for. Make search prominent if your site has a lot of content, such as a product catalogue or a knowledge base. For the two or three most common tasks, consider a persistent button or bar, such as “Book”, “Call” or “Get a quote”, that stays within reach as people scroll. Check your analytics afterwards to see whether visitors find what they need with fewer taps.

Expand for larger screens

Once the mobile design works, add layout for tablets and desktops. Larger screens allow content to sit side by side, navigation to be fully visible and images to be shown larger. The order and priority you set for mobile should still hold; you are adding space, not new priorities.

Test on real devices throughout. Browser tools that simulate phone screens are useful for layout, but they do not show how a page feels in the hand, on a slower processor or in bright light. Keep two or three typical phones in the office, including a mid-range Android device, and use them in every design review.

Watch real people too. Ask four or five customers to complete a key task on their own phones while you observe. They will hold the phone differently, use different browsers and stumble in places your team never noticed, and a single afternoon of this kind of testing often produces more useful changes than weeks of internal review.

A good first step is to pick your three most visited landing pages, open them on a mid-range phone over mobile data and try to complete the main action. Note every point of friction. That list, ordered by how many visitors it affects, is your mobile-first backlog.

Source: Intelliversal analysis.

Frequently asked questions

Does mobile first mean the desktop experience gets worse?

No. Starting with the phone forces clear priorities, which usually makes the desktop version cleaner too. Larger screens then add space and layout without changing what matters most.

Should we build a separate mobile site or app?

For most organisations a single responsive website, designed mobile first, is enough. A native app makes sense only when customers use the service often or need device features such as offline use or notifications.

How do we know if our mobile experience is failing?

Compare phone and desktop behaviour in your analytics: bounce rates, form completion and conversion. Then test the main journeys yourself on a mid-range phone over mobile data.

Explore Design Services