M
Mobile-First
70 % des Web-Traffics ist mobil. Wir designen zuerst für Mobile, skalieren dann zu Desktop - nicht umgekehrt.
Ein praxisnaher Guide zu modernem Responsive Webdesign: von Mobile-First über Breakpoints und Touch-UX bis zur Performance - mit den Tools und Patterns, die wir täglich einsetzen.
Worauf es 2026 ankommt - und was sich gegenüber den Bootstrap-Templates von 2015 geändert hat.
70 % des Web-Traffics ist mobil. Wir designen zuerst für Mobile, skalieren dann zu Desktop - nicht umgekehrt.
CSS clamp() für skalierende Typo statt fester Breakpoint-Sprünge. Verhält sich zwischen Devices ruhiger.
Komponenten reagieren auf ihren Container, nicht auf den Viewport. Ermöglicht modularere Layouts.
Buttons min. 44×44px, Hover-Effekte als Nice-to-have, primäre Interaktionen Tap-optimiert.
Vier Schritte, die wir bei jedem Projekt durchlaufen.
375px Default-Width. Erst hier Klarheit zur Hierarchie und Content-Reduktion.
Tablet (768px), Desktop (1280px), Wide (1440px+). Drei zusätzliche Breakpoints, nicht mehr.
Real-Device-Test auf iPhone, iPad, Android-Mid-Range. Browser-DevTools sind nur ein Proxy.
Core Web Vitals auf 4G prüfen, nicht auf Desktop-Wifi. Realität ist langsamer als Tests.
Statt 6 - 8 Breakpoints aus Bootstrap-Tagen reichen heute 3 - 4: 375px (Mobile), 768px (Tablet), 1024px (Small Desktop), 1280px (Standard Desktop). Mit Fluid-Typography und Container-Queries werden harte Breakpoint-Sprünge ohnehin seltener nötig.
CSS-clamp() erlaubt skalierende Schriftgrößen: font-size: clamp(16px, 1.2vw + 12px, 22px). Statt fester Sprünge bei Breakpoints verändert sich die Schrift kontinuierlich mit dem Viewport. Sauberer, ruhiger und weniger Code.
Klassische Media Queries reagieren auf den Viewport. Container Queries reagieren auf den Container, in dem eine Komponente steckt. Eine Card im Sidebar verhält sich anders als die gleiche Card im Haupt-Content. Browser-Support ist 2026 vollständig in allen modernen Engines.
Picture-Element für unterschiedliche Bildauflösungen pro Device. Loading="lazy" für unter dem Fold. Font-Display: swap statt block. Critical CSS inline, Rest async. Diese vier Patterns retten Core Web Vitals fast immer.
Über die Hälfte Ihrer Besucher kommt vom Smartphone. Wir bauen Layouts, die auf dem Handy genauso präzise sitzen wie am großen Monitor – nicht nur irgendwie skaliert.
Bei uns ist das Standard. Jede Site ist responsive, ohne Aufpreis - schon weil rund 70 % der Nutzer mobil unterwegs sind.
Nur wenn Push-Notifications, Offline-Mode oder Native-Features kritisch sind. Sonst reicht eine gute Responsive PWA.
Figma für Design (mit Auto-Layout), Astro/Tailwind für Implementierung, BrowserStack für Real-Device-QA.
Mit Fluid-Typography und Container-Queries reichen heute 3 - 4. Mehr Breakpoints führen zu mehr Aufwand, nicht zu besserem Design.
Wir schauen gemeinsam auf Ihre Situation und sagen Ihnen ehrlich, ob und wie wir helfen können.