Responsive Design: Definition, Ziele, Tools

Aktualisiert am 25.01.2023
Lesezeit ca. Min.

Im Alltag werden mobile Geräte für uns zunehmend wichtiger. Wir haben unser Smartphone immer dabei und sind zu jeder Zeit bereit, schnell etwas zu googeln. Somit ist es inzwischen eine Grundvoraussetzung, dass Webseiten auch auf mobilen Geräten einwandfrei funktionieren.

Das stellt viele Webmaster vor eine große Herausforderung: Webseiten müssen für eine stetig größer werdende Anzahl von Geräten und Bildschirmgrößen ausgelegt sein. Sind sie das nicht, sind viele Funktionen nicht mehr nutzbar, die Grafik verrutscht und die Texte sind nicht lesbar.

Um dem entgegenzuwirken, solltest du dich mit dem Thema Responsive Design beschäftigen. Mit dieser Herangehensweise kannst du deine Webseite für die verschiedensten Bildschirme optimieren und deinen Webseitenbesuchern somit zu jeder Zeit eine bestmögliche User Experience bieten.

Wie dir das gelingt und was es dabei zu beachten gibt, erfährst du in diesem Artikel.

Responsive Design: Was ist das?

Ist deine Webseite responsive, dann reagiert sie auf das Gerät, von dem aus sie aufgerufen wird. Das heißt: Öffnet ein Nutzer deine Webseite auf einem Desktop-PC, wird sie so dargestellt, dass sie auf diesem Bildschirm ideal genutzt werden kann.

Möchte ein anderer Nutzer von seinem Smartphone aus auf deiner Webseite surfen, sieht diese mitunter ganz anders aus. Denn sie hat sich an den kleineren Bildschirm angepasst und hat nun ein anderes Layout. Dass dies einwandfrei funktioniert, ist heutzutage viel wichtiger, als viele Webmaster denken.

Wieso ist das Responsive Design heutzutage so wichtig?

Beobachtet man Internetnutzer, lässt sich seit einigen Jahren eine große Veränderung in ihrem Nutzerverhalten beobachten: Sie steigen zunehmend auf die Nutzung von mobilen Geräten um. Konnten viele Menschen früher nur über einen Computer das Internet nutzen, haben nun sehr viele Menschen Smartphones und Tablets immer mit dabei. Deshalb laufen sie den Desktop-PCs nach und nach den Rang ab.

Eine Umfrage aus dem Juli 2020 liefert hierzu interessante Kennzahlen. Die Befragten sollten sich dazu äußern, über welche Geräte sie das Internet nutzen. 82,6 % der Teilnehmer gaben an, dafür ein Handy oder ein Smartphone zu nutzen. 66,1 % setzen auf Notebooks und Laptops. Nur etwas mehr als die Hälfte (51,8 %) gab an, mit einem PC auf das Internet zuzugreifen. Immerhin 32,7 % nutzen einen Tablet-PC.

Über welches Endgerät wird das Internet genutzt?

Aus dieser Befragung geht hervor, dass vor allem die mobilen Geräte sehr beliebt sind. Gleichzeitig werden auch PCs noch häufig verwendet. Das heißt für dich: Du kannst dich nicht nur auf ein Gerät konzentrieren. Nutzer können theoretisch von den verschiedensten Endgeräten auf deine Webseite zugreifen.

Abgesehen davon haben Smartphones nicht alle dieselbe Bildschirmgröße. Sie können zudem im Hoch- und im Querformat gehalten werden. Du solltest also zusehen, dass dein Design flexibel ist und sich an die verschiedensten Gegebenheiten anpasst. Nur dann stellst du alle Webseitenbesucher mit deinem Layout zufrieden.

Du solltest dir in diesem Zusammenhang auch die Frage stellen, was passiert, wenn deine Seite eben nicht korrekt angezeigt wird. Es gibt immer noch viele Webauftritte, die nicht mobile-friendly sind. Das heißt, dass sie nur auf die Nutzung auf einem PC ausgelegt sind.

Werden sie von einem Smartphone aus geöffnet, verrutscht das Layout und einige Bestandteile können mitunter nicht mehr genutzt werden. Oftmals kommt es vor, dass das Menü nicht geöffnet werden kann.

Dies zieht zum einen den Frust der Nutzer auf sich. Sie ärgern sich darüber und besuchen eventuell die Webseite der Konkurrenz. Zum anderen senden sie durch ihr Abwandern ein schlechtes Signal an Google – und das wirkt sich auch auf dein Ranking aus. Genaueres dazu erfährst du im nächsten Kapitel.

Wann ist ein Responsive Design wichtig für meine Webseite?

Deine Webseite ist quasi ein Aushängeschild für dein Unternehmen. Stell sie dir wie ein Schaufenster in der Stadt vor: Hier gewinnen Kunden einen ersten Eindruck von dir. Und ein Schaufenster würdest du sicher niemals dreckig oder unaufgeräumt präsentieren – du würdest es pflegen und dich dort im besten Licht präsentieren. Genau so solltest du es auch mit deiner Webseite halten.

Deshalb ist ein Responsive Design für jede Webseite wichtig. So gut wie alle Zielgruppen verfügen heutzutage über mobile Geräte. Selbst die ältere Generation nutzt inzwischen Smartphones. Du solltest deine Webseite also in jedem Fall responsive gestalten.

In einigen Fällen ist dies sogar besonders wichtig. Wenn du weißt, dass deine Zielgruppe häufig mobile Geräte nutzt, muss in der mobilen Version alles passen. Ebenso verhält es sich bei technikaffinen Nutzern. Ihnen wird es sofort negativ auffallen, wenn deine Webseite nicht mobile-friendly ist.

Du kannst dir sicher sein, dass dieser Trend in den kommenden Jahren weiter zunehmen wird. Beobachtet man die Entwicklungen der letzten Jahre, lässt sich ganz klar erkennen, dass mobile Geräte Jahr für Jahr an Bedeutung gewinnen. Ein Ende dieser Umstände ist erstmal nicht in Sicht.

Ziele, Techniken und Herausforderungen von Responsive Design

Nun weißt du, wieso es so enorm wichtig ist, dass deine Webseite responsive ist. Bleibt die Frage, wie dies technisch umzusetzen ist und wie das auch andere Aspekte rund um eine Webseite beeinflusst. Denn Responsive Design heißt nicht nur, eine Website für verschiedene Bildschirmgrößen zu optimieren. Es gehört noch einiges mehr dazu.

Wie funktionieren responsive Webseiten?

Eine Webseite mit einem Responsive Design hat ein flüssiges Raster. Das heißt, dass sich ihr Design an die jeweilige Größe anpassen kann. Du kennst dies sicher: Du öffnest deine Webseite in einem Browser und änderst die Breite oder die Höhe des Fensters. Eine responsive Seite reagiert darauf und verändert ihr Design so, dass es sich an die neue Größe anpasst.

Das kann sie, da die einzelnen Elemente (Texte, Bilder, Videos etc.) flexibel sind. Nicht nur ihre Größe, sondern auch der Platz, an dem sie sich befinden, ändern sich in Abhängigkeit zur Bildschirmgröße. Zudem werden im CSS-Code Breakpoints gesetzt. Mit diesen werden Auflösungen definiert, bei denen sich das Seitenlayout ändert. Verkleinerst du dein Browser-Fenster, kann es sein, dass bestimmte Elemente ihren Platz ändern. Befand sich ein Foto vorher am rechten Seitenrand, rutscht es in einem kleineren Fenster beispielsweise unter den Text. Im Breakpoint legst du fest, ab welcher Pixelgröße dies geschehen soll.

Damit deine Webseite weiß, auf welchem Gerätetyp sie geöffnet wird, fragt sie diesen über Media-Queries ab. Darüber werden dann auch spezifische Eigenschaften dieses Geräts übermittelt, woran sich das Layout dann anpassen kann.

Beeinflusst dies die SEO?

Ob eine Webseite ein Responsive Design hat oder nicht, wirkt sich definitiv auf die Suchmaschinenoptimierung aus. Dafür gibt es gleich mehrere Gründe. Einen davon haben wir weiter oben schon angesprochen: die User Experience.

Öffnet ein Nutzer deine Webseite und klickt sich durch verschiedene Artikel und Untermenüs, ist das für Google ein sehr gutes Zeichen. Besucher bleiben lange auf deiner Seite – sie scheint relevant und hilfreich zu sein. Google hat verschiedene Ranking-Faktoren für die Platzierung in den Suchergebnissen. Die Verweildauer ist einer davon.

Denn Google geht davon aus, dass Webseiten mit einer hohen Verweildauer Mehrwert liefern. Deshalb werden sie dann besser in den Suchergebnissen platziert. Nutzer bleiben aber nur dann lange auf der Seite, wenn sie einwandfrei funktioniert. Ist das nicht der Fall, verlassen sie diese nach nur wenigen Sekunden. Das sendet ein schlechtes Signal an Google.

Google geht dann davon aus, dass die Webseite keinen Mehrwert liefert, unkomfortabel ist oder nicht die versprochenen Inhalte präsentiert. Und solche Seiten sollen Usern in den Suchergebnissen natürlich nicht präsentiert werden.

Du entgehst diesem Problem mit einem Responsive Design. Denn wird deine Webseite auf allen Geräten korrekt angezeigt, mindert das die Absprungrate deutlich. Natürlich beeinflussen auch andere Faktoren wie der Content oder die Page Speed diese Rate – aber es ist eine Grundvoraussetzung, dass Nutzer auf allen Geräten deine Seite einwandfrei nutzen können.

2015 hat Google eine Art Leitfaden für Webseitenbetreiber veröffentlich. Mit den Google Quality Rater Guidelines wird deutlich, wie wichtig mobile-friendly Webseiten sind. Denn in diesem ausführlichen Guide wird unter anderem beschrieben, anhand welcher Faktoren Google erkennt, dass eine Webseite auch leicht auf mobilen Geräten bedient werden kann.

Zu diesen zählt beispielsweise, dass die Texte auch auf kleinen Bildschirmen gut zu lesen sind. Zudem sollten Links leicht mit dem Finger angeklickt werden können. Dies sind nur zwei Faktoren von einer ganzen Reihe weiterer Indikatoren.

Macht die Einstellung „Mobile First“ wirklich Sinn?

Rund um das Thema Responsive Design taucht auch immer wieder der Begriff „Mobile First“ auf. Damit ist gemeint, dass eine Webseite zuerst für mobile Geräte entwickelt wird und dann für PCs. Grundsätzlich ist diese Überlegung nicht verkehrt. Denk an die Statistik aus dem ersten Kapitel zurück: Nutzer greifen hauptsächlich über mobile Geräte auf das Internet zu.

Es ist heutzutage aber nicht mehr empfehlenswert, mehrere Versionen einer Webseite zu erstellen. Vielleicht hast du schon einmal beobachtet, dass viele Webseiten auf dem Smartphone die URL http://m.webseite.de haben.

An dem „m“ erkennst du, dass du gerade die mobile Version der Webseite nutzt. Auf dem PC würdest du eben eine andere Version nutzen. Was auf den ersten Blick wie eine ganz gute Idee erscheint, bringt einige Nachteile mit sich. Denn du musst beide Webseiten pflegen. Das heißt, dass jede Änderung oder Ergänzung zweimal durchgeführt werden muss. Das kostet Zeit und ist außerdem fehleranfällig.

Zudem ist dieses System nicht gerade zukunftsorientiert. Denn sollte irgendwann ein neues Format hinzukommen, müsstest du wieder eine neue Webseite bauen. Folglich hättest du einen noch größeren Aufwand, der dich noch mehr Zeit kostet.

So verhält es sich auch, wenn du nicht nur eine Webseite betreust, sondern gleich mehrere. Es erleichtert dir deine Arbeit also ungemein, wenn du gleich auf ein Responsive Design setzt. Die Kosten dafür sind in der Regel etwas höher, dafür sparst du dir aber viel Zeit und Arbeit.

Tools: So überprüfst du, ob deine Webseite wirklich responsive ist

Bevor du deine responsive Webseite veröffentlichst, solltest du sie genauestens unter die Lupe nehmen. Denn nur allzu gerne schleichen sich Fehler in die Programmierung ein und beeinträchtigen, wie deine Webseite angezeigt wird.

Es gibt einige Tools, mit denen du dies überprüfen kannst. Du kannst deine Webseite natürlich auch selbst auf verschiedenen Geräten aufrufen, es wird dir aber kaum möglich sein, sie auf allen möglichen Bildschirmgrößen zu testen. Deshalb stellen wir dir nun drei Tools vor, mit denen du das Responsive Design deiner Webseite überprüfen kannst.

Responsively

Bei Responsively handelt es sich um ein Open-Source-Tool – das heißt, dass der Quellcode offen einsehbar ist. Er kann somit von jedermann auf unsichere Stellen untersucht werden. Das Tool kannst du unter Windows, Mac und Linux verwenden.

Responsive Design Screenshot

Mit Responsively wird dir deine Webseite auf Bildschirmen mit verschiedenen Größen angezeigt. Wirklich praktisch: Das geschieht simultan. Du siehst also mehrere Varianten deiner Webseite auf einen Blick und kannst sie miteinander vergleichen. Möglicherweise gefällt dir ein bestimmtes Layout besser und du entdeckst einen kleinen Fehler.

Du kannst dafür auch den Elements Inspector nutzen. Mit diesem untersuchst du einzelne Elemente mit nur einem Klick – das gilt dann auch wieder für die verschiedenen Bildschirme. Responsively stellt dir 30 Größen zur Verfügung. Du kannst diese aber um individuelle Gerätemaße erweitern, wenn du ganz auf Nummer sicher gehen möchtest.

Wirklich praktisch ist auch die integrierte Screenshot-Funktion und das Hot Reloading – dabei wird nur die veränderte Komponente neu geladen und nicht die gesamte Seite. Du kannst Responsively einfach in deinen Browser integrieren. Es steht für Firefox, Chrome und Edge zur Verfügung und kann einfach auf der Webseite heruntergeladen werden. Dabei ist es kostenlos.

Sizzy

Auch bei Sizzy stehen dir umfangreiche Optionen zur Verfügung. Das Tool bietet dir verschiedene Viewport-Größen – du kannst deine Webseite also in den verschiedensten Größen durchleuchten. Mit dabei sind auch praktische Screenshot-Funktionen und das Universal Inspect Element. Mit diesem untersuchst du die einzelnen Bildschirmgrößen gleichzeitig. Das spart Zeit und verschafft dir eine gute Übersichtlichkeit.

Responsive Design Screenshot

Anders als Responsively ist Sizzy kostenpflichtig. Die Kosten richten sich nach der Anzahl der Lizenzen. Eine Lizenz kostet 5 $ pro Monat, 10 Lizenzen kosten 39 $ im Monat. Davor steht dir eine 14-tägige Testphase zur Verfügung. Sizzy kannst du auf Windows, Mac und Linux verwenden.

Polypane

Polypane bietet dir ebenfalls verschiedene Viewport-Größen – von mobilen Bildschirmen bis hin zu großen Monitoren. Du kannst diese nebeneinander anschauen und alle Versionen deiner Webseite auf einen Blick erfassen. Dabei hilft dir auch der enthaltene Universal Inspect Mode. 

Responsive Design Screenshot

Praktischerweise bietet dir Polypane auch die Möglichkeit, die Breakpoints in deinem CSS auszulesen und die Viewports dafür anzuzeigen. Aktiviere dabei das Live CSS und greife simultan auf das CSS aller offenen Bildschirmgrößen zu. Änderungen werden somit kinderleicht umgesetzt.

Du kannst Polypane unter Windows, Mac und Linux nutzen. Du kannst das Tool zunächst 14 Tage kostenlos testen. Danach richten sich die Kosten nach der Anzahl der Nutzer. Ein Nutzer kostet 9 € pro Monat und kann Polypane auf drei Geräten gleichzeitig verwenden. 10 Nutzer kosten 39 € – jeder Nutzer kann das Tool dann ebenfalls auf drei Geräten nutzen.

Fazit: Responsive Design ist ein absolutes Muss für deine Webseite

Egal in welcher Branche du tätig bist oder wer deine Zielgruppe ist: Deine Webseite muss responsive sein. Wenn du deine Nutzer und Google zufriedenstellen möchtest, führt daran kein Weg vorbei. Denn du musst einfach damit rechnen, dass von allen möglichen Geräten aus auf deine Webseite zugegriffen wird. Mit einem Responsive Design bist du darauf bestens vorbereitet und wirst allen Bildschirmgrößen gerecht.

Quellen:

Weitere Artikel