Responsive web design
Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
WordPress Power Toolkit: Harness AI to build next-level websites
Responsive design is a web-design technique that adapts page layout and content presentation to the viewer's screen size.
- How it is used
- Supports mobile-friendly WordPress sites by adapting layout and interactions across screen sizes.
- How deep it goes
- Defines responsive rearrangement and gives theme-selection and multi-device testing steps without implementation code.
- Examples
- Uses horizontal-to-vertical menus and testing on phones, tablets, laptops, and monitors.
- What you can do after
- Apply it via a responsive WordPress theme and verify readable, tappable layouts on several devices.
Math for Web Design
A responsive layout adapts the arrangement and sizing of interface elements to changing viewport or device conditions.
- How it is used
- Frames adaptable layout design as a practical application of percentages, viewport units, constraints, and CSS functions.
- How deep it goes
- Develops breakpoints, proportional layouts, viewport units, fluid CSS functions, and clamp() interpolation, while deferring responsive typography.
- Examples
- Uses fixed-width mobile overflow, a 768px breakpoint, calc(100% − 2rem), and percentage-based liquid-layout calculations.
- What you can do after
- Build it from scratch by expressing layout changes as proportional, conditional, and bounded CSS relationships.
Read how Math for Web Design explains responsive web design →
CSS in Depth, Second Edition
The responsive web is an approach to web presentation in which layouts and dimensions adapt to varying devices, viewports, and user settings.
- How it is used
- Deploys responsive layout techniques to keep pages usable across mobile, tablet, desktop, and varying browser widths.
- How deep it goes
- Explains relative units, media-query scaling, and breakpoint-based columns through worked panel and layout examples.
- Examples
- Uses a scalable panel, root font-size breakpoints, and a three-column layout that stacks below 650 px.
- What you can do after
- Build responsive pages by combining relative sizing, media queries, and content-driven layout breakpoints.
Read how CSS in Depth, Second Edition explains responsive web design →
Web Design Playground, Second Edition
Responsiveness is the ability of a web page layout to adapt effectively to different screen sizes and device orientations.
- How it is used
- Adapts page structure and content so visitors can use a site across screen sizes without horizontal scrolling.
- How deep it goes
- Explains prerequisites, fluid layouts, media queries, mobile-first priorities, images, fonts, and measurements through guided examples.
- Examples
- Uses a grid with a hidden quotation sidebar on smartphones and a portfolio page needing breakpoints for smaller screens.
- What you can do after
- Build it from scratch by configuring the viewport, starting mobile-first, and adding media-query layout changes for wider screens.
Read how Web Design Playground, Second Edition explains responsive web design →
Web Design Playground
A page layout approach that adapts to different screen sizes and contexts using flexible measurements, fluid grids, and media queries.
- How it is used
- Frames adaptable page design as a way to keep content readable, usable, and navigable across screen sizes.
- How deep it goes
- Defines the approach and assembles relative units, flexible grids, media queries, mobile-first design, viewport setup, images, and typography.
- Examples
- Uses a fixed-width-to-liquid-layout exercise, tablet and smartphone views, and a portfolio page needing media-query breakpoints.
- What you can do after
- Build it from scratch with flexible layout rules, viewport configuration, media queries, and responsive image and type treatments.
Read how Web Design Playground explains responsive web design →
Design for Developers
Responsive web design is an approach that adapts a website's layout and presentation to different screen sizes, orientations, and device contexts.
- How it is used
- Adapts web layouts so users receive a usable, cohesive experience across desktop, tablet, phone, and other screen contexts.
- How deep it goes
- Explains the shift from scaled desktop pages to fluid layouts, then compares CSS Grid, Flexbox, and optional media-query breakpoints.
- Examples
- Uses scaled desktop pages, a hero with three columns, and 12-column, 8-column, and 4-column grid mock-ups.
- What you can do after
- Build fluid layouts and choose deliberate breakpoints for interfaces whose components need tighter responsive control.
Read how Design for Developers explains responsive web design →
D3.js in Action, Third Edition
Responsive web design is an approach to building websites that adapts layout and presentation to different screen sizes and devices.
- How it is used
- Adapts digital data visualizations for different screens, devices, and interaction modes.
- How deep it goes
- Explains mobile-first and desktop-first strategies plus concrete layout adaptations, while deferring any one-size-fits-all solution.
- Examples
- Uses resized labels, fewer axis ticks, removed secondary information, responsive grids, changed chart orientation, and adapted legends.
- What you can do after
- Apply it via D3 by adapting visualization labels, axes, layouts, information density, orientation, and supporting elements to screen size.
Read how D3.js in Action, Third Edition explains responsive web design →
Related concepts
- media queryuses · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
- mobile-first layoutuses · Mobile-first layout is a responsive design approach that establishes styles and structure for small screens before adapting them for larger screens.
- fixed-width layoutcontrasts with · A fixed-width layout is a presentation layout whose primary dimensions remain fixed rather than adapting automatically to the available display or viewport width.
- fluid layoutuses · A fluid layout is a web layout whose dimensions adapt continuously to changes in available viewport space.
- relative valueuses · A relative value expresses a quantity in relation to a contextual reference quantity rather than as an absolute value.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.