A baseline for responsive web layouts

Responsive design allows one document to adapt to available space. The foundation is a readable flexible layout; media queries should refine it rather than rescue fixed-width assumptions.

Use proportions in the grid

Express columns relative to their containing block and retain sensible maximum line lengths. Begin with a single-column document order so narrow screens receive the same content and task sequence without horizontal scrolling.

Constrain media

Apply a maximum width to images and embedded media so they do not overflow a flexible container. Check fixed dimensions inserted by the content-management system and provide an intentional treatment for data tables.

Add queries where layout fails

Introduce media queries at widths where navigation, line length or grouped content needs a new arrangement. Test browsers without media-query support against the baseline and decide whether a small compatibility script is justified.