Die Zahlen sprechen dafür, dass das Thema Mobilbusiness auch zukünftig ein Megaboom sein wird. Umso wichtiger, dass Unternehmen und Marketer das Potenzial ausnutzen und sich auf diese Entwicklung einstellen. Tatsächlich aber, sind ein Großteil der Inhalte von Internetseiten und Online-Shops noch nicht auf mobile Endgeräte eingestellt. Das aktuelle Zauberwort für die Lösung lautet lautet Responsive Design. Was sich dahinter verbirgt und was es dabei zu beachten gilt, erklärt Philipp Renger, Senior Berater der Online-Agentur MOSAIQ MEDIA.
Herr Renger was hat es auf sich mit dem responsive Webdesign?
In den letzten Jahren ist das Angebot an Endgeräten gewachsen. Desktops, Tablets und Smartphone unterscheiden sich in ihrer Auflösung, der Darstellung von Inhalten und in ihrem Limit an Datenvolumen. Gab es früher 3-4 unterschiedliche Auflösungen, sind es heute zig verschiedene. Die meisten Webseiten sind nicht dafür optimiert, die Inhalte für all diese unterschiedlichen Auflösungen passend darzustellen. Die Aufgabe von adaptive und responsive Webdesign liegt darin, unabhängig vom Ausgabegerät und der Auflösung, die ideale Darstellung der Inhalte zu gewährleisten. Dadurch kann die Notwendigkeit von multiplen Systemen vermieden werden, die einen höheren Pflegeaufwand enthalten. Der Vorteil daran ist, dass der Funktionsumfang der Seite erhalten bleiben kann und dem Besucher ein möglichst stringentes (Marken-)Erlebnis über alle Endgeräte hinweg ermöglicht wird.
Wie funktioniert das genau?
Beim responsive Webdesign werden Größenangaben in ein Verhältnis zueinander gesetzt. Dabei definiert ein Basiswert die maximale Breite der Webseite. Alle weiteren Größenangaben werden anschließend in das Verhältnis zum Basiswert gesetzt. Aus Pixelangaben werden somit relative Werte wie Prozentangaben. Folge dieser Anpassung ist eine flexible oder auch fließende Webseite, die durch Repositionierung, Skalierung sowie dem Ausblenden einzelner Inhaltselemente, auf die unterschiedlichen Browser und Ausgabegeräte reagiert. Möglich machen dies sogenannte Media Queries, die es erlauben, unterschiedlichste Informationen seitens der Endgeräte auszulesen. Ein prominentes und gutes Beispiel für eine responsive Website ist Microsoft. Hier gibt es beispielsweise zwei unterschiedliche Darstellungen der Hauptnavigation und des Headerbereiches. Sie haben ebenfalls den Begriff adaptive Design genannt.
Worin liegt der Unterschied zwischen diesem Ansatz und dem responsive Design?
Der Ansatz beim adaptive Webdesign ist ähnlich dem responsive Ansatz, jedoch fehlt die flexible Komponente. Für den Benutzer äußert sich dies durch Sprünge, so genannte „Breakpoints“ in der Darstellung. Die Website wird auf die 3-4 wichtigsten Auflösungsstufen, also in vorgegebenen Stufen, optimiert. Diese Breakpoints finden auch beim Responsive Webdesign Einsatz, jedoch sind sie aufgrund der flexiblen Anpassung an den Browser für den Nutzer weniger auffällig. Beispielsweise wird eine Website oder ein einzelnes Element dieser in Browserfenstern mit einer Breite zwischen 320 und 767 Pixeln gleich dargestellt. Erst ab einer Browserbreite von 768 Pixeln „springt“ das Layout der Website oder des Elements um.
Immer wieder hört man auch von mobilen Websites. Handelt es sich dabei um Websites, die responsive sind?
Nein, mobile Websites werden häufig parallel zur eigentlichen Internetpräsenz aufgebaut und müssen gegebenenfalls separat gepflegt werden. Außerdem unterscheiden sie sich durch eine abweichende URL wie m.website.com, mobile.website.com oder website.com/mobil. Häufig unterscheidet sich die Optik der mobilen Website maßgeblich vom regulären Unternehmensauftritt. Die Motivation für die Umsetzung einer mobilen Website ist naheliegend. Ziel ist, dem Nutzer für seinen Anwendungskontext passende Inhalte und Funktionen zur Verfügung zu stellen, die von denen der regulären Internetpräsenz teilweise stark abweichen. Als Beispiel kann die deutsche Post genannt werden. Die mobile Version geht viel stärker auf die nachgefragten Anwendungsszenarien der mobilen Nutzer ein. Funktionalitäten wie die Filial- oder Briefkastensuche sind hier wesentlich prominenter platziert, weil diese Infos sehr viel häufiger mit einem mobilen Endgerät nachgefragt werden. Das Layout der mobilen Post-Webseite beachtet zusätzlich die Bedienkonzepte und ist voll auf Touchdevices ausgerichtet. Hingegen die reguläre Website eher Infos zum Unternehmen oder eine Preistabelle in den Fokus rückt. Allerdings sind 90% der Websites einfach genug strukturiert, dass sie keine zusätzliche mobile Website benötigen.
Worauf muss ein Unternehmen besonders achten, wenn es seine Website auf mobile Endgeräte umstellt?
Bei der Umstellung der Website handelt es sich um einen aufwändigen Prozess. Daher könnte ich mich jetzt in Details verrennen. Aber um einige elementare Merkmale zu nennen, ist ein CSS unterstützender Browser und eine flexible HTML-Struktur die Basis. Was das Layout betrifft, sollte dies horizontale und vertikale Darstellungen optimieren, damit kein ungenutzter Weißraum entsteht. Oft wird auch die Lesbarkeit auf kleinen Displays vernachlässigt. Die Schriften sind zum Teil viel zu klein, so dass der mobile Nutzer den Text vergrößern muss, um ihn zu lesen. Gespart werden sollte auch nicht beim Kontrast von Schrift und Hintergrund, denn viele Nutzer dimmen die Helligkeit ihrer Geräte, um Energie zu sparen. Bestimmte Farbkombinationen sind auf dem Display schwierig zu lesen.
Woher weiß ein Unternehmen, welches Design am ehesten geeignet ist?
Welche Herangehensweise am ehesten geeignet ist, hängt primär von drei Kriterien ab. Das wären zum einen der Aufwand der Umsetzung, der Anspruch an Design & Usability und natürlich der Wunsch nach einer zukunftsorientierten Website. Mit Sicherheit sind diese Kriterien auch abhängig von der Zeitplanung und vom Budget, welches ein Unternehmen zur Verfügung hat. Das responsive Webdesign kostet zwar anfangs mehr, als eine herkömmliche Website, dafür müssen aber keine weiteren Seiten entwickelt werden. Das bedeutet die Investitionskosten amortisieren sich sehr schnell. Bei der Wahl des Ansatzes, sollte in jedem Fall auch die Zielgruppe berücksichtigt werden. Eine internetaffine Zielgruppe beispielsweise wird in hohem Maße die Inhalte der Website am mobilen Endgerät nutzen. Aber der Mobilmarkt wird allgemein weiter rasant wachsen und es ist nur noch eine Frage der Zeit, bis mobile Endgeräte Standard sind. Dies sollte auch in puncto Wettbewerb und Customer Service bedacht werden. Denn während eine adaptive Website in regelmäßigen Abständen an neue Auflösungen angepasst werden muss, ist eine responsive Website für alle zukünftigen Auflösungen gewappnet. Sie erfüllt hohe Erwartungen an das Design und weist über alle Geräte hinweg eine gute Usability auf. Besonders für Websites mit häufig wechselnden Inhalten ist dieser Ansatz sehr zu empfehlen. Der Aufwand für die Umsetzung ist im Vergleich zu einer adaptiven Website durchaus umfangreicher, aber auch hier gibt es Abstufungen bzgl. der Umsetzung. Eine adaptive Website hingegen erfüllt zwar den Anspruch der Darstell- und Bedienbarkeit auf mobilen Endgeräten, jedoch ist sie nur für einige wenige Auflösungen optimiert, sodass es hin und wieder zu Darstellungs- und Bedienproblemen führen kann.