Responsive Webdesign

Nur rund ein Viertel der deutschen Websites eignet sich für Smartphones

Im März 2013 belegte eine Studie von TNS Infratest, dass jeder zweite Smartphone-Besitzer in Deutschland (49%) fast „immer und überall“ mit seinem Gerät online ist. Das entspricht rund 15 Millionen Menschen in Deutschland. Die hierbei genutzten Inhalte werden beispielsweise über Apps, Streaming-Portale, Websites und andere Anwendungen dargestellt. Dieser Trend des mobilen Surfens hat sich längst zu einem stetigen Prozess weiterentwickelt.

Mit dem Anstieg der Nutzungszeit und –rate an mobilen Endgeräten steigen auch die Anforderungen an die jeweiligen Anwendungen und Websites. Denn nicht jede Website wird auch auf jedem Endgerät problemlos angezeigt. Einer Schätzung zufolge, sind heute nur rund 25% aller genutzten Websites auch für die Darstellung auf mobilen Endgeräten geeignet. Dies ist mit teils erheblichen Folgen für die Betreiber der jeweiligen Website verbunden. So kann es beispielsweise negativ auf ein Unternehmen zurückfallen, wenn die Repräsentanz im Internet schlecht lesbar, fehlerhaft oder wie im Falle von Flash-Animationen gar nicht dargestellt wird.

Um auf die gestiegenen Anforderungen dieser Entwicklung zu reagieren, sollte eine Website möglichst auf allen Endgeräten unabhängig von Bedienung und Erscheinungsbild fehlerfrei funktionieren und dargestellt werden, und dabei das gesamte Spektrum an Endgeräten, von Smartphones und Tablets über Laptops und Desktop-PCs bis hin zu E-Book-Readern, umfassen.

Die Lösung: Responsive Webdesign

Beim Responsive Webdesign handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können. Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (klicken, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript.

Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten können erheblich variieren. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Website stark abhängig vom Endgerät. Websites, die mit einem reaktionsfähigen Design ausgestattet sind, berücksichtigen die unterschiedlichen Anforderungen der Endgeräte. Ziel dieser Praxis ist, dass Websites ihre Darstellung so anpassen, dass sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren. Kriterium für das angepasste Erscheinungsbild sind neben der Größe des Anzeigegerätes beispielsweise verfügbare Eingabemethoden (Touchscreen, Maus) oder die Bandbreite der Internetverbindung.