Studis Online stellt umChronologie der Umstellung auf Responsive Webdesign
Im August 1999 startete Studis Online als kleine Infowebseite mit einigen wenigen Seiten und Linklisten. Über die Jahre wuchs das Angebot, inzwischen haben wir monatlich Millionen von Seitenaufrufen und Hunderttausende an BesucherInnen zu verzeichnen. Die letzte größere Designänderung unserer Seite erfolgte 2010 – und für Smartphones hatten wir vor einigen Jahren für das Forum eine spezielle Variante angelegt (die aber kaum mit dem Rest zu tun hat). Seit Ende 2013 arbeiten wir – zunächst im Hintergrund (wegen des Tagesgeschäfts aber immer nur zeitlich eingeschränkt) – an einem neuen Design. Eigentlich hätten wir mit der Umstellung früher starten wollen – immerhin konnten wir zum fünfzehnjährigen Jubiläum von Studis Online im August 2014 wenigstens den BAföG-Rechner im neuen Design präsentieren. Dieser Artikel enthält die Umstellungsschritte umgekehrt chronologisch – und ist seit 20.01.2015 selbst auch im neuen Layout.
Wollt Ihr einen Fehler melden? Dann direkt hier entlang.
15. Forum (22.05.2015)
Nach einigen weniger auffälligen Zwischenschritten nach dem 14., die nicht so auffällig waren (weil sie immer nur ein paar Artikel da und dort betrafen), ist nun auch das Forum umgestellt. Was im Forum selbst zu heißen Diskussionen führte (siehe hier), die sich aber nach einigen Anpassungen unsererseits inzwischen beruhigt haben.
Zwar gibt es nun immer noch einige wenige „Rest-Seiten“, die immer noch einer Umstellung harren. Diese fallen aber zahlenmäßig (und von der Nutzung) nicht mehr sonderlich ins Gewicht. Daher beenden wir mit dieser Ergänzung auch die Aktualisierung dieses Artikels. Änderungen an der Seite wird es natürlich weiterhin geben – eine Webseite ist immer im Bau, solange sie aktiv betrieben wird!
14. BAföG-Bereich komplett / News-Übersichten (03.03.2015)
Inzwischen sind alle Artikel im Bereich BAföG umgestellt – das hat länger gedauert, weil dort zum Teil auch Grafiken und Tabellen anzupassen waren und wir z.T. auch die Texte nochmals lesbarer gemacht haben. Nun sind wir damit durch, lediglich die sehr alten BAföG-Paragraphen von 2010 und früher harren noch einer Anpassung.
Und die chronologischen Übersichtsseiten für neue Artikel sind nun auch fertig: Studieren aktuell, Hochschulpolitik aktuell, Geld+BAföG aktuell und Beruf+Karriere aktuell. Bei letzterer müssen wir uns dann auch wieder verstärkt um aktuelle Berichte kümmern.
13. Bei Smartphones: Spalte nach unten (29.01.2015)
Zunächst hatten wir die auf allen Seiten (außer der Homepage und den Channel-Übersichtsseiten) vorhandene Spalte auf kleineren Bildschirmen ausgeblendet, man konnte sie durch Klick auf ein Element rechts am Rand „hervorholen“. Allerdings stellte sich das Scrollen in der Spalte als zwar möglich, aber nicht sonderlich komfortabel (und fehleranfällig) heraus. Daher hängen wir die Inhalte der Spalte nun einfach unterhalb der Hauptinhalte an – und ermöglichen über einen schwebenden Button („Spalte“) jederzeit den direkten Zugriff. Wir hoffen, dass dies für alle NutzerInnen die bessere Lösung ist.
12. Aktuelle Artikel (20.01.2015)
Endlich sind auch die Artikel dran. Um diese umstellen zu können, mussten auch Funktionen wie die Artikel-Empfehlung, die Kommentar-Funktion und einiges mehr angepasst werden – das zog sich neben dem Tagesgeschäft doch ganz schön hin. Da es innerhalb der Artikel auch das eine oder andere besondere Element gibt, dass speziell angepasst werden sollte, stellen wir nicht alle Artikel auf einen Schlag um, sondern haben uns zunächst auf die letzten Artikel beschränkt und werden das dann nach und nach ausweiten. Immerhin ist nun auch dieser Artikel selbst erstmals im neuen Design!
11. BAföG-Gesetz (08.01.2015)
Die Paragraphen des neue BAföG-Gesetzes (nach beschlossenem 25. BAföGÄndGesetz) sind nun gleich im neuen Layout vorhanden. Aber auch die alte BAföG-Fassung (die insbesondere in Bezug auf Freibeträge und Bedarfssätze noch bis Ende des SoSe 2016 gilt) haben wir auf das neue Design umgestellt.
10. Diverse Optimierungen (12.12.2014)
Nun sind auch unsere NC-Listen und die Listen zulassungsfreier Studiengänge umgestellt.
„Nebenbei“ haben wir noch das Layout der Spalten auf allen Inhaltsseiten verändert und die Ansicht auf mobilen oder anderen Geräten mit kleinem Bildschirm verbessert. So ist das Menü nun auch auf kleineren Bildschirmen noch direkt zugänglich, das Suchfeld wandert dafür ganz nach oben.
9. Studienfach- und Hochschuldatenbank (05.12.2014)
Auch wenn noch einige Kleinigkeiten nachzuziehen sind (Verzeichnis der Zulassungsgrenzen/NC und der zulassungsfreie Studiengänge, die ja letztlich auch aus der Datenbank stammen), so ist nun endlich unsere Hochschul- und Studienfachdatenbank ins neue Layout übergeführt. Bei der Gelegenheit haben wir unsere Suche auch noch um einige Filter erweitert. Konkret um einen Filter Studiendauer bei den Studienfächern – um gezielt Master bzw. Bachelor mit einer bestimmten Semesterzahl [und damit in der Regel auch ECTS-Credits] finden zu können – und um einen Filter Träger bei den Hochschulen – um gezielt nur nach privaten, staatlichen oder kirchlichen Hochschulen suchen zu können.
8. Lexikoneinträge und Googlesuche (20.11.2014)
Unser Hochschullexikon ebenso wie das BAföG-Glossar (eine Untermenge des Lexikons, hier dann inkl. der einschlägigen BAföG-Paragraphen in der Übersicht) erstrahlen nun auch im neuen Layout. Bei der Gelegenheit haben wir auch gleich die Seite angepasst, auf die man gelangt, wenn unsere eigene Suche (die bisher nicht die einzelnen Artikel, sondern nur die Lexikon-Stichwörter durchsucht) nichts findet und auf die Hilfe von Google zurückgreift. Siehe hier (man kann dort auch direkt eine Google-Suche starten, die nur Treffer auf unserer Seite anzeigt).
7. Fachbereichsübersichten und kleine Details (18.11.2014)
Die Anpassung der Studienfach- und Hochschuldatenbank ans neue Layout zieht sich etwas länger hin – das ist halt ein großer Brocken. Einen kleinen Teilbereich konnten wir nun aber livestellen: Unsere Fachbereichsübersichten, also unsere Kategorisierung der Studienfächer in verschiedene (Fach-)Bereiche, über die man verwandte Studiengänge finden kann.
Gleichzeitig haben wir nun auf allen Seiten im neuen Layout auch die automatische Silbentrennung in den meisten Browsern (Safari und Firefox schon seit langem, IE ab Version 10) aktiviert – nur Chrome unterstützt das leider nicht. Da dieser Artikel noch im alten Layout ist, sieht man das hier nicht.
6. Die neue neue Homepage (09.10.2014)
Die zunächst online gegangene neugestaltete Homepage war „radikal“: Statt sehr viele Inhalte zu verlinken, wurde – neben einiger aktueller Inhalte und Terminhinweise – nur noch mittels großer Bilder und Links auf die Bereichtsübersichten weiterverwiesen. Wie wir feststellen mussten, stieg seither die Zahl derer, die die Seite nach dem Besuch der Homepage verlassen haben, doch merkbar. So haben wir uns nun entschieden, die Homepage ähnlich der Bereichsübersichten zu gestalten und mehr Inhalte direkt aufzuzählen (und auch zu verlinken). Denn die neuen Bereichsübersichten haben bisher weniger „Abspringer“ als die alten.
5. Termine umgestellt, weitere Anpassungen (07.10.2014)
Die Termine im Bereich Studienwahl (Studieninformationstage etc.) und die Termine im Bereich Beruf (Firmenkontaktmessen etc.) erstrahlen nun auch im neuen Design.
„Nebenbei“ haben wir die Darstellung für Smartphones verändert und zeigen nun bei kleinen Screens alles in kleineren Schriftarten an – damit auch bei wenig Platz mehr angezeigt werden kann. Das gilt auch für die im BAföG-Rechner oder bei den Terminen einblendbare Spalte.
4. Bereichsübersichten umgestellt (02.10.2014)
Im Gegensatz zur Homepage, die nicht mehr ins Detail geht, sondern wirklich nur noch auf die Hauptbereiche weiterleiten soll, zeigen die neuen Bereichsübersichten wie auch bisher ausführlich, was wir in den einzelnen Bereichen an Inhalten bieten. Nun aber im neuen Layout, mobilfähig und – so hoffen wir – übersichtlicher als bisher.
3. IE 8 wird wird weiter unterstützt (25.09.2014)
Einige Tage haben wir NutzerInnen des Internet Explorer 8 oben auf unserer Webseite darauf hingewiesen, dass das neue Layout den IE 8 nicht mehr unterstützen wird. Nun ist es leider so, dass der IE 8 trotz eingestellten Supports durch Microsoft immer noch von ca. 2% der Besucher von Studis Online genutzt wird (oder genutzt werden muss …). Wir hatten eigentlich während der Entwicklung unseres neuen Designs gehofft, dass die Nutzerquote schneller sinken wird. Da dies nicht der Fall ist, haben wir nun ein wenig Zeit investiert, um doch auch IE 8-NutzerInnen unsere neue Seite so schön wie möglich zu präsentieren. Wir denken, das ist gelungen.
Wer es ganz genau wissen will: Um den IE 8 zu unterstützen, binden wir – so wir diesen Browser (oder einen noch älteren IE) erkennen – ein verändertes CSS und eine andere Javascript-Bibliothek ein. Wegen der Einschränkungen des IE 8 in Bezug auf neue Webstandards sieht die Seite dann leicht anders aus, da bspw. Verläufe, Schatten oder durchsichtige Elemente nicht möglich sind. Auch die automatische Anpassung („responsive Webdesign“) der Seite auf die Breite des Browsers fällt weg, die Seite ist auf 960px Breite „festgezurrt“.
Trotzdem: Wer kann (also seinen Rechner selbst administrieren kann und keinen zu alten Computer besitzt), sollte entweder eine neuere Internet-Explorer-Version verwenden (geht allerdings nur, wenn mind. Windows Vista verwendet wird) – oder gleich das Betriebssystem upgraden.
2. Umstellung: Die neue Homepage (19.09.2014)
Über die Jahre haben sich so viele Inhalte angesammelt, dass die Homepage immer umfangreicher wurde. Was nicht unbedingt zur Übersichtlichkeit beitrug. Daher haben wir uns nun entschieden, die Seite deutlich schlanker zu gestalten und nur auf die großen Bereich hinzuweisen, ohne einzelne Seiten hervorzuheben.
Die „News“ nehmen jetzt weniger Platz ein, weil immer nur eine Meldung angezeigt wird, die aber nach ca. 10 Sekunden weiter läuft. Wer selbst schneller durchblättern will, kann das mit den Pfeiltasten (je nach Größe des Browserfensters rechts unten im grau umrandeten Block oder oben). Auch ein Pausieren ist möglich (erneuter Klick auf das Pausenzeichen führt dann direkt zur nächsten Meldung).
Neben den „News“ gibt es als aktuelle Elemente auch noch Termine und weiter unten die neuesten Beiträge aus dem Forum.
1. Umstellung: Der neue BAföG-Rechner! (29.08.2014)
Ein erster großer Erfolg war und ist der BAföG-Rechner, den wir daher aus Anlass des Jubiläums und des Entwurfes des 25. BAföG-Änderungsgesetzes als erstes überarbeitet haben.
Die Rechenroutinen sind unverändert, aber um eine Variante für das BAföG ab Wintersemester 2016/2017 erweitert. Sofern das 25. BAföG-Änderungsgesetz wie von der Bundesregierung vorgelegt auch wirklich verabschiedet wird, kann man also schon heute ausrechnen, was man zukünftig erhalten würde. Dazu einfach gleich auf der Startseite des Rechners bei Beginn Bewilligungszeitraum „WiSe 2016 (Plan)“ auswählen – oder mit aktuell passendem Beginn starten und auf der Ergebnisseite den Link „unverbindliche Vorschau BAföG 2016/2017“ im ersten Hinweis auf der Seite anklicken.
Wirklich anders sieht aber das Design des Rechners aus. Die Farbgebung ist zwar ähnlich und auch die Abfolge der abgefragten Daten ist gleich geblieben, die Elemente sehen aber anders aus. Besonders augenfällig wird das, wenn man die Seite auf einem Smartphone aufruft. Dank „responsive Webdesign“ passt sich die Seite nämlich an die Größe des Browserfensters an. Überall, wo Zahlen einzugeben sind, sollte ein Smartphone automatisch die Zahlentastatur einblenden. An einigen Stellen (Zahl der Geschwister, eigene Kinder etc.) haben wir statt eines Eingabefeldes eine Auswahlliste eingefügt (der Zahlenbereich ist ja begrenzt ;), um die Eingabe zu erleichtern. Je nach Browserversion werden einige Fehleingaben (Buchstaben statt Zahlen u.ä.) schon vor dem Absenden des Formulars angemahnt.
Auf einem Smartphone (oder auch auf dem Desktop, wenn man das Browserfenster entsprechend schmal einstellt) wird die rechte Spalte ausgeblendet, ist aber über den „Greifer“ rechts am Rand noch erreichbar (per Klick auf das Pfeilsymbol). So sollte es jedenfalls sein, wir konnten das aber nur mit einzelnen Smartphones testen.
Fehler? Probleme? Bitte melden!
Das neue Design macht Gebrauch von aktuellen Webstandards (HTML5, CSS3, AJAX). Wir testen die Seite mit aktuellen Versionen von Firefox, Safari, Chrome und Internet Explorer, können aber insbesondere auf Smartphones nicht jede Variante von Gerät und Browser im Blick haben. Falls Ihr daher Probleme feststellt, meldet diese bitte – am besten als Kommentar zu diesem Artikel (bitte Browserversion, Betriebssystem und genaue Stelle, an der es ein Problem gibt, angeben). Danke!