Responsive Design
Designing layouts that adapt fluidly to any screen size.
Responsive design is the practice of building interfaces that adapt to the device they're viewed on — reflowing layout, resizing type, and rearranging content from mobile to desktop. With most traffic on mobile, responsive (often mobile-first) design is non-negotiable.
It relies on flexible grids, breakpoints, and fluid units so a single design works everywhere instead of shipping separate desktop and mobile sites.
Key characteristics
- One layout that adapts fluidly to any screen size using flexible grids and media queries.
- Mobile-first design starts with the smallest screen and enhances upward.
- Relies on relative units, breakpoints and scalable images.
- Replaces maintaining separate desktop and mobile sites.
Example
A three-column feature grid on desktop reflows to a single stacked column on a phone, keeping content readable without horizontal scrolling.
Frequently asked questions
What is the difference between responsive and adaptive design?
Responsive design fluidly adjusts to any width using flexible layouts. Adaptive design serves distinct fixed layouts at specific breakpoints. Responsive is the more common, lower-maintenance approach today.
What does mobile-first mean?
Designing for the smallest screen first, then progressively enhancing for larger ones. It forces prioritisation of essential content and usually yields cleaner, faster experiences.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.