Responsive design is a set of behaviours, not a collection of device screenshots. A robust interface responds to available space, content length, media, reading order and input mode. The common failure is to design a desktop composition first and then patch it at familiar device widths instead of letting the content reveal where each component actually needs to change.
Mistake 1: Choosing breakpoints from device names
A breakpoint should exist because the layout needs to change, not because a device category begins. MDN describes breakpoints as the points where layout changes and recommends responsive techniques based on flexible grids, relative units and media queries.
Mistake 2: Treating mobile as a scaled desktop
Three columns, a side rail and a wide media treatment may work at 1400px. On a narrow screen the right response is often reflow, reprioritisation or a different interaction—not simply smaller text and narrower cards.
- Choose a deliberate stacking order.
- Retune display type for line length and wrapping.
- Provide a mobile strategy for wide tables and navigation.
- Reduce or move decorative media when it competes with critical content.
Mistake 3: Breaking source order to match a desktop composition
CSS Grid and Flexbox can visually reorder content, but assistive technology and keyboard navigation can still expose the DOM order. Establish a meaningful reading/source order first, then build visual layouts that respect that structure across breakpoints.
If a two-column hero becomes a single column, the mobile reading order should not feel like an accidental side effect of the desktop grid.
Mistake 4: Hard-coding component dimensions around placeholder content
| Fragile | More resilient |
|---|---|
| Fixed card height | Content flow + min-height where useful |
| Fixed button width | Padding + sensible constraints |
| One-line title assumption | Real 2–3 line content tests |
| Absolute positioning for primary layout | Normal flow + grid/flex |
Localisation, CMS content and text resizing all expose fixed-height assumptions quickly. A component that only works with the design-file copy is not yet production-ready.
Mistake 5: Making media visually responsive but not network responsive
A 2000px image scaled down to 320px with CSS fits the viewport but can still waste bandwidth. Responsive-image tools such as `srcset`, `sizes` and `<picture>` let the browser select a more appropriate source. web.dev also recommends explicit width/height attributes so space can be reserved before the image loads.
- Use responsive source candidates for large content images.
- Use art direction when the crop itself needs to change.
- Do not lazy-load the critical above-the-fold/LCP image by default.
- Lazy-load below-the-fold media.
- Reserve image geometry to reduce layout shifts.
Mistake 6: Designing essential interactions around hover only
Touch input does not map cleanly to mouse hover, and keyboard users need focus behaviour. If card information, menus or controls only exist in a hover state, the responsive system is incomplete. Treat hover as an enhancement and provide an explicit focus/tap/click path for important information.
Mistake 7: Thinking only in page-level viewport breakpoints
A component can appear in a full-width page, narrow sidebar, modal or embedded surface. Designing every component as mobile/tablet/desktop can become brittle. The more useful question is what available space or content constraint changes the component’s behaviour.
Modern responsive CSS increasingly supports flexible component-level layouts that need fewer device-specific media queries. MDN specifically notes that Grid and Flexbox can create responsive layouts without a media query in some cases.
Mistake 8: Testing only exact design presets
Real users do not browse at only 375, 768 and 1440 pixels. Drag the viewport continuously and look for intermediate widths where headings wrap badly, buttons collide, decorative shapes cause horizontal scroll or tables overflow.
- Long URLs and unbroken strings
- Tables and code/data blocks
- Absolute decorative elements
- SVG/video intrinsic dimensions
- Sticky/fixed headers on short screens
- Translated copy that expands beyond the design-file sample
A responsive QA checklist
- Resize continuously
Do not rely only on named-device presets.
- Stress-test real content
Use long titles, translated copy and missing/optional fields.
- Navigate by keyboard
Check focus and source order.
- Test touch behaviour
Find hover-only or tiny controls.
- Throttle the network
Verify that mobile users are not downloading unnecessary large assets.
- Look for horizontal overflow
Track the exact component that causes the page to widen.
- Resize text
Check whether fixed heights or truncation hide content.