Responsive web design adapts a website’s layout to different screens and device contexts. As browsing moved onto phones, fluid layouts became essential for keeping the experience coherent instead of forcing users to zoom, hunt for tiny controls, or navigate a shrunken desktop page. section 6.0 section 6.5
Make responsive design a practical layout decision:
- Design for distinct contexts such as desktop, tablet, and phone rather than merely scaling one desktop composition. section 10.9
- Use fluid CSS Grid and Flexbox layouts when the browser can handle the required adaptation naturally. section 10.9
- Add media-query breakpoints when complex interface components need more deliberate control over layout changes. section 10.9
- Treat frameworks as accelerators, not design substitutes: they provide ready-to-use code but can constrain variation, add unused code, and make sites look alike. section 6.0
One design, three layout guides
A desktop mock-up can use a 12-column grid, a tablet version an 8-column grid, and a phone version a 4-column grid. These mock-ups give developers targets for particular viewport sizes and can suggest CSS breakpoints where the layout should change. section 10.9
Recognize the familiar hero image followed by three-column layout, then decide whether repeating that framework pattern supports the site’s identity and user goals. section 6.0
