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. Da Google die Core Web Vitals als Ranking-Signal wertet, gehört ein responsives Layout für uns untrennbar zur technischen SEO einer Website.
Der Begriff Responsive Web Design wurde 2010 von Ethan Marcotte geprägt. Die Grundidee ist bis heute dieselbe: Eine einzige Webseite passt sich flexibel an die jeweilige Bildschirmgröße an, statt für jedes Endgerät eine eigene Variante zu pflegen. Dieselbe HTML-Struktur wird auf Smartphones, Tablets und Desktop-Computern ausgeliefert, und erst CSS3 entscheidet über das Layout für den jeweiligen Viewport. Technisch tragen drei Bausteine das Konzept: ein flexibles Raster aus Spalten, die sich prozentual mitskalieren, Bilder die nie breiter werden als ihr Container, sowie Media Queries, die je nach Bildschirm unterschiedliche Regeln greifen lassen.
Davon zu unterscheiden ist der ältere, adaptive Ansatz. Beim adaptiven Webdesign liefert der Server für bestimmte Endgeräte fest definierte Layout-Stufen aus, etwa getrennt für Smartphone und Desktop-Version. Beim responsive Webdesign dagegen reagiert ein und dasselbe Markup stufenlos auf jede Bildschirmgröße dazwischen. Für die meisten Projekte ist der responsive Weg der robustere, weil er auch Viewports abdeckt, die heute noch gar nicht existieren. Wer schon einmal eine separate mobile Website parallel zur Hauptseite pflegen musste, kennt den doppelten Wartungsaufwand, den genau dieser Ansatz vermeidet. Wenn Sie ohnehin neu starten, planen wir Responsive von Anfang an mit ein, sobald wir eine Website erstellen lassen.
Ein gutes Layout muss heute eine enorme Spannweite an Endgeräten abdecken: vom Smartphone in einer Hand über Tablets und Notebooks bis zu sehr großen Bildschirmen mit weit über 1440 Pixeln Breite. Auf kleinen Mobilgeräten geht es vor allem um Benutzerfreundlichkeit unter realen Bedingungen, also Touch-Bedienung, begrenzte Bandbreite und ablenkungsreiche Umgebungen. Auf großen Bildschirmen entsteht dagegen leerer Raum, der bewusst gestaltet werden will, statt Inhalte einfach in die Breite zu ziehen. Als Team für Webdesign aus Heidelberg planen wir beide Enden dieser Skala von Anfang an mit, statt eine Desktop-Version nachträglich für Mobilgeräte zu stauchen. Saubere, semantische Hypertext Markup Language in der Variante HTML5 bildet dabei das Fundament, auf dem Cascading Style Sheets das Verhalten in jedem Webbrowser steuert, egal über welche Internet-Verbindung die Seite geladen wird.
Ü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. Auch eine klar konvertierende Landing Page bringt mobil oft mehr als eine eigene App.
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.
Adaptive liefert für einzelne Endgeräte feste Layout-Stufen aus, etwa eine getrennte Desktop-Version und eine Mobile-Variante. Responsive Webdesign nutzt eine HTML-Basis, die sich stufenlos an jede Bildschirmgröße anpasst. In der Praxis ist der responsive Weg wartungsärmer, weil er auch unbekannte künftige Viewports abdeckt.
Ja, das ist das Ziel. Wir prüfen jedes Layout auf Smartphones, Tablets und großen Bildschirmen sowie in allen gängigen Webbrowsern. Da dieselben Cascading Style Sheets auf jedes Endgerät reagieren, bleibt die Benutzerfreundlichkeit überall vergleichbar, auch bei schwankender Bandbreite.
Wir schauen gemeinsam auf Ihre Situation und sagen Ihnen ehrlich, ob und wie wir helfen können.