Responsive design means one design that adapts to different screen sizes, rather than separate designs built for each device. Mobile-first is a specific way of approaching that: designing the smallest, most constrained screen first, then expanding.
| Breakpoint | Typical width | Common device |
|---|---|---|
| Mobile | < 600px | Phones |
| Tablet | 600–1024px | Tablets, small laptops |
| Desktop | 1024px+ | Laptops, desktop monitors |
Designing for the smallest screen first forces real prioritization from the start — there's no room to fit "everything," so only what actually matters survives. Designing desktop-first and then trying to cram it onto mobile tends to produce a cluttered, compromised mobile experience, since nothing was cut, only shrunk.
| Element | How it typically adapts |
|---|---|
| Navigation | Full menu bar on desktop often collapses to a hamburger menu on mobile |
| Grid columns | A 3-4 column desktop layout often becomes a single column on mobile (see the earlier grid systems lesson) |
| Touch targets | Buttons and tappable areas need to be larger on touchscreens — a mouse cursor is far more precise than a fingertip |
| Images | Often cropped or resized differently per breakpoint, not just scaled uniformly |
Test on the real thing when possible
Design and test on a real phone, not just a resized browser window on a desktop — actual touch targets, actual thumb reach, and actual load times on mobile data reveal problems a desktop preview never will.