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 dieses Blogartikels
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 responsiv. 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.
Das lästige Erstellen und Programmieren von mehreren Ansichten (Layouts / Designs) einer Webseite für verschiedene Geräte wird 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“ im Sinne von „anpassungsfähig“.
Reaktionsfähige Layouts (Responsive Designs) und deren Content-Elemente (Text, Bilder, Videos u. v. m.) 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 wenn man wissen will, 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 entgegen aktueller Tendenzen 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 besteht für Responsive Design keine Wahl mehr: Mit dem Google Mobile First Index bewertet die größte Suchmaschine Webseiten 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.
Responsive Webdesign – so funktioniert’s
Sowohl eine gute Strukturierung des Contents als auch technische Maßnahmen tragen zu einem gelungenen Responsive Webdesign bei:
Auf Content-Ebene 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 aufnehmenNun 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
Eine mobile bzw. responsive Webseite ist heute quasi Pflicht. Denn mit Responsive Webdesign (RWD) wirst Du nicht nur den Erwartungen der mobilen Nutzer gerecht. Du erfüllst zudem die Kriterien von Suchmaschinen wie Google & Co. und sorgst so für eine bessere Positionierung der eigenen Seite.
Was damals noch mühselig mit der Erstellung vieler Website Layouts für verschiedene mobile Endgeräte einherging, ist heute 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.
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.
