Free tools Windows power users keep installed
One-click scans. No signup required.
Responsive web design is a flexible way to keep content usable as the viewport, device, and viewing conditions change. It is not a fixed list of phone, tablet, and desktop widths. Start with content and a fluid layout, then introduce media or container queries only when the layout or component needs to change. The best examples—The Guardian, Tattly, and the historical Boston Globe redesign—show that responsiveness is as much about information hierarchy and review habits as it is about CSS.
What is responsive web design?
Responsive design makes a page adapt to available space while preserving access to its important information. The original model combined three technical ingredients: fluid grids, flexible images, and media queries. Ethan Marcotte described those ingredients while also stressing that responsive work requires “a different way of thinking” (A List Apart, 2010).
Modern CSS extends that model with Flexbox, Grid, the picture element, and container queries. The goal remains the same: content should reflow, controls should remain usable, and optional visual detail should not crowd out essential meaning.
Responsive is therefore an approach, not a device preset or a single technology. A page can be fluid between breakpoints, switch to a different arrangement at a breakpoint, or let individual components respond to their own containers.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Three published examples—and the design decisions behind them
The Guardian: add visual density when space allows
A List Apart’s description of The Guardian’s responsive cinematic timelines shows images appearing above a wider breakpoint. The images were enhancements, not information required to understand the timeline. This is a sound pattern: preserve the narrative at narrow widths, then add visual richness when there is room.
- What changes: optional imagery and visual density.
- What stays: the timeline’s essential information and sequence.
- Review question: if the image is removed, can a reader still understand the story?
This is a historical published example, not an audit of the Guardian’s current website.
Tattly: simplify navigation at narrow widths
The same A List Apart article describes Tattly reducing navigation to primary sections and hiding a submenu on smaller screens. A compact navigation can make a header usable, but “hidden” must not mean “unreachable.” Provide a clear control, preserve keyboard access, expose the submenu state, and ensure omitted links can still be found.
- What changes: navigation hierarchy and visible link count.
- What stays: routes to important sections.
- Review question: can users discover every necessary destination without relying on a hover-only interaction?
BostonGlobe.com: review across devices early
A Book Apart’s 2011 listing describes the Boston Globe redesign as presenting journalism on any digital device with a browser in a clean, reader-friendly format (historical publisher listing). In a later interview, designer Ethan Marcotte explained that the project led him to bring devices into design reviews early and to question the idea of one canonical, “true” design (A List Apart interview).
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchThe transferable lesson is process: inspect real content at multiple widths before a desktop composition hardens into the specification. The sources describe the historical redesign; they do not establish how the current live site behaves.
Fluid layouts, breakpoints, and the right query
Let the layout flex first
MDN describes responsive design as an approach for layouts that work across device sizes and resolutions (MDN responsive design). Use flexible tracks, percentages, minmax(), Flexbox, and sensible maximum widths so the page can absorb intermediate widths instead of jumping between many presets.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
img, video {
max-width: 100%;
height: auto;
}
This kind of rule handles many widths without knowing whether a visitor has a particular phone or tablet.
Use a media query when the viewport changes the composition
Media queries respond to page-level conditions such as viewport width. MDN recommends choosing breakpoints where the content or layout needs a change, and using relative units when breakpoints are necessary (MDN media queries). For example, a three-column article layout may become one column when the columns become too narrow:
.article-layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
gap: 2rem;
}
@media (max-width: 48rem) {
.article-layout {
grid-template-columns: 1fr;
}
}
Do not choose a breakpoint because it is labelled “tablet.” Choose it because this particular arrangement stops working.
Use a container query when the component’s allocation changes
A media query sees the viewport; a container query sees the space assigned to a component. That distinction matters in reusable cards, sidebars, dashboards, and embedded widgets. A card might be wide in a full-page grid but narrow in a sidebar even when the viewport is unchanged. Container-query guidance is documented by MDN (MDN container queries).
Rank #3
.card-region {
container-type: inline-size;
}
.card {
display: grid;
gap: .75rem;
}
@container (min-width: thirtyrem) {
.card {
grid-template-columns: 8rem 1fr;
align-items: center;
}
}
Replace thirtyrem with a valid numeric value such as 30rem in production; it is written out here only to make the example’s intent obvious. The component should respond to its own available width, not to an unrelated page breakpoint.
| Question | Media query | Container query |
|---|---|---|
| What triggers the change? | Viewport or device conditions | The component’s containing block |
| Best use | Page columns, global navigation, overall spacing | Reusable cards, widgets, modules in different layouts |
| Typical change | Three columns to one; header rearrangement | Horizontal card to stacked card |
How to make a website responsive: a practical workflow
- Inventory the content. Mark what is essential, optional, repeated, or decorative. Do not decide that a headline, form label, navigation destination, or data row can disappear merely because the screen is narrow.
- Build a flexible base. Use semantic HTML, fluid widths, flexible media, Grid or Flexbox, and readable maximum line lengths. Make the narrow layout work before adding enhancements.
- Find natural breakpoints. Resize the page and note where text wraps badly, controls collide, or columns become unusable. Add a breakpoint at that failure point, not at a device-name threshold.
- Choose the controlling context. Use a media query when the page viewport controls the decision; use a container query when the component’s allocated space does.
- Adapt hierarchy deliberately. Collapse navigation with an explicit, keyboard-operable disclosure; move secondary content below the main content; add optional images only where they improve understanding.
- Handle images and media. Use responsive dimensions and, where appropriate,
picturesources so a narrow screen does not download an unnecessarily large asset. Preserve meaningful alternative text. - Test zoom and narrow widths. Check the layout with enlarged text and at narrow viewport widths. Confirm that reading order, focus order, labels, and controls remain understandable.
- Test real content and interactions. Long headlines, translated strings, validation errors, tables, menus, modals, and empty states reveal failures that placeholder text hides.
Responsive design is an accessibility responsibility
W3C WAI advises adapting presentation for different zoom states and viewport sizes. Its reflow techniques include media queries and CSS Grid (W3C WAI CSS techniques). Reflow is only one part of accessibility: responsive styling does not, by itself, prove conformance to every accessibility requirement.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute- Keep essential text, controls, and destinations available at narrow widths and enlarged text.
- Maintain a logical reading and focus order when columns stack or visual positions change.
- Do not communicate state only through color or hover.
- Make compact menus operable with keyboard and assistive technology, including an exposed expanded/collapsed state.
- Check that zoom does not create horizontal scrolling for ordinary text and controls where reflow is expected.
How to compare responsive examples
When reviewing a showcase or an implementation, ask the same questions rather than judging the visual style alone:
| Axis | What to inspect |
|---|---|
| Trigger | Does the change respond to viewport conditions or the component’s container? |
| Between breakpoints | Does the layout remain fluid, or switch among distinct arrangements? |
| Changed material | Are columns, navigation, imagery, or optional density changing? |
| Information access | Is important content still reachable at narrow widths and when zoomed? |
| Evidence quality | Is this a historical description or a verified current implementation? |
Published examples are evidence of a design decision at a point in time, not proof that the site still behaves identically today. Treat screenshots and old case studies as prompts for questions, then inspect the current experience yourself.
Capture responsive states for review
Manual browser checks are essential, but repeatable screenshots help a team compare the same URL at agreed viewport sizes. Capture the narrow, intermediate, and wide states, plus any component-specific state that matters. Record the URL, viewport, device-pixel ratio, theme, and content conditions so a later change is attributable.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
DIY browser method
- Open the page in a current browser and open DevTools’ responsive or device toolbar.
- Set a viewport width at the first observed layout failure, then capture the page.
- Repeat at narrow, intermediate, and wide widths; test zoom and keyboard navigation separately.
- For a component, place it in containers of different widths rather than relying only on full-viewport screenshots.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its clean-shot process accepts cookie or consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
Use the same URL with different viewport, device, theme, wait, or CSS options to create a consistent review set. The API also supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets plus custom viewports, retina scale, PDF paper and page controls, custom CSS and JavaScript, clicks, selector or network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration. See the ScreenshotNeo documentation for the current request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to start.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common responsive failures and fixes
Horizontal scrolling appears
Cause: a fixed-width child, oversized image, long unbroken string, or a transformed element. Fix: inspect the overflowing node, use fluid sizing and max-width: 100%, allow suitable text wrapping, and avoid hiding overflow as a cosmetic fix.
The mobile menu hides essential links
Cause: a desktop submenu was simply removed. Fix: expose a labeled disclosure control, preserve keyboard focus, and verify every important destination remains reachable.
A component breaks in a sidebar
Cause: a viewport media query assumes the component’s width. Fix: establish a containment context and use a container query for the component’s own layout.
Images dominate download or crop badly
Cause: one desktop asset is used everywhere or intrinsic dimensions are missing. Fix: provide responsive sources where useful, reserve space with dimensions, and decide whether the image is essential or an optional enhancement.
Automation captures a popup or blank state
Cause: the page has consent UI, a newsletter prompt, chat widget, bot check, slow network, or an unsuitable wait condition. Fix: use a capture tool’s consent, popup, selector, delay, network-idle, blocking, and verdict controls; inspect the returned billing and page-verdict headers.
Further reading and historical context
Ethan Marcotte’s book established the foundational responsive-design principles; A Book Apart’s publisher page says it no longer sells or distributes books, so availability should be checked elsewhere rather than assumed (A Book Apart). The original article remains useful for its conceptual model, while current MDN and W3C guidance are better references for implementation and accessibility.
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 →Frequently Asked Questions
Is responsive design the same as mobile-first design?
No. Mobile-first is one planning strategy: begin with a constrained layout and add enhancements as space increases. Responsive design is the broader requirement that the experience adapt across available conditions.
Should every component use a container query?
No. Use a container query when the component can be placed in containers of different widths and its own allocation controls the layout. Use a media query for page-level decisions controlled by the viewport.
Are showcase screenshots proof that a site is responsive today?
No. A showcase records a design decision at a particular time. Verify the current implementation, content, zoom behavior, and keyboard interaction before treating it as a present-day example.
Quick Recap
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.
Recommended Free Tools
