Responsive Design: Definition, Ziele, Tools

Von Miriam Prellwitz, geprĂŒft durch Ekaterina Broska (Google- und Hubspot-zertifiziert)
Aktualisiert am 21.06.2024 | 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 einfach erklÀrt

Wie definiert sich Responsive Design? 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 mobile EndgerĂ€te wie Smartphones und Tablets mit dabei. Deshalb laufen sie den Desktop-PCs nach und nach den Rang ab.

Eine Umfrage aus dem Jahr 2023 liefert hierzu interessante Kennzahlen. Die Befragten sollten sich dazu Ă€ußern, ĂŒber welche GerĂ€te sie das Internet nutzen.

  • 89,2 % der Teilnehmer gaben an, dafĂŒr ein Handy oder ein Smartphone zu nutzen.
  • 66,6 % setzen auf Notebooks und Laptops.
  • Etwas unter der HĂ€lfte (43,9 %) gaben an, mit einem PC auf das Internet zuzugreifen.
  • Immerhin 35 % nutzen einen Tablet-PC.
Über welches EndgerĂ€t wird das Internet genutzt? 2023

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 ein mobiles EndgerĂ€t. 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 du dies technisch umsetzt 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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 Aspekte. 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.

Google hat eine Art Leitfaden fĂŒr Webseitenbetreiber veröffentlicht. 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 EndgerĂ€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

Responsive Design Screenshot

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.

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

Responsive Design Screenshot

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. 

  • 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.

HĂ€ufig gestellte Fragen zum Responsive Design

An dieser Stelle beantworten wir hÀufig gestellte Fragen zum Responsive Design.

Quellen:

Weitere Artikel