Responsive Design
An approach to web design that makes layouts and content adapt fluidly to any screen size, from mobile phones to large desktop monitors.
Definition
Responsive design is a web development approach where a single codebase produces layouts that adapt to the viewport size of the device displaying them. Using flexible grids, fluid images, and CSS media queries, a responsive site rearranges and resizes its content rather than serving separate desktop and mobile versions.
Why it matters
More than half of global web traffic comes from mobile devices. A site that looks broken on a phone loses visitors immediately. Search engines also use mobile-friendliness as a ranking signal. Responsive design eliminates the cost of maintaining separate mobile and desktop codebases while delivering a consistent experience across devices.
Example
A responsive navigation bar might display as a full horizontal menu on desktop but collapse into a hamburger icon on mobile. A three-column article grid might reflow to a single column on small screens. Modern CSS frameworks like Tailwind CSS are built around responsive-first utility classes.