A design approach that adapts a page’s content presentation and layout to different screen sizes.
Responsive design adapts a page’s layout to the space and capabilities available on the device. Flexible layouts, adaptable images and CSS rules can change how content is arranged without requiring a separate page for every screen size.
The goal is usable presentation, not merely shrinking a desktop page. Text needs to remain readable, navigation needs to work and controls need to remain accessible. A layout can respond to screen width while still containing awkward tables, cropped information or an obstructive menu.
Evaluate responsiveness with real content and meaningful tasks. A short placeholder heading can conceal problems that appear when a real product name wraps across several lines. Likewise, a screenshot of the top of the page cannot establish that its form, comparison table and navigation remain usable lower down.
Takeaway: Choose layouts that adapt to the devices customers use, then test the actual tasks they need to complete. A responsive template is a starting point, not proof that every page works well.
Example
An equipment supplier’s three-column comparison fits a desktop screen but becomes cramped on a phone. The design team could adjust the arrangement or provide an understandable scrolling table while preserving the comparison data. Simply hiding the columns would make the page fit at the cost of useful information.
What to check
Test a range of widths with real titles, images and forms. Check navigation and content access as well as appearance. Avoid assuming that one breakpoint, one screenshot or a template’s responsive label guarantees good usability or search performance.
For more detail, see Responsive web design.