ProgrammierungAgiles Webdesign

Den Webdesignern stehen Änderungen ins Haus. Aktuelle Studien zeigen, dass sich die mobile Internet-Nutzung in den vergangenen drei Jahren mehr als verdoppelt hat. Mobile Endgeräte wie Tablets und Smartphones ersetzen nicht nur den statio­nären Internet-Zugang via Desktop-Computer, sie sorgen auch für ein neues Nutzungsverhalten. Per Smartphone wird vor allem über soziale Netzwerke kommuniziert, bei Tablet-Nutzern stehen der Abruf von Websites und die E-Mail-Kommunikation im Vordergrund. Mobile Endgeräte sind heute zu ständigen Begleitern geworden, die mobile Internet-Nutzung ist nicht länger der Ausnahmefall. Die Zukunft ist mobil.

Der neue Grundsatz lautet: Mobile First

Das wirft Fragen auf: Was bedeutet das für das Webdesign der Zukunft, also jene Seiten, die heute in Auftrag gegeben werden? Welche Anforderungen haben die mobilen Geräte, was unterscheidet sie in Nutzbarkeit und Nutzungsweise? Eine Antwort: Zunächst muss sich der Fokus des Designs ändern. Während früher die Möglichkeiten eines Full Featured Browser auf dem PC im Vordergrund standen und die Seiten solange reduziert wurden, bis sie irgendwie auch auf das Smartphone passten, muss heute umgekehrt gedacht werden, nämlich: Mobile First.
Bisher war der Lösungsweg vieler Programmierer allerdings die Mehrgleisigkeit: Die Website bekam eine mobile Schwester, je nach Möglichkeiten und Bedarf kam stattdessen oder ergänzend noch eine App dazu. Doch eine App ist etwas ganz anderes als eine nach Mobile-First-Grundsätzen optimierte Seite und erfüllt auch andere Funktionen: Web-Seiten sind ideal für Gelegenheitsbesucher und haben häufig einen repräsentativen Charakter. Eine App hingegen ist eine einfach zu nutzende Fachanwendung – ein Werkzeug für den digitalen Profi. Sie nutzt Hardware-Funktionen des Endgeräts, die für die reine Darstellung von Inhalten nicht notwendig sind wie GPS, Bluetooth oder Ähnliches. Apps, die dieses Plus an Funktionen nicht nutzen oder anbieten, wirken schnell langweilig und überflüssig. Dieser Effekt wird noch dadurch verstärkt, dass Mobile First Websites in naher Zukunft zur Pflicht werden, ergänzende Apps sind dann die Kür.

Das Prinzip Responsive Design

Bei Mobile First muss der Gestaltungsgrundsatz „Form follows Function“ unter der Berücksichtigung des serverseitigen Funktionierens der Web-Seiten so formuliert werden: „Function follows Form follows Function“. Das heißt, die dem Nutzer mittels Endgerät zur Verfügung gestellten Funktionen definieren die Form, die wiederum Anforderungen an die Funktionalität der Programmierung stellt. Je nach Endgerät werden die Inhalte anders dargestellt und das Design reagiert auf die Nutzung der Seite. Dieses Layout-Merkmal von Web-Seiten wird Responsive Design genannt.
Diesem Prinzip folgend wird also zunächst von den Rahmenbedingungen mobiler Endgeräte ausgegangen, wie einem kleineren Bildschirm, Touchscreen-Funktionen sowie weniger Bandbreite und/oder Datenvolumen. Danach wird eine übersichtliche Struktur geschaffen und mit Funktionen und Inhalten für die PC-Nutzung angereichert. Statt mehrerer Symbole in unterschiedlichen Größen werden skalierbare Vektorfonts eingesetzt, jedes Symbol kommt also genau einmal vor und muss im Bedarfsfall auch nur einmal ausgetauscht oder verändert werden. Die Kombination von Touchscreen-Funktionalität mit Responsive Design ermöglicht mit dem mobilen Endgerät eine andere Navigation – Stichwort wischen – als mit PC und Maus. Aber auch eine Menüführung, die überflüssige Klick-Hierarchien und das Laden ungewünschter Seiten mit hohem Datenverbrauch vermeidet, zählt zu den neuen Standards und macht die Seite mobiler.

HTML 5 reduziert den Programmieraufwand

HTML-5-Formulare reduzieren dabei den Programmieraufwand und ermöglichen einen schlankeren Code. Der neue HTML-Standard ist also bereits vorbereitet auf die Erfordernisse von Responsive-Design-Elementen. Die gestalterische Ausrichtung führt insgesamt zu einer technischen und inhaltlichen Optimierung des gesamten Internet-Auftritts. Und das ist zukünftig ein wichtiges Unterscheidungsmerkmal, denn während die Benutzerführung mobiler Anwendungen immer perfekter wird, entsteht bei den Nutzern eine höhere Erwartungshaltung bei der Bedienung der PC-Version. Diese wird durch konsequentes Mobile-First-Denken von Anfang an erfüllt.
Der Design-Prozess erfordert bei Mobile First eine andere Reihenfolge und Gewichtung als bisher. Die Schritte im Einzelnen:
• Im Workshop wird der prinzipielle Gestaltungsrahmen der Seite abgestimmt.
• Wireframes geben eine genauere Vorstellung von der Seitenaufteilung auf unterschiedlichen Bildschirmgrößen.
• Style Tiles definieren zentrale Gestaltungselemente der neuen Website.
Die Umsetzung erfolgt in einem iterativen Prozess, in dem immer wieder die Funktion und Gestaltung der Seite überprüft, diese also immer weiter optimiert wird. In enger Abstimmung aller Beteiligten muss das Layout immer wieder zwischen Web-Entwicklung und Design konzipiert werden. Sind Zwischenetappen erreicht, sollte der Auftraggeber einbezogen werden. Eine straffe Projektsteuerung verhindert Endlosschleifen und sorgt dafür, dass das Projekt im Zeit- und Budget-Rahmen bleibt. Programmierer kennen dieses Prinzip als agile Software-Entwicklung.