Responsive Webdesign

2014|11

Layout und Technik einer modernen Webseite sollten für die mobile Internetnutzung optimiert sein.

Responsive Webdesign
Responsive Webdesign
Layoutvarianten eines Responsive Designs
Layoutvarianten eines Responsive Designs

Die Anzahl der mobilen Internetnutzer steigt ständig, deshalb ist es zunehmend wichtig, dass eine Webseite unabhängig vom Endgerät funktioniert. Responsive Webdesign ist die Antwort auf diesen gestiegenen Bedarf, eine Internetseite auch auf Tablets und Smartphones gut nutzbar zu machen.

Was ist Responsive Webdesign?

Mit einem Responsive Webdesign wird dafür gesorgt, dass eine Internetseite auf verschiedenen Displaygrößen stets optimal dargestellt wird und die Bedienung einwandfrei funktioniert. Statische Designs mit festen Breiten werden dafür von einem dynamischen und flexiblen Webseitenaufbau abgelöst. Genau dieses leistet das Responsive Webdesign. Alle Webseitenelemente werden so angelegt, dass sie sich automatisch an die enorme Vielfalt unterschiedlicher Bildschirmgrößen anpassen können. Technisch funktioniert dies, weil mithilfe von Media Queries die Art und die Eigenschaften des Geräts abgefragt werden, mit dem eine Webseite gerade geöffnet wird. Die Anpassung der Navigationsstruktur und des gesamten Layouts funktioniert dann automatisch. So verschiebt sich die Anordnung aller Webseitenelemente wie beispielsweise die Spaltenaufteilung und die Position von Text- sowie Bildblöcken. Die Größen passen sich zudem so an, dass Buttons sowohl per Mausklick als auch per Touchscreen gleich gut bedienbar sind. Technik und Layout müssen dafür programmiert und designt werden. Auf diese Weise gelingt, dass die Responsive Webseite auf jedem Bildschirm passend dargestellt wird. Dafür sieht die Webseite auf einem großen Display anders aus, als auf einem Tablet oder einem Smartphone. Bei einer Responsive Website verändert sich auf den Geräten nur die Darstellungsweise – nicht aber der Inhalt. Für alle Geräte gleich bleibt dann auch die hohe Usability (Nutzerfreundlichkeit), weil User auf allen internetfähigen Geräten eine gut strukturierte, gut lesbare und übersichtliche Internetseite finden.

Warum ist Responsive Webdesign so wichtig geworden?

Das Statistische Bundesamt stellte 2013 fest, dass 51 Prozent der Internetnutzer in Deutschland mobil ins Netz gehen1. Diese Zahl wird sich inzwischen noch ein mal deutlich erhöht haben. Bereits im Sommer 2012 untersuchte eine Google-Studie2, was Smartphone- und Tablet-User von einer Internetseite erwarten. Demnach sollte jedes Unternehmen in eine Responsive Webseite investieren, denn:

  • 48% der User klickten genervt weg, wenn eine Webseite nicht für mobile Endgeräte ausgelegt war.
  • 52% der Testpersonen gaben an, nicht in weiteren Kontakt zu einem Unternehmen treten zu wollen, wenn dieses nur schlecht über mobile Endgeräte erreichbar wäre.
  • 48% waren der Meinung, dass ein Unternehmen, dass keine mobilfähige Webseite hat, sich nicht angemessen um sein Geschäft kümmert.

Die Auswertung der Zugriffsstatistik einer Webseite zeigt dem jeweiligen Seitenbetreiber, wie sehr die Seitenaufrufe durch mobile Geräte angestiegen sind. Eine Responsive Webseite wird zukünftig zum Standard werden.

Wie funktioniert ein Responsive Weblayout?

Damit eine Responsive Website ihre Darstellung automatisch den Endgeräten anpassen kann, muss diese gestalterisch und technisch darauf ausgelegt werden. Die Bestandteile einer Internetseite sollten hierfür blockartig angelegt sein, damit sie sich je nach Bildschirmgröße untereinander oder nebeneinander anordnen können. Dabei muss jeder Block auch auf einem kleinen Smartphonebildschirm noch gut zu lesen und mit dem Finger einfach zu bedienen sein. Dafür gibt es zwei verschiedene Ansätze der layouttechnischen Umsetzung einer mobilen Darstellung. Entweder ordnen sich die einzelnen Elemente einfach untereinander an (fluide Darstellung) oder die Navigationsbereiche werden aus dem sichtbaren Bereich geschoben und bei Bedarf vom Nutzer wieder hereingezogen (Off Canvas-Darstellung).

Technische Grundlage für das Funktionieren des Responsive Designs sind die Webstandards HTML5, CSS3 und JavaScript. Neben diesen technischen Umsetzungen ist auch eine Performance-Optimierung der Webseite notwendig, um Smartphone-User nicht mit langen Ladezeiten und großen Datenvolumen zu überfrachten. Um dies zu erreichen sollten Bildgrößen optimiert werden oder das Loading der Webseite wird so programmiert, dass zunächst immer nur sichtbare Elemente geladen werden und Weiteres erst beim Scrollen nachgeladen wird.

Eine Alternative zur Responsive Website ist die Erstellung einer eigenen mobilen Seite. Diese Variante bedeutet, dass ein extra Internetauftritt erstellt wird, der nur auf mobilen Endgeräten sichtbar wird. Solch eine mobile Version ist völlig eigenständig, sie hat eigene Inhalte und muss damit auch eigens gepflegt werden. Demzufolge ist diese Webseite dann auch nur über eine eigene, durch ein „mobil“ oder ein „m“ ergänzte, Adresse erreichbar. Beispielsweise würde eine mobile Webseite von p2media.de dann m.p2media.de lauten. Um eine Doppelung des Inhaltes zu vermeiden und keinen aus SEO-Sicht schlechten „Duplicate Content“ zu erzeugen, sollten sich die Inhalte gänzlich von denen der Hauptwebseite unterscheiden. Das heißt, es muss ein extra Content mit eigenen Texten erstellt werden. Eine mobile Webseite bedeutet Zusatzarbeit und Pflegeaufwand und ist nur sinnvoll, wenn die Hauptseite nicht verändert werden soll.

Fazit: Responsive Design ist die beste Lösung, wenn eine Webseite zeitgemäß funktionieren und auf allen Endgeräten optimal nutzbar sein soll. So go responsive!

­­Unsere Teams in Hamburg, Hannover, Düsseldorf und Minden beraten Sie gerne!

1 www.destatis.de/DE/PresseService/Presse/Pressemitteilungen/2014/03/PD14_089_63931.html, abgefragt am 28.11.2014.
2
www.thinkwithgoogle.com/research-studies/what-users-want-most-from-mobile-sites-today.html, abgefragt am 28.11.2014.