One website, many screens. Responsive design makes a single layout adapt to different device sizes and orientations. The term was coined by Ethan Marcotte in 2010, building on earlier ideas about flexible grids and fluid images. Instead of building separate sites for desktop and mobile, designers create one codebase that rearranges itself based on viewport width.

Three technical ingredients make it work. Fluid grids use percentages instead of fixed pixels, so columns stretch and shrink. Flexible images scale within their containers. Media queries detect the screen size and apply different CSS rules at defined breakpoints. A three-column desktop layout might collapse to a single column on a phone, with the navigation moving into a hamburger menu. The goal is not pixel-perfect control but graceful adaptation.

Core techniques

• Fluid grids based on percentages.
• Flexible images and media.
• Media queries at defined breakpoints.
• Mobile-first content prioritization.

Responsive design is now standard practice. Users expect a site to work whether they open it on a phone, a tablet, a laptop, or a television.