For most businesses, the majority of website visitors now arrive on a phone, and Google evaluates the mobile version of your pages when deciding how to rank them. Yet many sites are still designed on a large monitor and then squeezed onto smaller screens, leaving tiny buttons, cramped text and hidden actions. Mobile-first design flips the process: start with the phone, get the essentials right, then expand. Here's how to do it well.
Mobile-first vs desktop-first
| Desktop-first | Mobile-first | |
|---|---|---|
| Starting point | Large screen, everything visible | Small screen, essentials only |
| Content decisions | Add everything, hide some on mobile | Prioritise, then add for larger screens |
| Typical result on phones | Cramped, slow, hidden actions | Focused, fast, easy to tap |
| Performance | Often heavy | Lighter by default |
| CSS approach | Max-width breakpoints | Min-width breakpoints |
Why it matters
- Search: Google uses mobile-first indexing, so content missing from your mobile view may not count.
- Conversion: the phone is often where people decide to call, book or buy.
- Speed: designing for mobile encourages lighter pages, which helps Core Web Vitals.
- Clarity: limited space forces you to decide what really matters, which improves the desktop version too.
The core principles
1. Prioritise ruthlessly
List every element on a page and rank it by how important it is to the visitor's goal. On a phone, the first screen should show what you do, who it's for and the main action.
2. Design for thumbs
- Touch targets at least 44 × 44 points, with space between them
- Primary actions within easy reach in the lower half of the screen
- No hover-only interactions; there's no hover on a touchscreen
3. Readable typography
| Element | Mobile guideline |
|---|---|
| Body text | At least 16px, line height around 1.5 |
| Line length | Roughly 30–45 characters per line on phones |
| Headings | Clear size steps, but not so large they push content off screen |
| Contrast | Meets WCAG 2.2 AA (4.5:1 for normal text) |
4. Simple navigation
- Keep the main menu short; five to seven top-level items is plenty
- Make the most common action, such as "Book" or "Call", visible without opening the menu
- Use clear labels, not clever ones
5. Forms that work on phones
- Fewer fields, one column
- The right keyboard for each field: email, phone, number
- Autocomplete attributes so browsers can fill details
- Clear, inline error messages
Our guide to form design best practices covers this in detail.
6. Fast by default
- Compress and resize images for small screens; see our image SEO guide
- Load only the scripts each page needs
- Avoid huge hero videos on mobile
- Test on a mid-range phone on a normal 4G connection, not just office Wi-Fi
Common mobile mistakes
- Pop-ups that cover the content as soon as the page loads
- Text inside images that becomes unreadable when shrunk
- Tables wider than the screen with no way to scroll them
- Sticky headers that take up a third of the screen
- Phone numbers that aren't tappable links
- Important content hidden in accordions that search engines and users miss
A mobile-first design process
- Define the key tasks visitors come to complete.
- Wireframe mobile first, one column, in priority order.
- Prototype and test on real phones, not just in a desktop browser.
- Expand to tablet and desktop, using the extra space for supporting content and layout.
- Check accessibility and speed on every breakpoint.
Testing checklist
- Main action visible on the first screen of key pages
- All buttons and links easy to tap
- Text readable without zooming
- No horizontal scrolling
- Forms usable with one thumb
- Pages pass Core Web Vitals on mobile
- Tested on iPhone and Android, in portrait and landscape
Breakpoints and layout: a practical starting point
| Screen | Typical width | Layout approach |
|---|---|---|
| Small phone | 320–375px | Single column, essentials only |
| Large phone | 376–480px | Single column, slightly larger type and spacing |
| Tablet | 768–1024px | Two columns where content benefits |
| Laptop | 1024–1440px | Full layout with supporting content |
| Large desktop | 1440px+ | Constrained content width; avoid very long lines |
Design for content, not devices: add a breakpoint where the layout starts to look awkward, rather than for a particular phone model.
Mobile content priorities by page type
| Page | First screen on mobile should show |
|---|---|
| Homepage | What you do, who it's for, main action |
| Service page | The service, the key benefit, how to enquire |
| Product page | Photo, name, price, add to basket |
| Article | Title, introduction, reading time |
| Contact page | Phone (tappable), form, opening hours, location |
| Booking page | Available times and the booking button |
If an element doesn't help the visitor complete their task on a phone, it probably belongs lower down the page, or not at all.
How we design
Every Zelvorm project is designed and tested mobile-first, from wireframes and user flows to high-fidelity UI design, with prototypes reviewed on real devices before development starts.
The short version
Design for the phone first: prioritise content, make actions easy to tap, use readable type, keep navigation simple, build phone-friendly forms and keep pages fast. Then expand for larger screens. Your mobile visitors, and Google, will notice the difference.
