Glossary

Responsive Design

Definition: Responsive web design is an approach where a website's layout automatically adapts to different screen sizes using flexible grids, images and CSS media queries.

Responsive web design (RWD) is an approach to web design where the layout and content of a webpage automatically reformat and resize to look good on any device — from a large desktop monitor to a smartphone. Coined by Ethan Marcotte in 2010, RWD has become the standard approach since Google adopted mobile-first indexing.

Three Core Techniques

Fluid grids — Use relative units (%, fr, vw) instead of fixed pixel widths so columns resize proportionally.
Flexible images — max-width: 100% ensures images never overflow their container.
CSS Media Queries — Apply different styles at different viewport widths:
@media (max-width: 768px) { ... }

Mobile-First vs Desktop-First

Mobile-first — Start with styles for the smallest screen and add complexity with min-width queries as the screen grows. Recommended approach.
Desktop-first — Start with desktop styles and use max-width queries to simplify for smaller screens.