Responsive Design

Responsive design is a design and development approach in which websites adapt fluidly to the user's screen size — same HTML, different layout per viewport. The term was coined in 2010 by Ethan Marcotte around three technical building blocks: fluid grids (percentage widths instead of fixed pixels), flexible images (max-width: 100%), and media queries (CSS rules that trigger at specific breakpoints). Today responsive design is no longer optional — Google has used mobile-first indexing since 2019, meaning the mobile version is the basis for rankings. 60–70% of B2C traffic and 40–55% of B2B traffic comes from smartphones. Running a desktop-optimized site with a separate m.* mobile URL today loses both rankings and users. The modern approach is mobile-first design: layout and content priority are designed first for 375 px screens, then expanded via progressive enhancement for tablet (768 px) and desktop (1280 px+). Technical best practices: Tailwind breakpoints or CSS container queries, rem units instead of px for typography, SVG instead of PNG for icons (scales losslessly), srcset images for different DPIs, touch-friendly hit targets (min. 44 × 44 px), form inputs with correct type attribute for mobile keyboards (type="email", inputmode="tel"). The most common mistakes: building desktop design first and "squeezing" it onto mobile (resulting in tiny text and horizontal scroll), fixed-positioned elements blocking half the mobile screen, tap targets under 40 px, performance bloat from unused desktop assets on mobile. Core Web Vitals are closely tied to responsive design: LCP, INP, and CLS are measured primarily on mobile and directly affect rankings.