Es ist soweit
Nach sechs Monaten Entwicklungszeit und dem Umzug von 4000 Einzelseiten war es im Mai 2018 endlich soweit:
Die neue Webseite der Frankfurt University ist online!
Sie erfüllt alle Anforderungen an eine moderne Webseite: Responsiv, klare Layouts, barrierefrei und einfach zu benutzen – auf jedem Bildschirm.
Das Team der Zentralen Webredaktion und das Team web//März haben den vergangenen März genutzt, um den Umzug von der alten Webseite auf die neue zu vollbringen.
Neue Features wie die überarbeitete Navigation und Suche, virtuelle Rundgänge und Videoinhalte erlauben interessante und lesenswerte Seiten, die einfacher zu finden sind.
Eine komplett neue Sammlung an Bildern rundet den neuen Auftritt ab und sorgt dafür, dass Besucher gezielt angesprochen werden.
Schauen Sie sich um, es gibt viel zu entdecken!
Das Top-Feature: Responsiv.
1
2
3
4
Bereit für jeden Bildschirm
Ganz im Gegensatz zur alten Seite passt sich die neue Webseite an den Bildschirm an, auf der sie angezeigt wird.
Egal ob auf einem 5" Handy oder einem 42" Fernseher, Hoch- oder Querformat, jede Seite kann ihr Layout individuell anpassen.
Werbewirksame Seiten (wie diese hier) können auch die gesamte Breite des Bildschirms einnehmen und komplexe Layouts enthalten – das starre Dreispalten-Format existiert nicht mehr.
Das hat auch Auswirkungen auf die Redakteure, die die Seiten erstellen: Sie starten mit einer leeren Seite und können das Layout ideal auf den Inhalt zuschneiden.
Alle Seiten entstehen nach der "Mobile first"-Strategie. Sie werden zuerst für kleine Bildschirme entwickelt und erst im späteren Verlauf für große Bildschirme angepasst.
Mehr als nur Text und Bild
Virtuelle Rundgänge in 360°
Unser Campus ist vielleicht nicht der Größte, trotzdem beherbergt er viele Orte, die den meisten unbekannt bleiben.
Viele Studierende wissen vielleicht nicht, dass sie im Labor für Fertigungstechnik 3D-Druckwerke anfertigen lassen können, dass es einen KFZ-Prüfstand unter dem Gebäude 4 oder eine komplette Ausstellung zum Thema Barrierefreies Wohnen und Leben gibt.
Daher haben wir uns unsere 360-Grad-Kamera geschnappt und einige versteckte und interessante Orte auf dem Campus ablichten. So können auch Wirtschaftsstudierende einen kleinen Einblick in die Ingenieurwerkstätten erhalten.
Auch für Studieninteressierte kann dies eine Möglichkeit sein, sich näher über das zukünftige Studium zu informieren: Wie sehen die Architekturwerkstätten aus? Ist der Gebäudezugang barrierefrei? Wie sieht der Hörsaal aus?
Mithilfe des quelloffenen Projektes Pannellum sind wir nun in der Lage, nicht nur einzelne Räume begehbar zu machen, wir können auch vollständige Rundgänge erstellen - ähnlich wie "Google Street View".
Bildergalerien im Vollbild mit PhotoSwipe
Bildergalerien waren im alten Auftritt nicht möglich. Jedes Bild musste auf der Seite zu sehen sein, wenn z.B. zehn Bilder zu zeigen werden sollten, wurde die Seite sehr schnell sehr voll. Auch Quer- und Hochformate hätten für Probleme gesorgt.
Nun haben wir im neuen Auftritt zwei Möglichkeiten eine höhere Anzahl an Bildern zu präsentieren: Mit dem Slider (wie z.B. auf der Startseite) oder nun mit PhotoSwipe. PhotoSwipe eignet sich dafür, das komplette Bild in einer Vollbildgalerie anzuzeigen, wohingegen der Slider in der Regel einen Bildausschnitt zeigt mit ggf. einem Titel und Verlinkung zu einer anderen Seite.
Das Plugin kommt mit unterschiedlichen Bildgrößen und Formaten klar, die Darstellung wird automatisch angepasst - auch zoomen in den Bildern ist möglich. Ebenso ist es für Touch optimiert, mit den gängigen Pinch-To-Zoom Gesten wie auch dem herunterziehen zum Schließen kommt PhotoSwipe klar.
Auch spart es viel Platz auf der Seite. Erst wenn das Vorschaubild angeklickt wird, öffnet sich die Galerie.
Dieses Feature ist besonders für Architekturprojekte interessant.
Die Galerie ist stellt z.B. ein wichtiges Gestaltungselement auf den Seiten von Prof. Dr. Claudia Lüling dar, um die vielseitigen Projekte detaillierter darzustellen.
Multimediale Inhalte eingebettet auf der Seite
Obwohl unsere Hochschule aktiv in Videoinhalte investiert, entweder durch Studierendenprojekte oder durch die Leitung der Hochschule, war es bisher nicht möglich, Videos datenschutzkonform in der Seite einzubauen.
Dank der Arbeit der Abteilung MedieLL und deren neuen Videoserver sowie der Videoplattform Panopto ist es nun möglich, Videos in die Seite einzubauen. Eine Verlinkung zu externen Videohostern entfällt nun, Besucher müssen nicht mehr aus der Seite geführt werden, um ein Video zu sehen.
Die neue Webseite erlaubt es uns Seiten zu bauen, die vorher schlicht unmöglich waren.
Ohne die studentische Hilfe wäre der Web-Relaunch nicht möglich. Die Internetseite ist die Visitenkarte der Hochschule, darum bedanke ich mich bei allen Helferinnen und Helfern, die dieses Projekt tatkräftig unterstützen und unterstützt haben.
Rund 4.000 Einzelseiten werden bei diesem Umzug von der alten zur neuen Webseite mitgenommen. Das ist ein großer Zeitaufwand, denn jeder Seiten-Umzug dauert im Schnitt etwa 17 Minuten.
Schneller zum Ziel
Die neue Navigation und Suche
Eines der wichtigsten Ziele der neuen Webseite ist: Schneller von A nach B, egal ob über die Navigationsstruktur oder über die Suche.
Mithilfe des "Hamburger-Menüs" kann zu jeder Seite im Auftritt navigiert werden; es ist nicht mehr nötig, sich von Seite zu Seite zu klicken, um ans Ziel zu kommen.
Anhand von Farbcodierungen behalten die Seiten ihre Zuordnung zu den Fachbereichen und Einheiten der Hochschule bei; auch externe Links und Weiterleitungen sind möglich.
Die Studiengänge wurden aus den Fachbereichen gelöst und sind nun unter "Studium" zu finden.
Die Studiengangsseiten sind ebenfalls neu strukturiert worden:
Sie bestehen nun aus drei Seiten: Die Werbeseite, die Seite für Studieninteressierte und die Seite für Studierende.
Die Werbeseite soll den Studiengang repräsentieren und bewerben. Sollten Besucher weitere Informationen wünschen, gelangen sie zur Seite für Studieninteressierte. Hier wird im Detail der Studiengang erklärt und es werden die Module und Angebote rund um die Hochschule vorgestellt.
Für Studierende enthält die Studiengangsseite Quicklinks zu häufig genutzten Angeboten und aktuelle Nachrichten passend zum Studiengang.
Alle drei Seiten folgen einem vorgegebenen Muster; allerdings können die Studiengangsleitungen in einem dafür vorgesehenen Bereich ihrer Kreativität freien Lauf lassen.
Die Suche hat auch ein großes Update bekommen: Suchanfragen können noch während der Eingabe vervollständigt werden, Ergebnisse sortiert und gefiltert und sogar hochgeladene Dokumente können durchsucht werden.
Stockbilder raus, echte Studierende rein
Im Zuge des Relaunches wurde auch eine neue Bildsprache für die Webseite eingeführt.
In das neue Konzept passen nur sehr wenige der schon vorhandenen Bilder. Daher wurde es notwendig, eine neue Sammlung an Fotos für Studiengänge, Labore und andere Einrichtungen an der Hochschule anfertigen zu lassen.
Dafür benötigten wir die Hilfe des Profifotografen Ralf Braum. Er ist der Hochschule nicht unbekannt – 2013 schoss er bereits die Bilder für den Fachbereich 3: Wirtschaft und Recht, auf deren Basis das neue Bildkonzept der Webseite aufbaut.
Ein bekannter Kritikpunkt der Bilder auf der alten Webseite war, dass sie unauthentisch wirkten, da oft Bilder von Fotostock-Anbietern verwendet wurden, welche die Realität an der Hochschule nur beschränkt darstellen. Also riefen wir unsere Studierenden, Mitarbeitenden und Lehrenden auf, ein Teil der neuen Bilder zu werden.
Die Studierenden konnten sich bei einem freien Casting Anfang März als Model bewerben; an zwei Wochenenden Ende März und Anfang April wurden die Bilder geschossen.
Das Ergebnis kann sich sehen lassen: Frische, helle und werbewirksame Bilder, die einen Einblick in das Studium geben und den Besucher gezielt ansprechen.
Von Anfang an bei der Planung dabei – unsere Studierenden
Studium Generale Modul im Wintersemester 17/18 "Relaunch einer Webseite"
Im Rahmen des Studium Generale-Moduls "Relaunch einer Website" haben Studierende aller Disziplinen ihr spezifisches vorhandenes, unterschiedliches Wissen kommuniziert und es mit anderen gemeinsam organisiert, um die Bedürfnisse der Zielgruppen einer Internetseite multiperspektivisch zu beleuchten. Die Interdisziplinarität der Teilnehmenden und Lehrenden war konstitutiv für das Thema.
Als Beispiel dienten die Studiengangsseiten der Frankfurt University of Applied Sciences. Wir begannen mit dem aktuellen Stand der Dinge und arbeiteten uns in Arbeitsgruppen zu acht Entwürfen (zwei je Fachbereich) durch, wie sich die Studierenden ansprechende Studiengangsseiten vorstellen. Neben Schulungen für TYPO3 Version 8.7 und Informationen zu Rechtsthemen erhielten die Studierenden Einblick in den Relaunch-Prozess und standen mit ihren Entwürfen in Konkurrenz zu denen, die die Verantwortlichen der jeweiligen Studiengänge entwickeln. Die Präsentationen wurden aufgezeichnet und bewertet.
Das Team web//März
Wir haben die neue Seite zusammengebaut.