Was ist Responsive Webdesign?

Es gibt Webseiten, die zwar auf dem PC überzeugen, aber schlichtweg eine Zumutung für mobile Nutzer sind – Responsive Webdesign ist die Lösung. Bei dieser Art von Webdesign passt sich Deine Webseite an das mobile Endgerät an. Wir erklären Dir, was genau unter Responsive Webdesign zu verstehen ist und warum es so unglaublich wichtig ist.

Inhalt

• Definition: Was ist Responsive Webdesign?
  • Adaptive Layout vs. Responsive Layout
• Warum ist eine responsive Webseite so wichtig?
  • Usability & User Experience
  • Stärkung des Image
  • Google Mobile First Index & Suchmaschinenranking
• Responsive Webdesign – So funktioniert’s
• Fazit – Responsive Design

Definition: Was ist Responsive Webdesign?

Die meisten Webseiten sind zu groß für den kleinen Bildschirm von mobilen Endgeräten wie Smartphone, Tablet & Co. Responsive Webdesign (RWD) stellt sicher, dass sich das Design und die Inhalte Deiner Webseite an das jeweilige Gerät flexibel anpassen. „Responsive“ bedeutet „reagierend“ bzw. „reaktionsfähig“.

Aber wie genau kann sich das Design dynamisch an die Größe des Bildschirmes anpassen? Grob gesagt: Mittels Umbruch des Layouts der Webseite an sogenannten Breakpoints. Media Queries fragen die Anforderungen des Endgerätes ab, auf dem die Webseite aufgerufen wird und ermöglichen so die optimale Darstellung auf jedem Gerät. Die Größe und Anordnung von Bildern, Texten, Videos, Navigation (Menüleiste) und Design-Elementen passen sich zudem variabel an den jeweiligen Viewport an. Dadurch wird der Inhalt bzw. Content übersichtlich dargestellt und kann ohne viel Scrollen von Nutzern aufgenommen werden.

Aber auch die Art der Interaktion mit der Webseite ist responsive. So unterscheiden sich Klick oder Eingabemethode von Desktop zu mobil: Was auf dem PC ein Überfahren (Mouseover) ist, kann auf dem Smartphone ein Klick mit dem Finger sein. Mehr zu der Technik hinter Responsive Webdesign (RWD) findest Du im Abschnitt „Responsive Webdesign – Wie funktioniert’s“.

Das lästige Erstellen und Programmieren von mehreren Ansichten (Layouts / Designs) einer Webseite für verschiedene Geräte sind dank Responsive Webdesign hinfällig. Denn damit optimierst Du Deine Webseite einmal für alle Endgeräte, statt wie zuvor nur für bestimmte.

Adaptive Layout vs. Responsive Layout

Wir haben es schon kurz angesprochen: Vor Responsive Webdesign (RWD) wurde für jedes relevante Gerät ein Layout erstellt. Um die wichtigsten Darstellungen abzudecken werden meist die am häufigsten genutzten mobilen Endgeräte wie iPhone, iPad, Samsung Smartphones und andere Android Geräte herangezogen. Anhand derer Bildschirmgrößen und -auflösungen werden bestimmte Breakpoints für die Optimierung der Layouts definiert. Und nur an diesen Breakpoints reagiert das Layout. Diese Layouts werden Adaptive Layouts genannt – „adaptiv“ also „anpassungsfähig“.

Reaktionsfähige Layouts (Responsive Design) und deren Content-Elemente (Text, Bilder, Videos uvm.) wiederum passen sich dynamisch und stufenlos an die Geräte an. Hier liegt der entscheidende Unterschied zum Adaptive Webdesign.

Warum ist eine responsive Webseite so wichtig?

Usability & User Experience

„Ich google das kurz“ – Eine Aussage, die jeder von sich kennt, ob Zuhause oder unterwegs. Das Smartphone ist schnell gezückt, wenn einem der Name des einen Schauspielers von Game of Thrones nicht einfällt oder wie man die Kaffeemaschine richtig entkalkt.

Eine Webseite sollte daher optimal an die Größe des Viewports angepasst sein. Ist das Design nicht responsive, wird dem User die Desktop-Version angezeigt. D.h., dass der Content extrem klein dargestellt und erst mit starkem Heranzoomen ersichtlich wird.

Benutzerfreundlichkeit und User Experience sind unglaublich wichtig: Denn ist Deine Webseite nicht mobil optimiert, gibt es genug andere zur Auswahl, die es sind. Statt auf der Seite zu bleiben und mit mühevollem Scrollen an die Inhalte zu kommen oder zum Beispiel einen Kauf zu tätigen, verlässt der Nutzer sie und schaut sich woanders um. Es gilt: Je nutzerfreundlicher Deine Webseite ist, desto eher nimmt der User Dein Angebot in Anspruch.

Auch wenn Deine Kunden Deine Webseite größtenteils über Desktop aufrufen, solltest Du großen Wert auf Responsive Design legen. Jeder mobile Nutzer, der abspringt, ist ein verlorener Kunde.

Stärkung des Images

Apropos User Experience: Hat der Nutzer eine positive Erfahrung mit Deiner Webseite gemacht, so ist die Wahrscheinlichkeit groß, dass er erneut auf Deine Expertise vertraut und Deine Seite besucht oder weiterempfiehlt. Ist ihm jedoch ein schlechtes Bild in Erinnerung geblieben, da Deine Webseite nicht mobil optimiert ist, wird er vermutlich das nächste Mal einen großen Bogen um diese machen. Ein sehr nachvollziehbares Beispiel sind Online Shops: Du willst unbedingt ein weißes T-Shirt kaufen, kommst aber erst gar nicht bis zum Warenkorb, da der Button trotz mehrfachem Klicken einfach nicht funktionieren will.

Eine mobile friendly Webseite suggeriert Professionalität und hilft somit, das Image Deines Unternehmens bei bestehenden und potenziellen Kunden zu stärken.

Google Mobile First Index & Suchmaschinenranking

Eigentlich ist Responsive Design keine Wahl mehr: Mit dem Google Mobile First Index bewertet die größte Suchmaschine Webseiten nun ausschließlich anhand ihrer mobilen Version, nicht mehr nach der Desktop-Ansicht. Die mobile Optimierung hat also – neben weiteren SEO-Faktoren – starken Einfluss auf Deine Positionierung in den Google Suchergebnissen. Mehr dazu kannst Du in unserem Blogbeitrag „Mobile First Index – Google stellt jetzt vollständig um“ nachlesen.

Responsive Webdesign – so funktioniert’s

Zunächst einmal müssen die Seiteninhalte priorisiert werden: Da Smartphones natürlich einen kleineren Viewport als Desktops haben, können nicht alle Informationen gleichermaßen dargestellt werden. Wirklich wichtiger Content sollte in der mobilen Version weit oben platziert sein, während weniger relevante Inhalte unten Platz nehmen dürfen. Einklapptexte sind zudem eine gute Option für mehr Übersichtlichkeit und Struktur.

Vielen Webseitenbetreibern fällt es schwer, den meist über Jahre aufgebauten und ausführlichen Content ihrer Seite auf das Wesentliche zu reduzieren. Eine gute Werbeagentur hilft bei der Priorisierung mit Fokus auf die Bedürfnisse Deiner relevanten Zielgruppe.

Kontakt aufnehmen

Nun zur Technik: Voraussetzung für Responsive Design sind CSS3 Media Queries. Diese fragen den Gerätetyp und die Eigenschaften der Ausgabengeräte (Smartphone, Tablet usw.) ab. Zu den Kriterien zählen Breite und Höhe des Viewports, Auflösung, Hoch-/Querformat und Eingabemethode (Touchscreen, Tastatur). Die Breite der Seite ist durch Pixelwerte genau festgelegt und passt sich in Relation an die Maße des jeweiligen Gerätes an. Auch Bilder, Videos und Texte sind in ihrer Größe flexibel. Im Code werden zudem die bereits erwähnten Breakpoints definiert, an denen sich das Layout orientiert. Zum Beispiel kann hier festgelegt werden, dass bei mobiler Ansicht die Navigation eingeklappt und ein Design-Element mit 3 Boxen untereinander statt nebeneinander platziert ist.

Fazit – Responsive Design

Was damals noch mühselig mit der Erstellung vieler Website Layouts für verschiedene mobile Endgeräte einherging, ist dank Responsive Webdesign (RWD) nun um ein Vielfaches einfacher. Natürlich ist die Programmierung eines responsiven Designs dennoch zu Beginn einer neuen Webseite (Launch) und auch bei der nachträglichen Optimierung eines bestehenden Webdesigns (Relaunch) mit viel Aufwand verbunden – dazu zählen ebenfalls mehrere Tests, um die optimale Darstellung und Funktion der Webseite zu garantieren. Allerdings wird dieses lediglich einmal aufgesetzt und ist direkt mit allen Ausgabegeräten kompatibel. Mithilfe der Media Queries wird das jeweilige Gerät „gescannt“ und die definierten Breakpoints legen fest, an welchen Punkten das Layout angepasst werden muss, um ein möglichst hohes Kundenerlebnis und ideale Benutzerfreundlichkeit zu sichern.

Nicht nur um den Erwartungen der mobilen Nutzer gerecht zu werden, sondern auch um die Kriterien von Suchmaschinen wie Google & Co. zu erfüllen und für eine gute Positionierung der eigenen Seite, ist eine mobile bzw. responsive Webseite unverzichtbar – ja sogar fast Pflicht.

---

Hast Du noch Fragen zum Thema Responsive Webdesign oder möchtest Du Deine Webseite für mobile Endgeräte optimieren lassen? Sprich uns gerne an – unsere Webdesigner und Programmierer helfen Dir gerne weiter.