Was ist Responsive Webdesign, warum ist Mobile First kein Trend mehr, und wie kommen Dinos in den Artikel?

Kurz gesagt

Responsive Webdesign beschreibt den flüssigen Wechsel zwischen verschiedenen Geräten und Auflösungen. Stelle dir vor, du hast deine Webseite in einem kleinen Browserfenster geöffnet und ziehst dieses mit deinem Cursor auf. Bilder, Texte, Schriftgrößen, Boxen etc. verschieben sich nahezu magisch, stets in die perfekte Ansicht. Früher war das noch nicht so, da gab es zu Beginn des Internetzeitalters eine Größe für Desktop-Geräte, später noch eine eigene für Smartphones. Dazwischen sah es eher gruselig aus, manchmal stoßen wir noch heute auf solche Dino-Funde.

Einleitung

Ich erinnere mich noch gut an die erste Anfrage zu einer responsiven Webseite, vor etwa zehn Jahren. Genau genommen kam die Anfrage gar nicht vom Kunden: Die ersten Entwicklungen zeichneten sich in den USA ab, und Google hatte Responsive Webdesign kurz zuvor offiziell als Rankingfaktor anerkannt. Wir haben dem Kunden damals nahegelegt, die Seite responsiv zu bauen. Fun Fact am Rande: Diese Webseite läuft heute noch, es handelt sich um Automobile Antwerpen.

Inzwischen ist die korrekte Darstellung auf allen Geräten selbstverständlich. Interessant ist deshalb weniger das Ob als das Wie.

Was bedeutet Responsive Webdesign?

Responsive Webdesign beschreibt den flüssigen Wechsel zwischen verschiedenen Geräten und Auflösungen. Ein Layout reagiert flexibel auf den verfügbaren Platz, statt in getrennten Fassungen für Desktop und Mobil zu existieren.

Technische Grundlage sind CSS Media Queries, mit denen sich unterschiedliche Darstellungen für unterschiedliche Bildschirmbreiten definieren lassen. Flexbox und CSS Grid machen das deutlich flexibler als frühere Ansätze.

Der offensichtliche Vorteil liegt auf der Hand: Die Webseite sieht auf jedem Endgerät gut aus, mit allen Effekten und einer passenden Darstellung. Es gibt aber einen zweiten, weniger offensichtlichen Vorteil, und der betrifft die Gestaltung selbst.

Warum sollte man mit dem kleinen Bildschirm anfangen?

Weil Mobile First zur Priorisierung im Webdesign-Prozess zwingt. Mobil passen eben nicht 5 Themen rein, sollten sie aber auch nicht bei Desktop.

Neben Responsive Webdesign hört man dann häufig im Buzzword-Bingo: "Mobile First". Das ist die Gegenantwort an die starre Desktop-Auflösung. Hier optimieren Webdesign-Agenturen und Freelancer die Ansicht zuerst für das Smartphone. Der gängigste Grund dafür ist neben der optimierten Ansicht auch die Bevorzugung von Google mit Blick auf organische Sichtbarkeit: Eine optimierte Mobile-Page wird eher ausgespielt als der Dino aus dem Beispiel oben.

Für uns gibt es aber einen viel wichtigeren Grund: die Priorisierung im Webdesign-Prozess. Was wir damit meinen? Wenn man bei einem Webdesign-Relaunch erstmal die mobile Page perfekt machen muss und möchte, muss man genau abwägen, was im ersten Bildschirm zu sehen ist und was im nächsten. Vergrößert man dann in der Gestaltung von der perfekten Page hin zu Desktop, bekommt das Design Luft und Weißraum und wird automatisch hochwertig und premium.

Deshalb empfehlen wir Mobile First auch Kunden mit überwiegend Desktop-Zugriffen, was im deutschen B2B-Geschäft häufig vorkommt. Mehr dazu, welche Stellschrauben eine bestehende Website verbessern, steht in unserem Beitrag zu den zwölf Stellschrauben.

Was hat Mobile First mit der Sichtbarkeit bei Google zu tun?

Google bewertet Websites seit der Umstellung auf Mobile-First-Indexing primär anhand ihrer mobilen Fassung. Was auf dem Smartphone schlecht funktioniert, rankt auch in der Desktop-Suche schlechter.

Konkret heißt das: Die Core Web Vitals, also Ladezeit, Reaktionsfähigkeit und visuelle Stabilität, werden auf mobilen Geräten gemessen und fließen in die Bewertung ein. Eine mobil schlecht optimierte Website verliert damit doppelt, bei den Nutzern und in der Suche.

Welche Breakpoints braucht eine Website?

Mindestens zwei für mobile Geräte und zwei für Desktop, üblicherweise 1366 und 1920 Pixel Breite. Eine Zwischengröße für Tablets kommt dazu, wenn das Projekt es verlangt.

Je nach Umfang und Budget empfehlen wir, nicht nur mit einem einzigen mobilen Breakpoint zu arbeiten. Die Tablet-Größe wird von Kunden häufig nicht priorisiert und ergibt sich bei etwa 80 Prozent unserer Projekte aus den beiden definierten Layouts in der Programmierung. Darstellungsprobleme, die dabei entstehen, ziehen wir später im Cross-Browser-Testing glatt.

Wir prüfen aber in der Testumgebung auch "unangenehme" Zwischengrößen, sodass wir sicherstellen können, dass alle Widgets von ganz klein bis ganz groß perfekt dargestellt werden und auch voll in Funktion sind.

Warum scheitert Responsive Design in der Praxis trotzdem oft?

‍Selten an der Technik, meistens an der Organisation. Wenn Layouts von Menschen geliefert werden, die keine Webdesigner sind, entstehen Lücken genau dort, wo niemand hinschaut: zwischen den definierten Größen.

Sobald man sich wirklich kleine Screens in mindestens einem, besser zwei Breakpoints anschaut, dazu zwei Desktop Screens, und wirklich über "heikle" Layouts nachdenkt, und später mit der gleichen Intention, am besten mit den beteiligten Webdesignern testet, ist man immer auf der sicheren Seite.

Die Ausgangslagen bei Unternehmen können aber nicht unterschiedlicher sein. Erst kürzlich hat uns ein sehr großes Unternehmen wegen eines Audits mit Blick auf Responsive Design angefragt. Die Ausgangslage dort: Es gibt ein Branding- und Designteam, das sich um dieses kümmert. Neue Unternehmenssparten und Unterseiten werden aber von den Projektmanagern, wenn es gut geht, einmal in Mobile und einmal in Desktop an die IT geliefert. Dieser Approach deckt viele Status "dazwischen" schlicht nicht ab. Und Know-how rund um responsive Systeme ist im Projektmanagement oft auch nicht so ausgeprägt wie bei Webdesignern.

Wie testet man eine Website auf allen Geräten?

Mit Cross-Browser-Testing nach der Preview, auf echten Geräten und virtuellen Maschinen, und zwar entlang der tatsächlichen Nutzerzahlen statt nach Gefühl.

Wir prüfen vorab die Analytics- oder Matomo-Daten, optimieren darauf und ergänzen um Branchenstandards für das jeweilige Einsatzland. Sobald die Webseite befüllt ist, geht es Seite für Seite durch. Dafür lagern wir physische Geräte in unserem Münchner Büro, arbeiten mit virtuellen Maschinen und nutzen BrowserStack, um Gerät- und Browserkombinationen abzudecken, die wir nicht selbst im Haus haben.

Vollständig ausschließen lassen sich Sonderfälle trotzdem nie. Ein Beispiel, über das ich bis heute schmunzele: Nach einem Relaunch rief der Geschäftsführer eines Münchner Architekturbüros an, sehr zufrieden, mit vielen lobenden Worten. Einen Kritikpunkt hatte er aber, und ich zitiere: "Auf meinem Siebener funktioniert die Webseite noch nicht so optimal." Wir waren damals in der Ära des iPhone 7, also haben wir gesucht und gesucht und keinen Fehler gefunden. Bis sich herausstellte, dass er seinen neuen Siebener BMW meinte, in dessen Bordbrowser die Seite nicht sauber lief. Auch das hat unsere Entwicklung behoben. Der Kunde konnte seine Webseite danach nicht nur auf Mobil, Tablet und Desktop ansehen, sondern auch im Auto.

Welche Fehler sehen wir am häufigsten?

Fünf, und alle fünf sind ohne Spezialwissen erkennbar.

1. Text zu klein zum Lesen.
   Wer zoomen muss, um Fließtext zu entziffern, hat ein Problem. Als Mindestgröße auf mobilen Geräten gelten 16 Pixel.
2. Klickbare Elemente zu eng beieinander.
   Auf Touchscreens brauchen Schaltflächen und Links ausreichend Fläche und Abstand, Google empfiehlt als Richtwert etwa 48 mal 48 Pixel pro Ziel. Ich weiß nicht, ob es an meiner Fingergröße liegt, aber hier fallen die meisten Webseiten schlicht raus, spätestens im Footer, wenn Datenschutz, Impressum, AGB und Co. alle eng an eng zusammenkleben. Wie weit das Thema über die reine Fingergröße hinausgeht, steht in unserem Beitrag zum Barrierefreiheitsstärkungsgesetz.
3. Inhalte breiter als der Bildschirm.
   Sobald horizontal gescrollt werden muss, liegt ein grundsätzliches Layoutproblem vor.
4. Bilder ohne Optimierung.
   Für Desktop dimensionierte Bilder, die unverkleinert auf Mobilgeräten geladen werden, kosten spürbar Ladezeit. Wie wir das lösen, steht in unserem Beitrag zum Vergleich von Baukasten und Custom Theme.
5. Schwierige Inhalte, die niemand getestet hat.
   Große Tabellen, mehrstufige Formulare, Checkout-Prozesse und interaktive Elemente sind auf dem Desktop schnell gebaut und auf dem Smartphone der häufigste Bruchpunkt. Genau diese Bereiche gehören in jede Testrunde, und zwar vollständig durchgeklickt, nicht nur angesehen.

Wie prüfe ich selbst, ob meine Website responsive ist?

Am schnellsten mit Lighthouse in den Chrome DevTools. Googles früherer Mobile-Friendly-Test existiert nicht mehr, Google hat ihn samt API und dem Mobile-Usability-Bericht in der Search Console Ende 2023 eingestellt.

Drei Wege, die funktionieren:

Chrome DevTools: Rechtsklick, "Untersuchen", dann auf das Gerätesymbol klicken. Dort lassen sich verschiedene Bildschirmgrößen simulieren.

Lighthouse: In denselben DevTools als eigener Reiter enthalten. Liefert Messwerte zu Performance, Barrierefreiheit und Best Practices, jeweils für Mobil und Desktop getrennt.

PageSpeed Insights. Unter pagespeed.web.dev, mit echten Nutzerdaten, sofern genug Traffic vorhanden ist.

Der ehrlichste Test bleibt aber der eigene: die Website auf dem eigenen Smartphone öffnen und alle wichtigen Seiten durchklicken. Formular ausfüllen, Telefonnummer antippen, Menü öffnen. Was dabei hakt, hakt auch bei euren Kunden.

Häufige Fragen

Was ist der Unterschied zwischen Responsive und Adaptive Design?‍

Responsives Design passt sich stufenlos an jede Bildschirmgröße an. Adaptives Design liefert mehrere feste Layouts für bestimmte Geräteklassen. Responsive ist heute der Standard, weil es flexibler ist und weniger Wartung erfordert.

Warum ist Mobile First wichtig für SEO?

Seit der Umstellung auf Mobile-First-Indexing bewertet Google Websites primär anhand ihrer mobilen Fassung. Eine schwache mobile Darstellung kostet Rankings, auch in der Desktop-Suche.

Wie teste ich, ob meine Website responsive ist?

Mit Lighthouse und der Gerätesimulation in den Chrome DevTools sowie mit PageSpeed Insights. Googles Mobile-Friendly-Test wurde Ende 2023 abgeschaltet und steht nicht mehr zur Verfügung.

Ist responsives Webdesign ein Aufpreis?

Nein. Bei einer Neuentwicklung gehört es zum Standard und wird nicht separat berechnet. Anders sieht es aus, wenn eine bestehende, nicht responsive Website nachgerüstet werden soll: Der Aufwand hängt stark vom Zustand des vorhandenen Codes ab, und häufig ist ein Relaunch wirtschaftlicher als die Sanierung.

Was sind Breakpoints?

Breakpoints sind die Bildschirmbreiten, ab denen das Layout wechselt. Moderne Ansätze setzen sie dort, wo der Inhalt es verlangt, statt an feste Gerätegrößen. Wir arbeiten in der Regel mit zwei mobilen Breakpoints sowie 1366 und 1920 Pixel für Desktop.

Gilt das auch für B2B-Websites mit wenig mobilem Traffic?

Ja, aus zwei Gründen. Erstens bewertet Google unabhängig vom tatsächlichen Nutzerverhalten die mobile Fassung. Zweitens, und das ist uns wichtiger: Der Mobile-First-Ansatz verbessert auch das Desktop-Ergebnis, weil er zur inhaltlichen Priorisierung zwingt.

Wird es Zeit, sich von meiner Dino-Page zu lösen?‍

Wenn du nicht gerade einen Dinosaurier-Park führst, sondern so wie wir damit eine eingestaubte Webseite verstehst, die nicht responsive ist, dann definitiv: Du verlierst viele Potentiale und vor allem Kundinnen und Kunden.