PortaleResponsive or go home

Der Gang ins Bürgerbüro, zum Amt oder zum Rathaus gehört zu den eher unbeliebten, aber notwendigen Aktivitäten des Bürgerlebens. Öffnungs- und Wartezeiten beim Behördengang sind dabei oft ein Problem. Viele Kommunen und Behörden bieten ihren Kunden daher bereits eine Vielzahl von Bürgerservices online zur Bearbeitung zu Hause an. Doch das Nutzungsverhalten ändert sich rasant. Laut Statista gibt es in Deutschland schon heute knapp 34,5 Millionen mobile Internet-Nutzer – Tendenz steigend. Dazu kommt, dass häufig mehrere mobile Endgeräte verwendet werden, durchschnittlich 2,4 Geräte pro Nutzer – unterschiedliche Auflösungen und Betriebssysteme inklusive. Ein Responsive Design, das diesen Gegebenheiten optimal gerecht wird, ist also nicht mehr nur Nice-to-Have, sondern alternativlose Grundvoraussetzung für ein zeitgemäßes kommunales Online-Portal. Nicht umsonst lautet ein aktueller Web-Design-Grundsatz: responsive or go home! Responsive-Design-Projekte haben ganz spezielle Anforderungen. Sie bringen viele technische Herausforderungen mit sich. Das Hauptaugenmerk aber liegt, vor allem zu Projektbeginn, auf dem konzeptionellen Bereich. Das wird leider oft übersehen, was am Ende zu schlecht nutzbaren und inhaltlich überladenen Anwendungen führt. Das Konzept einer Responsive Website beginnt mit der Content-Analyse. Hier wird bei einer eingehenden Inventur der vorhandenen oder zu erwartenden Inhalte des künftigen Portals festgestellt, in welcher Art, in welchem Umfang und mit welcher Struktur Inhalte wie Text, Bilder, Videos oder Audio-Angebote vorliegen. Das ist eine redaktionelle Aufgabe, die trotz technischer Unterstützung sehr viel Handarbeit erfordert. Dabei ist zu hinterfragen, welche Inhalte überflüssig sind, ob sie im vorliegenden Umfang benötigt werden und wo sie künftig einzuordnen sind – eine wunderbare Gelegenheit, sich von überflüssigem Ballast zu trennen.

Nutzer bestimmen Anforderungen

Die tatsächlichen Anforderungen an ein kommunales Web-Angebot bestimmt der Bürger. Diese Anforderungen können im Gegensatz zu den ersten konzeptionellen Überlegungen stehen. Daher muss der Nutzer an dieser Stelle in den Entwicklungsprozess eingebunden werden. Aus Aussagen von echten Nutzern wird ein Anforderungskatalog erstellt, der die Basis des ersten Konzepts darstellt und die tatsächlichen Probleme angeht. In dem nun folgenden iterativen Designprozess wird mithilfe regelmäßiger Usability-Tests der aktuelle Entwicklungsstand evaluiert und kontinuierlich verbessert. So erfahren auch die Themen Usability und Accessibility von Anfang an die notwendige Aufmerksamkeit. Verschiedene Devices erfordern ein Höchstmaß an Flexibilität im Design, was nur mit agiler Entwicklung und kompromissbereiter Projektabwicklung erreicht werden kann. Zu Beginn wird der Mindestumfang für eine Mobile-Version definiert. Diese Kernfunktionen können dann mit zusätzlichen Features für Tablet- und Desktop-Versionen ergänzt werden. Eine solche Vorgehensweise ist erfahrungsgemäß wesentlich effizienter, als wenn aus einer umfangreichen Desktop-Anwendung mit allen Nice-to-Haves die für eine mobile Applikation essenziellen Bestandteile herauszuarbeiten sind. Weil hier entscheidende Weichenstellungen für das Projekt definiert werden, ist eine enge Zusammenarbeit und vertrauensvolle Kommunikation zwischen Auftraggeber, Designagentur und technischem Entwicklungsteam grundlegend. Wenn nun das funktionale Konzept steht, sollte mit dem Aufbau eines funktionalen Prototyps begonnen werden. Mit dessen Hilfe lässt sich direkt testen, ob die geplante Anwendung den funktionalen Anforderungen entspricht. Notwendige Änderungen können schnell erkannt und die Funktionsweise noch vor dem Go-Live sukzessive optimiert werden, wenn die Anforderungen des Bürgers bereits an dieser Stelle im Entwicklungsprozess hinreichend berücksichtigt werden, verhindert das die Multiplikation konzeptioneller Fehler in späteren Projektstadien. Mithilfe von Usability Tests können auch hier kostenintensive Nachbesserungen vermieden werden.

Layout nicht an erster Stelle

Erst jetzt, wenn all diese Arbeitsschritte erfolgreich gemeistert sind, startet die Entwicklung des endgültigen Layouts mit der gesamten visuellen Sprache der Anwendung. Diese definiert sich aus zielgruppenspezifischen Ansprachen, der Berücksichtigung bereits bestehender Corporate-Design-Vorgaben, Bildkonzepten, Farben und Schriften. Dieses Look-and-feel ist das, was oft fälschlicherweise unter Design verstanden und meist schon während der ersten Projektphase, der Dienstleistersuche, gefordert wird. Der Wunsch des Auftraggebers, möglichst früh ein fertiges Layout zu sehen, ist verständlich. Trotzdem kann die finale Entwicklung des fertigen Layouts mit allen Details idealerweise erst nach allen konzeptionellen Schritten erfolgen. Dabei wird eine erste Designroute nach dem Prinzip Form-follows-Function geprüft und weiterentwickelt. Bei der Agenturauswahl ist es daher zielführender, sich zunächst erste unverbindliche Entwürfe oder Designrouten und erfolgreich realisierte Referenzprojekte zeigen zu lassen. Diese sagen mehr über die Kompetenz des Unternehmens in der Entwicklung benutzerfreundlicher und zeitgemäßer Responsive Designs aus, als gefällige, aber möglicherweise nicht praktikable Präsentationsentwürfe. Natürlich müssen fertiges Layout und strukturelles Konzept dann noch professionell mit den aktuellsten Technologien in Front und Back End realisiert werden. HTML 5, CSS3 und JavaScript (-Frameworks) sind bei der technischen Umsetzung unerlässliche Werkzeuge. Hier kann direkt auf den bestehenden Prototypen aufgesetzt werden. Ergebnis ist ein fertiges und bereits getestetes Front End. Die nun folgende Anbindung des Front End an die Back-End-Komponenten wie Content-Management-Systeme, Portal-Frameworks oder Formular-Server erfordert dann nur noch ein geringes Maß an technischen Lösungen für funktionierendes Responsive Design.

Tipps für Responsive-Design-Projekte

• Responsive-Design-Projekte vor allem als konzeptionelle Aufgabe verstehen, anstatt sich nur auf technische Lösungen zu fokussieren.
• Content-Analyse ernst nehmen, genug Ressourcen und Zeit einplanen.
• Von Anfang an den Nutzer in den Mittelpunkt der konzeptionellen Überlegungen stellen.
• Mobile First denken und dabei intensiv kommunizieren.
• Schon während der Entwicklung des Designs den Prototyp aufsetzen und so früh wie möglich mit echten Usern testen.
• Ein Responsive Design beginnt nicht mit einem fertigen Layout; es muss im Zusammenspiel mit dem funktionalen Konzept nach und nach entwickelt werden.
• Beim Front End auf Prototypen setzen, nicht mit dem Back End beginnen.