responsive design
/rɪˈspɒnsɪv dɪˈzaɪn/
CommonA design approach where a website or app adjusts its layout to fit any screen size.
Used as both a technical term and casual shorthand. When someone says a site is 'not responsive' they usually mean it breaks on mobile.
Real-world examples4 examples
| # | Example | What it means | Source |
|---|---|---|---|
| 01 | why is this site not responsive in 2024 lol | The site breaks on mobile despite responsive design being a basic expectation. | x, 2024 |
| 02 | the nav is broken on tablet. responsive design is hard | Navigation layout fails at tablet widths, which is a common problem. | reddit, 2023 |
| 03 | client: make it responsive. also client: here's a fixed-width psd | The client is asking for responsive behavior while providing a format that implies fixed dimensions. | reddit, 2022 |
| 04 | finally the responsive design works on all breakpoints. ship it | The layout has been tested at all screen sizes and is ready to deploy. | x, 2023 |
Use it when
- A site adapts its layout to different screen sizes.
- Discussing whether a design works on mobile.
- Critiquing a site that breaks on smaller screens.
- Describing a design requirement for a new project.
Do not use it when
- You mean a site loads quickly on mobile.Use “performant” instead.
- You mean the design looks good.
Responsive design vs mobile-first
responsive design
Responsive design is the goal: a layout that works at all sizes.
VS
mobile-first
Mobile-first is the approach: start designing for small screens and scale up.
Origin and context
The term was coined by web designer Ethan Marcotte in a 2010 article in A List Apart, where he proposed using fluid grids, flexible images, and CSS media queries together to build adaptive layouts.
- First seen
- 2010
- Confidence
- high
Cite this page
Use this stable URL to reference the entry.
https://slang.fyi/responsive-designUpdated: 2026-08-28License: CC BY 4.0