CSS/HTML Myth-Busting: Why Your 'Responsive' Site Is Probably Broken

Everyone says they build responsive sites. Most are lying. The truth is, a meta tag and a couple of media queries don't cut it. You need a real system—one that respects users, their devices, and their preferences. Here's how to fix the lies you've been told.

Is responsive design just about mobile?

No. Responsive design is about adapting to any viewport—phone, tablet, laptop, or a window squished to half your screen. The core is fluid grids, flexible images, and media queries, often built mobile-first (MDN Web Docs). If you're only thinking about phones, you're missing the point.

Do I need to target every device with specific breakpoints?

Stop chasing devices. Breakpoints should be added when content demands them, not at some magic list of 375px, 768px, 1024px, and 1440px (MDN Web Docs). If your layout breaks at 900px, that's your breakpoint. Don't force a tablet layout because a spec says so.

Is the viewport meta tag enough?

Not even close. The viewport meta tag tells mobile browsers to match the device width, but it's just the start (MDN Web Docs). You still need fluid grids, flexible images, and careful typography. And for that, use relative units like percentages, fr, em/rem, and viewport units—not fixed pixels (MDN Web Docs).

Does dark mode have to be a separate design?

No. Build a light theme by default, then override colors inside a @media (prefers-color-scheme: dark) block (MDN Web Docs). That honors the user's system preference without duplicating your entire stylesheet. And if you're worried about contrast, remember WCAG requires at least 4.5:1 for normal text and 3:1 for large text (WCAG 2.1).

Is container queries the future or a gimmick?

Container queries are real, and they're here. They let components respond to their container, not just the viewport, so the same card works in a sidebar or a wide column (MDN Web Docs). It's Baseline Widely available since February 2023 (MDN Web Docs). If you're still only using media queries, you're missing a huge flexibility win.

Is it okay to use color alone to convey meaning?

No. About 1 in 12 men have color vision deficiency (NEI). If your form says "required fields are in red," you're failing those users. Pair color with labels, icons, or patterns (WCAG 2.1). Always. No excuses.

Do I really need to worry about touch targets?

Yes, and the standards are clear. WCAG 2.2 requires at least 24 by 24 CSS pixels (W3C WCAG 2.2), but Apple recommends 44 by 44 points (Apple HIG), and Android says 48 by 48 dp (Android Developers). Let's be honest: 24 is the minimum, not the goal. Aim for 44 or 48 to avoid fat-finger rage.

Is lazy loading a performance silver bullet?

No, but it helps. The loading="lazy" attribute defers off-screen images and iframes until the user scrolls near them, which can speed up initial load (MDN Web Docs). But it's not a substitute for proper image compression. For example, lossy AVIF images are about 50% smaller than JPEGs, and WebP is 25-35% smaller (MDN Web Docs). Use srcset and sizes to serve the right size, and always set width and height to avoid layout shifts (MDN Web Docs).

Quick tip: Use font-display: swap so text shows immediately, even if the web font loads late (MDN Web Docs).

What's the one thing to remember?

Responsive design is not a checkbox. It's a mindset: build with flexible grids, respect user preferences, and never rely on color alone. Your users—and your conscience—will thank you.

Sources

• MDN Web Docs - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
• WCAG 2.1 (AA) - https://www.w3.org/WAI/WCAG21/quickref/
• MDN Web Docs (@container) - https://developer.mozilla.org/en-US/docs/Web/CSS/@container
• W3C WCAG 2.2 Understanding Target Size (Minimum) - https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
• NEI (National Eye Institute) - https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness
• MDN Web Docs (Image types) - https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types