ETH Zürich WebsiteRetrofit Design für XS- bis XXL-Screens
- Adresse
- ETH Zürich
- Branche
- Bildung & Wissenschaft
- Typ
- Website
- Leistungen
- Konzeption und Prototyping, Frontend-Entwicklung
Ziele
Der Webauftritt der ETH mit fast 550 Websites und 74’000 Seiten sollte mobiltauglich werden. Da eine komplette Neuprogrammierung und ein Redesign ausser Frage stand, entschied sich die ETH für ein Retrofitting.
Bild: ETH, Departement Informationstechnologie und Elektrotechnik
Mit dem Retrofit optimierten wir alle Ansichten der ETH-Websites für kleinere Geräte mit Touch-Bedienung sowie für ultra-grosse Displays.
Drill-Down mobile Navigation
Die neue Benutzerführung für die mobile Ansicht ermöglicht dem User, ohne Seiten-Reloads über alle acht Ebenen hinweg zu navigieren. Dabei bleibt stets die Orientierung in der komplexen Site-Struktur gewahrt.
Ansicht auf Full-HD Display
Für optimale Lesbarkeit führten wir eine client-seitige Silbentrennung für die meisten Seiten oder für Inhaltsseiten ein. So werden auch Texte mit langen wissenschaftlichen Fachbegriffen kompakt dargestellt.
Lesbarkeit
Umfangreiche Tabellen bleiben auf Smartphones übersichtlich. Einige Tabellen kann man swipen, bei anderen werden sie transponiert (Zeilen- und Spaltenfelder werden getauscht).
Responsive Tabellen
Eine umfassende Dokumentation stellt sicher, dass der Kunde autonom neue Frontend-Module erstellen kann.
Die Dokumentation enthält u.a. Guidelines für die Bilddarstellung und Code-Beispiele. Sie ist komplett durchsuchbar mit auto-complete.
Ideen & Ergebnis
Wesentlich für den Erfolg des Projekts war, dass wir nicht nur den Code, sondern auch den Content und damit die User Experience für das kleine und das übergrosse Gerät optimiert haben. Deshalb haben interne und externe User den neuen Auftritt schnell akzeptiert.
Trotz hoher Komplexität habt ihr es geschafft, dass das Projekt reibungslos über die Bühne ging. Es macht Spass, mit dem Handy auf der ETH-Webseite zu surfen.
Simon Zogg, ETH Zürich, Hochschulkommunikation