Responsive web design makes one page feel at home on many screens. Instead of creating disconnected desktop, tablet, and phone versions, let the layout, type, images, and other content adapt to the space available. The goal is simple: keep every page usable, readable, and navigable without making people scroll sideways to read it. section 13.0
Think of a responsive page as a flexible outfit rather than a rigid cardboard costume. A fixed-width layout may look fine on a large screen, but it can overflow a small one. A liquid layout fits the screen, yet its columns can become uncomfortably narrow on a phone. Responsiveness combines several techniques so the page can adjust without sacrificing readability. section 13.0 section 13.7
A responsive layout brings together four parts:
- Use relative measurements so widths can change with available space. section 13.18
- Build with a flexible grid rather than a fixed-width arrangement. section 13.18
- Add media queries to change rules at different screen sizes. section 13.18
- Start with mobile screens, then expand the design for larger ones. section 13.18
Before shaping the layout, prepare the page for different devices. Set box sizing so block-level elements are sized to their border rather than only their content. Then configure the viewport: width=device-width matches the page width to the device, and initial-scale=1.0 starts without zooming. section 13.4
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Use this viewport tag in the page head to let the browser begin with the page width matched to the device width. section 13.4
A changing layout is only part of the job. Images need to scale or be delivered at different sizes, and typography needs responsive sizes too. Flexibility applies to the whole page, not just its columns. section 14.0
Try a portfolio-page upgrade
Take a portfolio page that works on desktop but breaks on smaller screens. Add media-query breakpoints, then test whether it stays useful from a tablet down to a smartphone. As a first experiment, convert a fixed-width layout into a liquid one; then check whether the resulting columns remain easy to read. section 20.47 section 13.7
