Responsive Design für den ETH Webauftritt
Das Internet wird mehr und mehr mit mobilen Endgeräten benutzt. Dieser Entwicklung wollen wir auch an der ETH Zürich Rechnung tragen. Die Informatikdienste und die Hochschulkommunikation haben deshalb ein gemeinsames Projekt durchgeführt, welches die Webseiten auf unserem Web Content Management System (Adobe AEM) responsive werden lässt.
Vorgeschichte
Das Webdesign, welches ab 2013 im Einsatz war, besass eine Darstellung primär für Desktop-Computer. Auf den meisten Tablets war diese auch benutzbar, allerdings kaum auf Handys. Die Inhalte wurden lediglich proportional verkleinert, nicht aber neu angeordnet. Somit wurde die Schrift unlesbar klein und Links waren nur noch sehr versierten Benutzerinnen und Benutzern der Zoom- und Touch-Funktionen vorbehalten.
Ab Sommer 2015 existierte dann die Webseite m.ethz.ch, welche einen Ausschnitt der ETH-Hauptseite (www.ethz.ch) – optimiert für Smartphones – darstellte. Wer tiefer in die Inhalte einsteigen wollte oder einem Google-Suchresultat folgte, wurde aber zurück auf die Desktop-Ansicht gezwungen.
Retrofitting
Um den mobilen Geräten gerecht zu werden – ohne das Design komplett zu ersetzen – haben wir uns bei diesem Vorhaben für das Retrofitting-Verfahren entschieden. Dieses ermöglicht, auf dem bestehenden Design aufzubauen und es organisch zu einem responsiven Verhalten weiterzuentwickeln. Dies setzt breites Wissen im Bereich Design und Usability voraus, insbesondere umfassende Kenntnisse über die Studien zu diesem Thema. Wir haben uns deshalb einen kompetenten Partner gesucht und ihn mit der Firma Zeix AG gefunden, die dieses Know-how vorweisen kann und darüber hinaus auch eigene Untersuchungen durchführt. Auf diese Weise konnten wir die konzeptionellen Entscheide breit abstützen und subjektive Empfindungen weitgehend meiden. Natürlich bleibt aber ein Retrofitting auch immer ein Kompromiss.
Breakpoints
Das erweiterte Design besitzt mehrere Breakpoints (definierter Punkt im CSS Stylesheet, mit dem sich die Darstellung der Webseite an die unterschiedliche Displaygrössen anpasst): ein Layout für Handys, eines für Tablets, das (nur marginal geänderte) für Desktop und eines für Wide-Screen. Wide-Screen bedeutet dabei «grosse Bildschirme». Diese Ansicht ist z.B. für die Präsentation eines Karussells auf einem öffentlich ausgestellten Monitor gedacht. Wer diese Ansicht auf seinem Desktop-Computer nicht möchte, kann das Browser-Fenster verschmälern und erhält die gewohnte Ansicht.
Integration
Zeix hat das Design nicht nur konzeptionell und optisch erarbeitet, sondern auch auf statischen HTML-Seiten implementiert. Die Sektion ID Software Services (ID SWS) hat den CSS- und JavaScript-Code anschliessend in das Web Content Management System (WCMS) integriert. Hierbei hat sich der Prozess der Integration mit Code-Review einmal mehr bewährt. Auch am HTML-Code mussten einige Anpassungen durchgeführt werden. Diese erfolgten teils durch ID SWS, teils durch unseren langjährigen Partner Webtiser.
Automatisierte Tests
Gerade zu Beginn des Projekts war es erforderlich, Umstellungen in den CSS-Dateien vorzunehmen, die keinen Einfluss auf die Optik haben sollten. Hier kamen die automatisierten User Interface Tests von ID SWS zum Einsatz. Sie sind eine sehr effiziente Technik, um ungewollte Effekte zu detektieren. In späteren Phasen wurde dann auch die Xamarin Test Cloud mit einbezogen, die in der App-Entwicklung von ID SWS eingesetzt wird und es ermöglicht, dieselbe App – oder in diesem Fall Webseite – auf unterschiedlichen Geräten anzeigen zu lassen und zu vergleichen. Der Clou dabei: Die Geräte sind nicht simuliert, sondern existieren physisch in einem Rechenzentrum. In den späten Phasen wurden auch Lasttests durchgeführt, um sicherzustellen, dass wir keine neuen «Bremsklötze» einbauen. Was sich bei einem Responsive Design aber nicht vermeiden lässt: Die Anforderungen an die Layout- und Script-Fähigkeiten der Browser sind hoch und die hochauflösenden Bilder erfordern eine gewisse Bandbreite.
Optische Tests
Selbstverständlich kann ein Design-Projekt nicht komplett automatisiert getestet werden. So haben nicht nur bei Zeix, sondern auch bei der Hochschulkommunikation (HK) und den Informatikdiensten (ID) unsere Kollegen viele Stunden investiert, um die Seiten zu prüfen und Fehler zu finden. Auch hier musste akribisch darauf geachtet werden, dass echte Fehler (angeschnitten, unsichtbar, etc.) von persönlichen Vorlieben getrennt werden.
Mithilfe der Autorinnen & Autoren
Selbstverständlich ist es trotz allem nicht möglich, die gesamten 548 Websites mit ihren rund 40’000 Webpages blind umzustellen und zu glauben, dass alles problemlos funktioniert. So war das Responsive Design seit Juli den Autorinnen und Autoren zugänglich und sie konnten ihre eigenen Inhalte ansehen und – wo nötig – optimieren oder anpassen. Die Hochschulkommunikation hat dazu das Web-Manual um ein FAQ für das responsive Design erweitert. Die Hauptänderung für die Autoren liegt dabei bei den Bildern. Da wir neu auch 4K (auch bekannt als «Retina») unterstützen, benötigen die Bilder die doppelte Auflösung. Auch die Autoren hatten die Möglichkeit Fehler (es galten die gleichen Regeln wie oben) im Design zu melden, und haben davon auch Gebrauch gemacht. Sie haben damit ebenfalls einen wichtigen Beitrag zum Projekt geleistet. Herzlichen Dank!
Kontakt
Christian Schär, Gruppenleiter ID WCMS, LMS & Mobile Applications, ID Software Services
