Responsive Design

Responsive Design ist ein Design- und Entwicklungs-Ansatz, bei dem sich Websites fließend an die Bildschirmgröße des Nutzers anpassen — dasselbe HTML, unterschiedliches Layout je nach Viewport. Geprägt wurde der Begriff 2010 von Ethan Marcotte mit drei technischen Kernbausteinen: Fluide Grids (prozentuale Breiten statt fixer Pixel), flexible Images (max-width: 100 %), und Media Queries (CSS-Regeln, die bei bestimmten Breakpoints greifen). Heute ist Responsive Design nicht mehr optional — Google nutzt seit 2019 Mobile-First-Indexing, das heißt die mobile Version ist die Basis für Rankings. 60–70 % des Traffics im B2C und 40–55 % im B2B kommen von Smartphones. Wer heute noch eine Desktop-optimierte Site mit separater m.*-Mobile-URL betreibt, verliert sowohl Rankings als auch Nutzer. Der moderne Ansatz ist Mobile-First-Design: Layout und Content-Priorisierung werden zuerst für 375 px-Screens entworfen, dann per progressive enhancement für Tablet (768 px) und Desktop (1280 px+) erweitert. Technische Best Practices: Tailwind-Breakpoints oder CSS Container Queries, rem-Units statt px für Typographie, SVG statt PNG für Icons (skaliert verlustfrei), srcset-Bilder für unterschiedliche DPIs, touch-taugliche Hit-Targets (min. 44 × 44 px), Formular-Inputs mit korrektem type-Attribut für mobile Keyboards (type="email", inputmode="tel"). Die häufigsten Fehler: Desktop-Design zuerst bauen und "irgendwie mobil quetschen" (resultiert in winzigem Text und horizontalem Scroll), fix positioniertes Elemente die auf Mobile den halben Screen blockieren, tap-Targets unter 40 px, Performance-Bloat durch ungenutzte Desktop-Assets auf Mobile. Core-Web-Vitals sind eng mit Responsive Design verknüpft: LCP, INP und CLS werden primär auf Mobile gemessen und beeinflussen Rankings direkt.