Für das Layout des zentralen Webauftritts unter www.fu-berlin.de bedeutete die Umstellung auf das responsive Design einen Paradigmenwechsel: Wurden Inhalte bisher in Spalten angeordnet, werden sie nun  in Zeilen gruppiert. Bei einer zuvor festgelegten Bildschirmbreite – dem sogenannten „Breakpoint“ –  bricht das Layout um und ordnet die Inhalte, also Bilder oder Texte, automatisch neu an.

Die zeilenbasierte Anordnung der Elemente hat dabei den Vorteil, dass zusammengehörige Informationen, beispielsweise aktuelle Inhalte wie News oder Termine, auch auf kleineren Bildschirmen beieinander dargestellt werden und die Webseiten auch auf kleinen Geräten übersichtlich bleiben.

Eine etwas größere Schrift und größere Bilder sollen insgesamt die Übersichtlichkeit und den Lesefluss verbessern. „Mit dem responsiven Design für die Hauptseiten der Freien Universität Berlin wurde ein wichtiger Meilenstein in der Flexibilisierung des Corporate Designs im Web erreicht, ohne dabei seine Prägnanz und seinen Wiedererkennungswert zu mindern. Die größte Herausforderung bestand für uns darin, ein Design zu entwickeln, welches die Anforderungen der unterschiedlichen Geräte und Displaygrößen berücksichtigt und außerdem mit den bestehenden Inhalten – strukturell sowie inhaltlich – umzugehen weiß“ erläutert Gösta Röver, die gemeinsam mit Dr. Albert Geukes am Center für Digitale Systeme (CeDiS) das Projekt leitet.

Die Quadratur des Kreises

Bei der Umstellung auf ein responsives Design geht es allerdings nicht ausschließlich um die Bewältigung eines technischen Problems. Die eigentliche Aufgabe ist viel komplexer, denn man sucht nach einer wenn möglich optimalen Darstellung von Inhalten für verschiedene Bildschirmgrößen. „Die Grundfrage bei einer Gesamtlösung ist, ob eher für die kleineren Oberflächen optimiert wird und man eine gewisse Suboptimalität bei den größeren Bildschirmen in Kauf nimmt oder umgekehrt. In unserem Fall haben wir uns dafür entschieden, bei der Optimierung der Darstellung die kleineren Oberflächen zu bevorzugen“, sagt Professor Nicolas Apostolopoulos, Leiter des Centers für Digitale Systeme.

Die Technik hinter dem Update

Neben den Hauptseiten der Freien Universität unter www.fu-berlin.de umfasst der zentrale Webauftritt aktuell rund 100 Teilauftritte, die von rund 500 Redakteurinnen und Redakteuren betreut werden. Die Mitarbeiterinnen und Mitarbeiter des CeDiS haben für die unterschiedlichen Anforderungen an die Darstellung von Inhalten neue Vorlagen im Content-Management-System (CMS) entwickelt, wie zum Beispiel die neue Slideshow, die animierte Aufmacherliste, die Vorgestellt- und Termin-Box und bestehende Vorlagen den Ansprüchen des responsiven Designs angepasst.

„Letztlich mussten wir während des laufenden Betriebs im CMS fast alle Programme und Spezifikationen zur Veröffentlichung und zur Gestaltung der Webseiten neu erstellen. Die neuen Anforderungen von Technik und gestalterischem Layout sollten dabei so umgesetzt werden, dass die bestehenden Inhalte im CMS möglichst unverändert übernommen werden können, die Redakteurinnen und Redakteure also nur in Ausnahmefällen inhaltlich nachjustieren müssen", hebt Albert Geukes hervor.

Horizontale Hauptnavigation ersetzt Linksnavigation

Eine besondere Herausforderung für Designer und Entwickler war es, eine Navigation zu entwickeln, die sowohl auf einem großen Desktop-Monitor als auch auf einem kleinen Smartphone-Display benutzerfreundlich bedient werden kann. Die Lösung: Eine horizontale Navigation, die als Block ausklappt und in der alle weiteren Ebenen auf einen Blick erkennbar sind. Auf kleinen Bildschirmen lässt sich die Navigation vertikal ausklappen.  

Durch den Wegfall der linken Navigation umfasst der Inhaltsbereich nun die komplette Breite des jeweiligen Bildschirms. Ergänzt wird die horizontale Navigation durch eine größere Variante der sogenannten „Mikro-Navigation“, die dem Nutzer anzeigt, auf welcher Ebene er sich innerhalb des Internetauftritts befindet.

Nicht nur das Layout des Webauftritts wurde neu gestaltet, auch die Struktur und Inhalte wurden überarbeitet. „Nutzerinnen und Nutzer sollen einfacher und intuitiver zu den von ihnen gesuchten Inhalten gelangen. Deshalb ist die Startseite der Freien Universität deutlich umfangreicher als zuvor“, sagt Stephan Töpper, Leiter der Zentralen Online-Redaktion. Studieninteressierte, Studierende und Promovierende finden zum Beispiel in der Zeile „Studieren und Promovieren“ die für sie relevanten Inhalte in Form von thematisch gebündelten Direktlinks.

Dank der größeren Slideshow fallen die wichtigsten Ereignisse und Ankündigungen besser ins Auge. Darunter nehmen der aktuelle campus.leben-Artikel und die Schlagzeilen mehr Raum ein. Der Veranstaltungskalender ist eine Reihe nach unten gerückt ist, dafür erscheint er aber in einer kompletten Zeile.

Neu ist außerdem die Zielgruppen-Navigation. Im Header klappt nun unter dem Pfeil „Informationen für“ eine Liste mit Angeboten für Alumni, Schülerinnen und Schüler, Studieninteressierte, Studierende, Wissenschaftlerinnen und Wissenschaftler, Pressevertreter, Weiterbildungsinteressierte sowie Mitarbeiterinnen und Mitarbeiter auf. Im Footer werden die Links auf diese Zielgruppen noch einmal wiederholt. Der Vorteil: Die Zielgruppenseiten sind nicht nur über die Startseite, sondern auf allen Seiten des zentralen Webauftritts mit einem Klick verfügbar.

„Uns war vor allem wichtig, Informationen für Mitarbeiterinnen und Mitarbeiter besser auffindbar zu machen. Der erste Schritt dafür ist getan, zukünftig soll diese Seite die zentrale Service-Seite für alle Mitarbeiterinnen und Mitarbeiter sein“, sagt Stephan Töpper.

Neuer Navigationspunkt International

Neu ist auch der Hauptnavigationspunkt International, über den sich Interessierte über die internationale Ausrichtung und Vernetzung der Freien Universität informieren können – von Austauschprogrammen für Studierende, über aktuelle Veranstaltungen wie die Ende Juni stattfindende International Week bis hin zu internationalen Fördermöglichkeiten für Wissenschaftlerinnen und Wissenschaftlern.

Diese Symbiose zwischen Design und Funktionalität ist das Ergebnis enger Zusammenarbeit zwischen der Stabsstelle Presse und Kommunikation und CeDiS, betont Nicolas Apostolopoulos.

---

Das Projekt Responsive Design wird fortgeführt: Die CeDiS-Teams CMS (Programmierung: Gergely Bertalan, Dr. Mattis Neiling; Teilprojekte: Radu Tetcu, Dr. Pauline Vilentschuk) und Design (Frank Beier, Nadia El-Obaidi) werden ab sofort in weiteren Teilprojekten und in Abstimmung mit den jeweiligen Web-Verantwortlichen auch die Internetauftritte der Fachbereiche, Institute und anderer Einrichtungen auf die neue Gestaltung umstellen.