In den vergangenen Jahren ist das Angebot an Endgeräten gewachsen. Desktops, Tablets und Smartphones unterscheiden sich in ihrer Auflösung, der Darstellung von Inhalten und in ihrem Limit an Datenvolumen. Gab es früher drei bis vier unterschiedliche Auflösungen, sind es heute zig verschiedene. Die meisten Internetseiten 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.
Website reagiert auf das Ausgabegerät
Beim responsive Webdesign werden Größenangaben in ein Verhältnis zueinander gesetzt. Dabei definiert ein Basiswert die maximale Breite der Website. 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 Website, 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 Headerbereichs.
Unterschiede zum adaptive Webdesign
Der Ansatz beim Adaptive Webdesign ist ähnlich dem responsiven 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 drei bis vier 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.
Charakteristik mobiler Websites
Mobile Websites dagegen 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-Website 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 Prozent der Websites einfach genug strukturiert, dass sie keine zusätzliche mobile Website benötigen.
Bei der Umstellung der Website auf mobile Endgeräte handelt es sich um einen aufwendigen Prozess. Die Basis ist ein CSS unterstützender Browser und eine flexible HTML-Struktur. Das Layout sollte die horizontalen und vertikalen 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.
Investitionskosten amortisieren sich schnell
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 und 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 bezüglich 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 kommen kann.