Responsive Design
A web design approach that makes pages render correctly across a wide range of screen sizes and devices by using flexible layouts, fluid grids, and CSS media queries.
Responsive design ensures that a single codebase adapts to desktops, tablets, and mobile phones without requiring separate versions for each device. Key techniques include CSS media queries, flexible grid systems (CSS Grid, Flexbox), fluid images with max-width: 100%, and responsive typography using relative units.
QA teams test responsive design by checking the site at multiple viewport widths (common breakpoints like 320px, 768px, 1024px, and 1440px), in both portrait and landscape orientations, and on actual devices when possible, since emulators do not perfectly replicate touch behavior and rendering.
Why It Matters for QA Teams
Over half of global web traffic comes from mobile devices. A website that breaks on smaller screens loses a significant portion of its audience and may rank lower in mobile search results.
Example
QA testing at 375px width (iPhone SE) reveals that a three-column product grid does not collapse to a single column. Products overflow horizontally, requiring sideways scrolling. The media query breakpoint was set to 360px instead of 480px, so most mobile devices fall outside the responsive adjustment. Correcting the breakpoint resolves the layout issue.