Free tools Windows power users keep installed
One-click scans. No signup required.
Responsive web design (RWD) is an approach to designing web pages so their layout and presentation adapt to the space and conditions in which they are viewed. Rather than building for one fixed canvas or separate bespoke sites for different devices, it aims to make the same content usable as the viewing area changes.
What responsive web design means
Responsive design is an approach and a set of practices, not a single technology. A responsive page may resize, rearrange, or relocate content to suit the available space. For example, a multi-column article can become one column on a narrow viewport while keeping its information and functions available.
As an Amazon Associate I earn from qualifying purchases.
The viewport is the area in which a browser presents a page. In continuous media, the CSS width media feature corresponds to the viewport width, including a rendered scrollbar when present. [W3C Media Queries Level 4]
Where the term came from
In his May 25, 2010 article “Responsive Web Design,” designer Ethan Marcotte described an approach to serving an expanding range of devices and viewing contexts without making a separate site for each. He summarized its original technical ingredients as “Fluid grids, flexible images, and media queries,” while emphasizing that it also required a different way of thinking. [A List Apart]
#1 Best Overall
Fluid grids
Fluid grids use flexible relationships between areas of a layout, allowing their proportions to change with the available space instead of relying on a rigid, fixed-width canvas.
Flexible images
Flexible images fit within their containers and can scale down when the layout narrows, helping prevent image content from forcing the page wider than the viewing area.
Media queries
Media queries let styles respond conditionally to characteristics of the display environment, such as viewport width. They are one way to adapt a layout, not a requirement for every responsive page.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →How responsive layouts adapt
A responsive design does more than proportionally shrink a desktop page. It can change the arrangement of elements when there is no longer enough room for the original layout. A multi-column page might stack its columns, for instance, while preserving access to the same content.
Marcotte’s three-part formulation remains a useful account of the idea’s origins, but it is not a checklist that every current implementation must follow. Modern CSS layout methods can be responsive by nature, and layouts can also use flexible grids, relative units, and minimum or maximum values. Media queries can help, but MDN notes that they are not required in every case. [MDN Web Docs]
The W3C’s Media Queries Level 4 document describes a standards-based way to test characteristics of a user agent or display and apply styles conditionally. Its publication status is Candidate Recommendation Draft; W3C says that publication at this stage does not imply endorsement by W3C or its members. [W3C Media Queries Level 4]
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Responsive design and accessibility
Responsive behavior can help people use a page at narrow viewports or when they enlarge content, but responsiveness alone does not prove that a site is accessible or conforms to WCAG. Accessibility depends on whether users can still perceive and operate the content and features, among other requirements.
WCAG 2.1 Success Criterion 1.4.10, Reflow, requires vertically scrolling content to be presentable at a width equivalent to 320 CSS pixels without loss of information or functionality and without requiring scrolling in two dimensions, subject to an exception for content whose meaning or use requires a two-dimensional layout. The guidance explains that 320 CSS pixels corresponds to a starting viewport width of 1280 CSS pixels at 400% zoom. It also specifies a separate 256 CSS pixel height provision for horizontally scrolling content. These are accessibility thresholds, not the definition of responsive design. [W3C WAI: Understanding Reflow]
Some content, such as data tables, maps, diagrams, or interfaces, may need a two-dimensional presentation. That exception does not mean the rest of a page can ignore reflow: surrounding content and information inside those structures may still need to adapt so users retain access to them.
Quick Recap
What responsive web design is not
- It is not just a smaller desktop page. Layouts may rearrange or relocate content rather than only scale it down.
- It is not synonymous with mobile-first design. Mobile-first is one approach within responsive design, not another name for the whole concept. [MDN Web Docs]
- It is not a guarantee of accessibility. Responsive behavior can support reflow, but it does not by itself establish WCAG conformance. [W3C WAI]
- It is not tied to one device model or a mandatory set of techniques. The goal is to adapt presentation to the viewing context; implementations can use different CSS methods to do so.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
