Responsive Design für Bestandssysteme?

Welche Ansprüche stellen Sie an die Bedienbarkeit einer Webapplikation oder Website?

Responsive Design - InhalteWir erwarten als Nutzer von Webapplikationen und -sites zunehmend, dass sie in unterschiedlichen Nutzungskontexten funktionieren: Sowohl am klassischen Arbeitsplatz mit Maus & Tastatur, als auch auf einem Tablet im Kundengespräch sowie in der Bahn auf dem Smartphone mit instabiler Konnektivität.

Auf technischer Seite erzeugen diese Ansprüche neue und deutlich komplexere Anforderungen an die Funktionalität und das Design der Benutzeroberfläche, um die gesamte Bandbreite der o.g. Nutzungsszenarien abzudecken.

Schon im Jahr 2010 stellt der Webexperte Ethan Marcotte seinen Lösungsansatz vor und prägte damit einen zentralen Begriff der modernen Webentwicklung: Responsive Webdesign. Dieser Ansatz bedient sich diverser Techniken, die es möglich machen, dass die Oberfläche auf verschiedene Rahmenparameter (z.B. Auflösung, Quer- oder Hochformat ...) des Endgerätes reagieren kann. So kann für verschiedene Geräteklassen ein optimiertes User Interface zur Verfügung gestellt werden.

Bewährtes System – modernes User Interface

Responsive DesignIm Falle einer Neuentwicklung kann sicherlich ein responsiver Ansatz von Beginn an im Konzept der Oberfläche berücksichtigt werden. Aber was tun, wenn diese Anforderung auf ein Bestandssystem trifft?

Hier können durch den Einsatz von Frameworks wie Twitter Bootstrap oder Zurb Foundation bereits mit mäßigem Aufwand beachtliche Mehrwerte für Nutzer im mobilen Nutzungsszenario erreicht werden. So liefern diese Frameworks best practice Vorgaben für die Gestaltung von Bedienelementen, die sich den Besonderheiten der jeweiligen Endgeräte anpassen.

Dabei muss aber keineswegs das individuelle Erscheinungsbild und Branding aufgegeben werden: Durch den Einsatz moderner Werkzeuge, wie beispielsweise des CSS-Präprozessors SASS, kann das Erscheinungsbild unter Beibehaltung der best practices hochgradig effizient individualisiert werden. In dem Zuge bietet sich zusätzlich ein Facelift des - in der Regel schon etwas angestaubten - Erscheinungsbildes der Applikation geradezu an.

Ein weiterer Vorteil dieser Vorgehensweise: Da die Anpassung sich in diesem Fall rein auf die Darstellung (HTML/CSS) beschränkt, kann das unterliegende bewährte System unverändert bleiben. So wird eine schnelle Umsetzung mit moderatem Aufwand möglich.

Zukunftsweisende Trennung: Entkopplung der Oberfläche

Trotz des enormen Potenzials dieser Vorgehensweise ist sie jedoch keinesfalls ein Allheilmittel. Das Ergebnis kann immer nur ein Kompromiss für verbesserte mobile Bedienbarkeit darstellen, limitiert beispielsweise durch die verwendete Frontendtechnologie sowie durch oftmals “gewachsene” Strukturen.

Ein responsives Redesign verbessert zwar die Bedienbarkeit per Touch-Eingabe, kann aber bspw. das Problem der unbeständigen Konnektiviät im Zug nicht lösen. Soll sich das User Interface also mehr in Richtung nativer Apps entwickeln, reicht es nicht, nur die Darstellung anzupassen. Moderne Webtechnologie bietet hier entsprechende Lösungsansätze, diese erfordern jedoch umfangreichere Maßnahmen als bisher beschrieben.

Ein zukunftsweisendes Vorgehen kann hier die vollständige Entkopplung der Oberfläche vom serverseitigen Bestandssystem sein. Die Abstraktion schafft in diesem Szenario eine REST-API, die nur reine Daten für die Webapplikation anbietet. Durch die generische Schnittstelle ist der Weg frei für ein hochmodernes komfortables User Interface. JavaScript Frameworks wie AngularJS und Komponenten-Frameworks wie Polymer können so ihre gesamten Vorzüge entfalten. Der Vorteil dieser Vorgehensweise liegt auf der Hand: Die REST-Schnittstelle kann zusätzlich zur bestehenden Oberfläche aufgesetzt werden. So kann die Umstellung graduell erfolgen.

Ist das Backendsystem erst einmal durch die Schnittstelle klar vom Client abgegrenzt, ist auch die Entwicklung der Oberfläche entkoppelt von der Arbeit am Backend. Entwicklungsstränge können so auf agile Weise parallelisiert werden. Durch diese Trennung kann außerdem „das Beste aus zwei Welten“ kombiniert werden: Ein stabiles und bewährtes Backendsystem und gleichzeitig ein modernes und benutzerfreundliches User Interface.

Auch in der Wartung und Fortentwicklung hat das Vorgehen gewichtige Vorteile. Die Technologie kann auf beiden Seiten der Schnittstelle ausgetauscht werden, ohne den anderen Part zu berühren. Eine iOS-App soll erstellt werden? Der Integrationsaufwand auf Serverseite – gleich null! Bestimmte Daten aus dem System sollen in ein anderes System eingespeist werden? Die Infrastruktur steht mit der API schon bereit.

Innovation für ein benutzerfreundliches User Interface – gerade auf mobilen Endgeräten - und Kontinuität mit bewährten Systemen schließen sich nicht gegenseitig aus. Wir optimieren Ihre bestehende Lösung für Sie – mit dem besten aus beiden Welten!

Ansprechpartner: Jens Binfet; Turn on Javascript!