on

Definition Responsive Webdesign

Responsive Webdesign (oder auch Responsive Design oder responsives Webdesign) beschreibt eine spezielle Art der Webprogrammierung, bei der die Darstellung der Größe und Auflösung des Displays angepasst wird. Responsive Design bedeutet also „reagierendes“ Webdesign. Responsive Webdesign beinhaltet dabei eine Fülle möglicher Anpassungen und Optimierungen: die Anordnung von Inhaltselementen, größere Schriftgrößen auf Retina-Displays, Ausblenden von störenden Inhalten […]

Responsive Webdesign (oder auch Responsive Design oder responsives Webdesign) beschreibt eine spezielle Art der Webprogrammierung, bei der die Darstellung der Größe und Auflösung des Displays angepasst wird. Responsive Design bedeutet also „reagierendes“ Webdesign. Responsive Webdesign beinhaltet dabei eine Fülle möglicher Anpassungen und Optimierungen: die Anordnung von Inhaltselementen, größere Schriftgrößen auf Retina-Displays, Ausblenden von störenden Inhalten auf kleinen Displays, Unterstützung von Wischgesten, uvm. Zum Teil werden für mobile Seiten auch andere Menüs verwendet, zumindest sollten sie aber für eine Touch-Bedienung optimiert sein. Responsive Webdesign kann auch die Bereitstellung von Bildern in unterschiedlicher Auflösung umfassen, z.B. mittels Adaptive Images.

Wie gut eine Webseite für die Nutzung Mobilgeräten wie iPhones und Tabletts optimiert ist, hängt neben dem Umfang der genannten Anpassungen auch davon ab, an welchen Breakpoints sich die Darstellung verändert. So wird beispielsweise aus einer 4-spaltigen Darstellung eine 2-spaltige und dann eine 1-spaltige Darstellung, wobei dabei alle sichtbaren Elemente verändert werden.

Hintergrund und Funktionsweise

Orientierte man sich beim Webdesign früher an der Auflösung von Desktop-Bildschirmen, wurde mit Verbreitung mobiler internetfähiger Geräte die Anpassung an immer mehr Displays erforderlich. Zudem unterscheidet sich die Bedienung von Touch-Displays grundlegend von der Bedienung mit einer Maus, da es bei Touch-Displays keinen „Mouse-Over“ bzw. „Hover“ Zustand gibt. Daher wurde zunächst spezielle Mobile Webseiten als „abgespeckte“ Versionen der eigentlichen Webseite erstellt. Dies bedeutete jedoch zusätzlichen redaktionellen Aufwand, außerdem gibt es viele Touch-Geräte mit großen Bildschirmen (große Tabletts) und Geräte mit Maus-Bedienung aber kleinen Displays wie Netbooks auf denen die Mobilseiten nur schlecht dargestellt werden.

Mit Responsive Webdesign wird nur noch eine Webseite erstellt und erst beim Aufbau der Seite erfolgt die Anpassung an das darstellende Gerät. Umgesetzt werden Webseiten in Responsive Design mit HTML5 und CSS3, mittels so genannter Media Queries können zu mehreren Parametern Informationen vom Endgerät erfragt werden, z.B. Art des Gerätes, Displaygröße und Display-Auflösung, Format (hoch/quer), Eingabe-Möglichkeiten wie Tastatur, Finger, Sprache sowie die Bandbreite der Internetverbindung.

Responsive Webdesign ermöglicht auf vielen unterschiedlichen Geräte wie Smartphones, Tabletts, Netbooks, Notebkooks, Desktops, internetfähigen Fernsehern u.v.m. eine sehr gute User Experience! Allerdings erhöht sich der Programmieraufwand erheblich, da alle Inhaltselemente „fluide“ angelegt werden müssen und zudem eine große Zahl von Gerät-Browser-Kombinationen berücksichtigt werden müssen.

Der Aufwand lohnt sich allerdings insbesondere bei Webseiten, die für Conversion optimiert sind, die Onlineshops und hier insbesondere das Checkout.

Mobile Website und SEO

Abzuraten ist von der Erstellung eigenständiger Mobiler Webseiten. Diese müssen als eigenständige Domain separat gepflegt werden, werden jedoch kaum verlinkt, erhalten somit kaum Linkjuice, dafür jedoch häufig viel Duplicate Content.

Mobile First

Ein Ansatz bei der Entwicklung von Webseite in Responsive Webdesign ist der Mobile First-Ansatz. Hier wird davon ausgegangen, dass auf der kleinsten unterstützten Displayauflösung alle wesentlichen Inhalte dargestellt werden und auf größeren Displays ggf. zusätzliche – weniger relevante – Inhalte geladen werden. Dieser Aufbau ist jedoch im Hinblick auf Suchmaschinenoptimierung ebenfalls problematisch, da unterschiedlichen Clients unterschiedlicher Content angeboten wird, was Google nicht gerne sieht!

Aufwand und Nutzen

Da mittlerweile ein Großteil der Internetnutzer (auch) mobil online geht, sollte eine Mobiloptimierung des Internetauftritts längst selbstverständlich sein. Da der Aufwand – insbesondere bei selbst entwickelten Templates, z.B. für TYPO3 Webseiten – mitunter erheblich ist, schrecken aber weiterhin viele Webseiten-Betreiber vor der Mehrinvestition zurück. Mobiloptimierte Themes, wie sie z.B. für WordPress oder Magento angeboten werden sind hier u.U. ein wichtiges Argument für das CMS. Für professionelle Premium-Themes werden zudem regelmäßig Updates angeboten, so dass auch künftige Geräte unterstützt werden. Und nur wenige Webseiten-Betreiber sind bereit, für Theme-Anpassungen regelmäßig Geld auszugeben, weshalb viele selbst entwickelte Webseiten bzw. Templates schnell veralten.

Für den Nutzer bedeuten mobiloptimierte Webseiten jedoch eine erhebliche Verbesserung der User-Experience und tragen so mindestes zu einer Reduktion der Bounce-Rate, oft aber auch erheblich zum Image-Verbesserung bei. Der Mehraufwand für den Betreiber beschränkt sich im Wesentlichen auf den Initialaufwand, ein CMS mit mobiloptimierten Themes zu verwenden, die Webseite bzw. der Shop muss dagegen nur einmal erstellt werden, auch der HTML-Code ist für alle Seiten der selbe.

Mehr über Responsive Webdesign von PERIMETRIK®

Weiterführende Links

Häufige Fragen zu Responsive Webdesign

Der Begriff Responsive Webdesign steht im Zusammenhang mit folgenden Fragen:

Suchen Sie eine professionelle Internetagentur?

Passende Lösungen:

Folgende Lösungen könnten zu diesem Thema passen:

Mobiloptimierung

Responsive Websdesign – Websites von PERIMETRIK® passen sich jeder Desktopgröße automatisch an. Wir optimieren Ihre WordPress Website für eine saubere Darstellungsweise aller Seiten und Inhalte auf mobilen Endgeräten.

Webdesign-Entwicklung

Ihre Website könnte dringend einen neuen Look vertragen? Dann nichts, wie los! Wir gestalten ein professionelles Webdesign, das zu Ihnen und Ihrer Branche passt. Gerne orientieren wir uns dabei an Ihren Vorlagen und entwickeln Layouts, die zu Ihrem Geschmack passen! Vielleicht haben Sie gar keine genauen Vorstellungen und möchten sich lieber inspirieren lassen? Gerne! Als erfahrenes Design-Team beraten wir Sie in Sachen Gestaltung und entwerfen Layout-Vorlagen für verschiedene Seiten-Typen.

Haben Sie Ihren Favoriten gefunden, gestalten wir das Webdesign für Ihre (neue) WordPress Website in Anlehnung an die Design-Vorlage und passen Inhalte, Texte und Fotos daran an. Gerne überprüfen wir die fertige Website anschließend noch einmal auf weiteren Displaygrößen (z.B. für Tablet und Smartphone) und führen einen Design-Feinschliff für eine saubere Ansicht auf allen Endgeräten durch.