Das mobile Zeitalter in Verbindung mit der Vielzahl der uns im Alltag umgebenden Bildschirme bringt einige technische Herausforderungen mit sich. Webdesigner und Programmierer müssen immer intensiver daran arbeiten, dass Webseiten auf jedem Gerät optimal dargestellt werden, ob auf Smartphone, Tablet, Desktop PC, Laptop, E-Book Reader oder auf dem Fernseher. Immer weniger Sinn macht es stattdessen, eine Basiswebsite zu programmieren und diese dann für jeden Screen anzupassen. Aufgrund der Vielzahl an Ausrichtungen würden die Kosten schnell in astromische Höhen steigen. Gerade bei kommerziellen Webseiten sind den Betreibern eine überschaubare Finanzierung und ein eine perfekte Darstellung wichtig. Ein nicht durchdachtes Design hingegen kann schnell zu Umsatzeinbußen führen, beispielsweise dann, wenn sich bestimmte Buttons wie der Warenkorb nicht drücken lassen oder außerhalb des Sichtfeldes platziert werden.
Mehr als nur Auflösung
Abhilfe schafft hier eine Homepage im Responsive Webdesign. Dieses Prinzip ist nicht zu verwechseln mit der mobilen Website, die extra angelegt wird. Die Änderungen und die Herangehensweise sind viel tiefgreifender und unterschiedlicher. „Responsive“ bedeutet, dass nur eine Website erstellt wird, die auf das Anzeigegerät und seine Spezifikationen reagiert. Abgesehen von der Displaygröße spielen noch weitere Faktoren eine Rolle – die Bildschirmauflösung, die Orientierung bei mobilen Endgeräten (Hoch- oder Querformat?) und die Eingabemethoden (Klick mit der Maus, Touch mit dem Finger oder ein Knopfdruck mit einer Fernbedienung).
Viele Herausforderungen – viel Nachhaltigkeit
Es gilt das Prinzip „Form follows function“, denn Inhalt, Form und Design folgen der Bildschirmauflösung und anderen Eigenheiten des verwendeten Smartphones, Tablets oder Desktop PCs.
Bei der Konzeptionierung einer Website im Responsive Design definiert man die kleinste darzustellende Bildschirmauflösung („Mobile First“). Hierauf basieren dann alle anderen Darstellungsszenarien. Im mobilen Bereich muss zusätzlich darauf geachtet werden, dass die Elemente der Website möglichst klein gehalten bzw. definiert werden, um die Datenlast so klein wie möglich zu halten.
Weiterhin sind nicht alle Elemente einer Homepage auf allen Displaygrößen wichtig. So können Bestandteile weggelassen werden, um Traffic zu sparen und mehr Übersichtlichkeit herzustellen. Damit Fehler ausgeschlossen werden können, ist es notwendig die Website während des Entwicklungsprozesses kontinuierlich auf den verschiedenen Geräten ausführlich zu testen. Das kostet zwar Zeit und erhöht den Aufwand erheblich, rechnet sich aber immens in der Nachhaltigkeit und Pflege einer Website im Responsive Design: Es muss dann immer nur eine URL geändert und Content nicht öfter eingepflegt werden.
Technische Umsetzung
Umgesetzt wird das Ganze mit sogenannten „Media Queries“, ein Konzept, das es seit der Einführung von CSS3 gibt. In CSS Stylesheets werden Elemente mit Regeln versehen, die für das ganze Dokument gelten. Sobald die Auflösung des Displays sogenannte „Breakpoints“ erreicht, greifen die „Media Queries“ (Abfrage der Geräteeigenschaften), und die Regeln werden angepasst oder es werden welche hinzugefügt. „Breakpoints“ sind festgelegte Auflösungsschwellen, bei denen sich das Layout verändern soll. Weitere verwendete Grundlagen sind neuere Webstandards wie HTML5 (Hier wird CSS eingebunden) und Java Script.
Durch den erhöhten Aufwand beim ersten Aufsetzen einer solchen Website enstehen ca 30-40% mehr Kosten als beim Aufbau einer gewöhnlichen Webpräsenz. Eine überaus preiswerte, aber dennoch professionelle Lösung stellen Baukastensysteme für Websites dar, mit denen jeder ganz einfach sein Unternehmen im Internet präsentieren kann.1&1 ist einer der bekanntesten Dienstleister in diesem Bereich; Websites die mit dem System von 1&1 erstellt werden, passen sich nämlich ebenfalls verschiedenen Geräten an und sind darüber hinaus durch simples Drag and Drop individuell konfigurierbar.
Bildrechte: Flickr Consistent Experience Across Multiple Screen Sizes Intel Free Press CC BY Bestimmte Rechte vorbehalten
