Useful tools
Move from guidance to a practical check with the tools available on this site.
Web guidance · Responsive
Responsive design: build for every screen
Responsive design is not about stacking media queries. It is about building an interface that stays readable and usable as the available space changes. These guides focus on the most practical principles.
3 guides
Adapt interfaces to content and screen sizes
Use mobile-first design, breakpoints and responsive images to preserve readability, stability and navigation comfort across screen sizes.
Responsive
Choosing useful responsive breakpoints
Choose breakpoints according to content and layout needs rather than an arbitrary list of device sizes.
Read the guideResponsive
Responsive images: srcset, sizes and dimensions
Use srcset, sizes, width and height to serve images that fit the display while avoiding unnecessary downloads.
Read the guideResponsive
Build a responsive and mobile-first website
Learn how to design a responsive and mobile-first website with flexible grids, fluid images, coherent breakpoints, and a readable mobile experience.
Read the guideExplore all web guidance
Return to the main hub to browse every topic and move between complementary guides.