Responsive design is a design strategy in which layouts fluidly adapt to the viewport width of the device displaying them, rather than targeting fixed screen sizes. The foundational techniques are fluid grids (columns defined as percentages rather than pixels), flexible images (media that scales within its container), and CSS breakpoints (defined widths at which layout rules change). Mobile-first design — beginning layout decisions at the smallest screen and scaling up — forces prioritization of essential content and avoids the common failure of desktop designs that collapse badly on small screens. Responsive design is now the baseline expectation for all web interfaces, not an enhancement.
Take a desktop layout and redesign it for mobile in wireframe form, requiring you to make explicit priority decisions about what content appears, in what order, and what is deprioritized or hidden. Then design the tablet and desktop states as expansions of the mobile-first base.
You already know how grid systems organize content into columns with consistent gutters and margins. Responsive design builds on that foundation by making the grid fluid — columns defined as percentages of the viewport rather than fixed pixel widths. Instead of a 960-pixel, 12-column grid that looks perfect on a laptop and terrible on a phone, responsive grids stretch and compress to fill whatever screen they encounter. The grid you learned is still there; it simply adapts.
The key mechanism is the breakpoint: a specific viewport width at which the layout rules change. Below 600 pixels, a three-column layout might stack into a single column. Between 600 and 1024 pixels, it might become two columns. Above 1024 pixels, all three columns appear. Each breakpoint is a design decision, not a device specification — you are designing for ranges of width, not for "iPhone" or "iPad." The most important discipline is mobile-first design: start with the smallest screen, decide what content is essential and in what order, then progressively add complexity as the viewport grows. This forces you to make hard priority choices early rather than trying to cram a desktop layout into a phone after the fact.
Typography and images must respond alongside the grid. Type sizes, line lengths, and spacing that work at desktop widths become unreadable or wasteful at mobile widths. Your knowledge of typography fundamentals applies directly here — comfortable reading line lengths (45–75 characters) must be maintained across breakpoints, which often means adjusting font size and container width together. Images use fluid techniques: setting `max-width: 100%` ensures an image never overflows its container, and more advanced approaches serve different image sizes to different devices to preserve performance.
Responsive design is not the same as making everything smaller. At narrow widths, you may hide secondary navigation behind a hamburger menu, reorder content blocks so the most important information appears first, replace hover-based interactions with tap-friendly alternatives, or swap a data table for a card-based layout. Each breakpoint is an opportunity to restructure, not just rescale. Accessibility considerations from your prerequisite knowledge apply at every breakpoint — touch targets must be large enough for fingers (at least 44×44 pixels), contrast ratios must hold, and content order in the DOM should match visual order so screen readers encounter information logically regardless of the visual layout.
Topics in reflective domains aren't scored by quiz answers. Read, reflect, and mark when you've thought it through.