Open a website on your phone, then on a laptop, then on a TV. If it looks right on all three without pinching or squinting, it was built with responsive design. The approach lets a single codebase adapt its layout, images, and typography to whatever screen it lands on.

Ethan Marcotte coined the term in 2010, when mobile browsing was exploding and designers faced a choice: build separate sites for every device or build one that bends. Responsive design won. The core tools are fluid grids, flexible images, and media queries. A media query asks the browser how wide the viewport is and applies different CSS rules depending on the answer.

What makes a design responsive

• Fluid grids that use percentages instead of fixed pixels
• Flexible images that scale within their containers
• Media queries that apply breakpoints for different screen sizes
• Touch-friendly targets on mobile layouts

The goal is not just fitting content on a small screen. It is preserving readability, hierarchy, and usability across every context. A three-column desktop layout might collapse to one column on a phone. A hamburger menu replaces a full navigation bar. Good responsive design feels inevitable, as if the site was always meant to look that way on your device.