By the end of this lesson you can
- Compare mobile-first and desktop-first approaches.
- Choose an approach based on users, content and product type.
- Avoid the pitfalls of each approach.
The idea
Mobile-first means designing the smallest screen first, then enhancing for larger ones. Desktop-first starts with the large screen and adapts down.
Mobile-first strengths
Small screens force prioritisation: there is room only for what matters. Adding space later is easier than removing content. It suits consumer products where most traffic is mobile.
Desktop-first strengths
Some products are used mostly on large screens: data-heavy dashboards, professional tools, design and spreadsheet applications. Starting there lets you design for the dense, multi-panel workflows that matter most, then decide what a phone version should offer (often a subset).
Choosing
Look at analytics and research: which devices do people use for which tasks? Many products are mixed. A banking app might be mobile-first for checking balances, while its business version is desktop-first for bulk payments. Whichever you start with, design both ends before committing, and remember that "mobile-first" should not mean "mobile-only".
Why it matters in real projects
The starting point shapes priorities. Starting in the wrong place leads to cramped phone layouts squeezed from desktop designs, or stretched desktop layouts that waste space. Choosing deliberately, based on evidence, produces better experiences on the devices that matter most.
A realistic example
A recruitment platform has two sides. Candidates browse and apply for jobs, and 78% of them use phones. Recruiters review dozens of applications side by side, and 90% of them use laptops.
The team designs the candidate side mobile-first, focusing on quick browsing and a short application form. The recruiter side is desktop-first, with a split view of list and detail. A phone version for recruiters focuses on the few tasks they do on the move: reading new applications and replying to messages.
Step by step
Check the data
Look at device usage by task.
Choose a starting point per area
Decide mobile-first or desktop-first for each part of the product.
Prioritise content
List what is essential on the smallest screen.
Design both ends early
Sketch the largest and smallest versions before detailing either.
Fill in the middle
Design tablet and intermediate widths.
Validate
Test key tasks on real devices.
Common mistakes
Mistake Choosing by habit.
Instead Choose based on device data per task.
Mistake Mobile-first that strips useful features from desktop.
Instead Enhance for larger screens; do not limit them.
Mistake Desktop designs squeezed onto phones.
Instead Rethink content and tasks for small screens.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Choose and justify
Pick a product with two user groups and choose an approach for each.
Steps
- Describe both user groups and their main tasks.
- Estimate or find device usage for each.
- Choose an approach for each and justify it.
- Sketch both ends for one key screen.
Deliverable
A one-page decision note with sketches.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Mobile-first forces prioritisation; desktop-first suits dense tools.
- Choose by device usage per task.
- Products may use both approaches in different areas.
- Design both ends before committing.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Mobile first is not mobile only (opens in a new tab)Nielsen Norman Group
- Responsive web design basics (opens in a new tab)web.dev
Your notes
Marking complete updates your course and roadmap progress.