Update von PhysikOnline zum WS16/17 - Teil 1: Design

Lars Gröber Dienstag 27. September 2016

Als wir zu Beginn des Sommersemesters 2016 mit den Arbeiten am neuen Update begonnen hatten, war ein neues Design noch nicht geplant. Der Fokus sollte auf der Verbesserung des Funktionsumfanges und der Behebung von Fehlern liegen. Die Überlegung war - und ist auch immer noch - unser eLearning System in Zukunft auch hinter den Kulissen deutlich moderner zu gestalten (hat jemand Web-App gesagt?). Somit hätte ein neues Design nur kurzfristig einen Nutzen.

Nach der ersten Testinstallation von ILIAS 5.1 (ILIAS ist das System hinter PhysikOnline und momentan noch in der Version 4.3) wurde jedoch schnell klar, dass das alte Design nicht mehr mit den aktuelleren Versionen von jQuery, einem Javascript Framework, das Elemente der Seite interaktiv macht, zusammen arbeitet und somit nicht einfach übernommen werden kann.

Wir hatten also zwei Möglichkeiten: entweder wir versuchen die Probleme zu lösen oder arbeiten an einem komplett neuem Design. Aufgrund der Ungewissheit darüber, welche Probleme auftauchen würden bzw. wie hoch der Zeitaufwand wäre, und die schlechte Nutzbarkeit des alten Designs auf mobilen Endgeräten haben uns wir uns für die zweite Option entschieden.

Die aktuelle Hauptseite im neuen Design, das bekannte Hauptmenü lässt sich über den Button oben links ausklappen. (die Bilder sind mit einem Administrator Account erstellt worden und das Design kann sich bis zum Update noch ein wenig ändern)

Um nicht komplett bei null anfangen zu müssen, haben wir das Design der Uni Freiburg, das die Betreiber dort auf GitHub veröffentlicht haben, als Basis verwendet und an unsere Vorstellungen angepasst. Das neue Design baut auf dem weit verbreitetem Framework Bootstrap auf, das nach dem Mobile-First Motto entwickelt wurde und sich deshalb der Bildschirmbreite anpasst.

Wenn sich der Bildschirm weit genug verkleinert, erscheinen am oberen linken Bildschirmrand die vertrauten drei Balken, die das Menü öffnen. Somit lässt sich der eigenen "Schreibtisch" und ungelesene Mails auch auf einem Smartphone oder Tablet leichter erreichen.

In der alten Version hat PhysikOnline eigentlich gar keine mobile Ansicht, zumindest keine, die sich von der Desktopansicht unterscheiden würde. Zwar gibt es bei der vorherigen ILIAS-Version eine mobile Ansicht, jedoch ist diese nur schwierig zu benutzen, hat einige Bugs und viele Features fehlen. Aus diesem Grund hatten wir uns dagegen entschlossen, die Ansicht zu aktivieren.

Ziel des neuen Designs war es, einen Mittelweg zwischen dem bekannten Design der Goethe-Universität (z.B. das von OLAT oder der Uni-Homepage) und der Eigenständigkeit unseres alten Designs zu finden. Dabei findet man bekannte Elemente, wie das Goethe-Logo - auf der Desktopansicht - in der linken oberen Ecke oder die stilisierte Skyline von Frankfurt. Auch die blaue Farbe lässt sich auf Seiten der Universität wiederfinden.

Wir werden das Design (das wir nach der ILIAS-Version po-v5.1 nennen) auch in Zukunft erweitern und verbessern. Einige Ideen sind zum Beispiel eigene Icons (zu Beginn werden wir die Icons verwenden, die ILIAS mitbringt), eine bessere Anpassung des Footers an mobile Geräte und die Anzeige von neuen (System-)Nachrichten als eigenes Element in der Navigationszeile.

Da es sich hier meist nur um die Änderung einzelner Dateien handelt, wird die Plattform dafür im Regelfall nicht offline gehen müssen. Wir würden uns freuen, Eure Meinung zu hören, falls Ihr auf Probleme stößt oder Vorschläge habt, wie das Design verbessert werden kann, schickt uns doch eine Mail.


Dies ist der Blog des PhsikOnline Teams. Themen reichen von Neuigkeiten und Hintergrundberichten über unsere Projekte bis zur eigenen Meinung über die Farbe des OSZ. Bei Fragen und Anmerkungen könnt ihr Euch an blog@elearning.physik.uni-frankfurt.de wenden. Gastbeiträge sind immer willkommen!

Für den Inhalt der Einträge sind die jeweiligen Autorinnen/Autoren verantwortlich. Die Einträge spiegeln nicht unbedingt die Meinung des PhysikOnline Teams wider, offizielle Stellungnahmen o.ä. sind als solche gekennzeichnet.