Mobile-first architecture with fluid type scales, container queries, and WCAG 2.1 AA compliance baked in. Core Web Vitals land green on launch, not after a three-month optimization pass.
The old definition of responsive design — three breakpoints, a mobile menu, images that shrink — has been overtaken by what modern CSS makes possible. Fluid type scales with clamp, container queries that size components to their parent rather than the viewport, logical properties that handle RTL without branching, and a mobile-first media-query strategy that matches Google's indexing model. One build, every viewport, no mobile-only subdomain, no separate desktop site, no pages that break between the breakpoints.
clamp() and container queries — not three breakpoints and pray.clamp).Typography scales smoothly between a minimum and maximum size without viewport-width breakpoints. font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem) produces continuous type that reads at every size.
Components respond to their parent's width, not the viewport. A product card at 320px wide in a mobile sidebar and 800px wide in a feature strip uses the same component with different layouts. MDN reference.
Default styles target the smallest screen; @media (min-width) progressively enhances for larger screens. Matches Google's mobile-first indexing model and is structurally easier to maintain than desktop-down.
margin-inline-start, padding-block-end instead of margin-left, padding-bottom. The layout flips correctly for right-to-left languages without rewriting CSS. Critical for international expansion.
srcset, AVIF, lazy loading).<picture> with AVIF + WebP + JPG fallbacks, srcset for resolution variants, explicit width/height to prevent layout shift, loading="lazy" below the fold.
Grid replaces float- and flex-based hacks for 2D layouts. Subgrid (shipped in every browser by 2023) aligns nested grids to a parent's tracks, solving the "cards that line up across columns" problem cleanly.
Performance and accessibility validated at every milestone, not in a post-launch retrofit. PageSpeed Insights for CWV, WAVE for accessibility, axe DevTools in CI on every PR.
Core Web Vitals (LCP under 2.5s, CLS under 0.1, INP under 200ms) and WCAG 2.1 AA compliance are build-time checks in our engagements, not post-launch optimization passes. Every pull request runs through a performance budget and an accessibility lint; pages that regress either do not ship. The Website Audit tool, Color Contrast Checker, and Heading Outliner are the same tools our engineers use internally during builds.
A responsive build can be the entire site, a single page, or a retrofit on a desktop-first template that no longer works. The right shape depends on the gap between current and target, not on the size of the brand. We turn down full rebuilds when a retrofit is cheaper, faster, and as effective.
2 weeks. One responsive page or major site section. Used as a proof-of-build before a larger rebuild, or as a one-off for a campaign page that has to load fast on mobile.
6-10 weeks. Complete site rebuild on modern responsive architecture. Right when the existing site predates container queries (2022) or CWV is structurally broken at the build layer.
3-5 weeks. Make an existing desktop-first site work on mobile without rebuild. Right when content + brand work but CSS predates 2020. Cheapest path to mobile-first indexing without losing SEO equity.
Mobile-first is not a style preference — it matches Google's mobile-first indexing. Start with the 320-414px viewport, layer progressive enhancement up through tablet and desktop. The mobile rendering is what Googlebot sees first.
The order matters. Designing desktop-first and shrinking it down for mobile produces sites that work on big screens and fail on phones. We invert the sequence and the constraints force good decisions: if the navigation works on a 320-pixel screen, the desktop nav is easy; if the hero loads in 2.5 seconds on a throttled mid-tier Android, every other device is faster.
Design files in Figma at 360px and 768px before any desktop frame. Forces decisions about which content is essential and which is enhancement.
Each component built as a standalone unit with container-query rules. Stored in Storybook for review. The site composes from the library, not the other way around.
A budget of total JS (≤200 KB), total CSS (≤80 KB), hero image (≤200 KB AVIF), and font payload (≤50 KB subset). Pull requests that exceed the budget fail CI.
Every page tested on real iPhone SE (smallest still-shipping iOS), iPad, low-end Android, MacBook 13″, and ultrawide via BrowserStack. Throttled 4G profile required to pass.
Final pass through PageSpeed Insights, WAVE, and axe-core. Pages that fail any of LCP/CLS/INP or WCAG AA do not deploy.
Six failure modes show up repeatedly in responsive-design audits. Fixed-width thinking. Pixel-based type. Mobile-only nav stuck on tablet. Touch targets under 44×44px. Forms breaking on narrow viewports. Tables that overflow horizontally. Each one is caught in the build phase, not the QA phase.
Hard-coded widths in pixels (320px, 1200px) break the moment the parent shrinks. Use percentages, fluid units, or container queries instead.
A dropdown that opens on hover is invisible on touch devices. Every hover behaviour needs a tap-equivalent or it does not exist on mobile.
WCAG 2.5.5 minimum is 44px; we recommend 48px. Buttons smaller than this fail accessibility AND lose conversion on mobile from accidental missed taps.
Missing width and height attributes cause layout shift as images load. Single largest source of CLS failures. Set both attributes always.
A horizontal menu of 8 items has nowhere to go on a 360px screen. Plan the mobile nav before the desktop one; never as an afterthought.
Embedded videos and animations need a parent with explicit aspect-ratio (16/9). Without it, the iframe collapses or jumps. CLS killer.
The questions teams ask most before booking a responsive redesign: breakpoint strategy, container queries vs media queries, accessibility scope, performance budget, testing devices, and pricing.
Responsive web design means a single codebase that adapts to every screen size and device without separate mobile and desktop versions. In 2026 the baseline has moved past the old three-breakpoint model. Modern responsive design uses fluid type scales (CSS clamp), container queries (component-level responsiveness independent of viewport), logical properties (for LTR/RTL), and mobile-first media queries that progressively enhance for larger screens. The goal is one build that serves a 320px phone, a 1920px monitor, a 3840px TV, and everything in between.
Two structural reasons. One, mobile traffic exceeded desktop traffic for most ecommerce categories in 2019 and has stayed there; a desktop-first design optimized for the minority is backwards. Two, Google switched to mobile-first indexing in 2021, meaning the mobile version of your site is what Google crawls and ranks. A site that is desktop-fast but mobile-slow loses ranking. Mobile-first design enforces the constraint that matters: if the small screen works, the big screen is easy; the reverse is not true.
Container queries let a component respond to the width of its parent container, not the viewport. A card component at 400px wide in a sidebar looks different from the same card at 800px wide in a feature section, without any viewport media query involved. This unlocks real component reuse across layouts and is the biggest responsive-design shift since CSS Grid. All modern browsers now support container queries natively; we use them by default on every project since mid-2024.
Four discipline points baked into the build. One, images in AVIF or WebP with width and height attributes set and lazy loading below the fold (kills CLS and LCP). Two, fonts served with font-display: swap, subset to only Latin or Latin+Cyrillic if applicable. Three, critical CSS inlined for the first paint, rest loaded asynchronously. Four, third-party scripts (analytics, chat widgets, Klaviyo) deferred or loaded after interaction. The Core Web Vitals targets (LCP under 2.5s, CLS under 0.1, INP under 200ms) are a build-time check, not a post-launch optimization pass.
WCAG 2.1 AA is baked in, not audited after. Color contrast checked against 4.5:1 for normal text and 3:1 for large text and UI. Tap targets 48 by 48 pixels minimum per WCAG 2.5.5. Heading order preserved. Visible focus indicators on every interactive element. Form labels programmatically associated. Alt text on every non-decorative image. Skip-to-content link. These are requirements of the build, not upgrades.
Three engagement shapes. A single landing or section ships in 2 weeks. A full responsive rebuild typically takes 6 to 10 weeks depending on page count and component complexity. A responsive retrofit (making an existing desktop-first site responsive without full rebuild) takes 3 to 5 weeks and is the right call when the underlying CMS and content architecture are already sound. We recommend the retrofit when the brand and content are working but the build predates 2020 CSS.
Mobile-first, accessibility-first, CWV-budgeted. Written scope and fixed-price quote in 48 hours of the brief call.
Senior Brand Designer · New-york · 8 posts on the site
Published · Last updated .