Responsive Design Patterns
debt(d5/e5/b5/t5)
Closest to 'specialist tool catches' (d5), Lighthouse and Chrome DevTools device emulation catch responsive issues like horizontal scroll and fixed widths, but only when actively run against multiple viewports.
Closest to 'touches multiple files / significant refactor' (e5), converting desktop-first CSS to mobile-first with fluid units and proper breakpoints requires reworking stylesheets across components, not a single-line fix.
Closest to 'persistent productivity tax' (b5), responsive patterns apply across the entire web frontend and every new component must consider breakpoints and fluid sizing, slowing many work streams.
Closest to 'notable trap' (t5), the misconception that mobile-first means 'build mobile version first' rather than 'min-width media queries from smallest screen up' is a documented gotcha most frontend devs eventually learn.
Also Known As
TL;DR
Explanation
Common responsive patterns: Mostly Fluid (multi-column grid collapses to single column on small screens), Column Drop (columns stack vertically as viewport narrows), Layout Shifter (different layouts at different breakpoints — not just stacking), Tiny Tweaks (minor adjustments — font size, padding — at each breakpoint), Off Canvas (navigation hidden off-screen on mobile, revealed by tap). CSS Grid and Flexbox handle most patterns without media queries using auto-fill, minmax(), and flex-wrap. Container queries (CSS 2023) enable components to respond to their container size, not the viewport.
Common Misconception
Why It Matters
Common Mistakes
- Desktop-first with max-width overrides — complex, bloated CSS for mobile.
- Fixed pixel breakpoints — use content breakpoints (where the design breaks) not device sizes.
- Hiding content on mobile with display:none — content is still downloaded.
- Not testing intermediate viewport sizes — most responsive bugs occur between defined breakpoints.
Code Examples
/* Desktop-first — overrides everywhere for mobile: */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 480px) { .grid { gap: 0.5rem; } }
/* Mobile gets: all desktop CSS + overrides = more code *//* Mobile-first — progressive enhancement: */
.grid { display: grid; gap: 0.5rem; }
@media (min-width: 480px) { .grid { gap: 1rem; } }
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
/* Mobile gets only what it needs */
/* Container queries — component-driven responsiveness: */
@container (min-width: 400px) {
.card { display: flex; flex-direction: row; }
}