Responsive Design
Noun · Development · Origin: 2010
Definitions
Responsive Design is a web development approach where a website's layout and content automatically adapt to the screen size and orientation of the device viewing it, providing an optimal experience across desktops, tablets, and smartphones. Coined by Ethan Marcotte in a 2010 article, responsive design uses three core techniques: fluid grids (layouts based on percentages rather than fixed pixels), flexible images (that scale within their containers), and CSS media queries (that apply different styles based on screen width, height, resolution, and orientation). Instead of building separate websites for mobile and desktop users, responsive design serves the same HTML with different CSS rules. The approach became essential as mobile internet usage surpassed desktop, and Google adopted mobile-first indexing for search rankings. Modern CSS features like Flexbox, Grid, container queries, and clamp() have made responsive design significantly easier to implement. Frameworks like Bootstrap and Tailwind CSS provide responsive utility classes out of the box.
In plain English: Designing websites that automatically adjust their layout to look good on any screen size — phone, tablet, or desktop.
Related Terms
- Dark Mode
- Accessibility
- SEO
- Core Web Vitals
- Keyframe
- Live Reload
- Media Query
- Pixel Density
- Pseudo Element
- Sass
- Scoped Style
- Scroll Snap
- SCSS
- Skeleton Loading
- Tailwind
- Tailwind CSS
- Transform
- Transition
- WebView
- Asset Bundler
- Asset Compilation
- Browser History API
- Browser Security
- Cache Busting
- Client Component
- Code Bundle
- CSS Architecture
- CSS Framework
- CSS Reset
- CSS Utility