FAU Designs: Version 1.8

Dienstag, 17. Oktober 2017

Die neue Version 1.8 wird diese Woche ausgerollt.

Im Unterschied zur aktuellen Version 1.7.20 (12. Juli), welche bereits ein Zwischenupdate war, kommt es zu Fehlerkorrekturen und es werden einige (lang ersehnte) neue Features zur Verfügung gestellt. Aufgrund neuer Browsergenerationen sowie dem Bedarf, das gesamte Theme für kommende Erneuerungen bereit zu machen, war es notwendig, das komplette, unterliegende Grid-System von dem veralteten Bootstrap 2 auf Bootstrap 3 zu aktualisieren.
Die Aktualisierung des Grid-Systems war notwendige Voraussetzung für neue Features und auch für die Behebung einiger alter Fehler, die bereits mit der ersten Version vorhanden waren.

Kommende Updates werden mit dem neuen Grid-System und der neuen SASS-Dateistruktur viel einfacher und modularer möglich sein und damit auch schneller umsetzbar.

Mit Blick auf den Wunsch, viele weitere Webauftritte der Universität auf das neue Design umzustellen, wurden auch Anforderungen und Wünsche aus dem dezentralen Bereich höher gewertet. Viele neue Features haben daher nur geringen oder keinen Nutzen für den Zentralbereich. Sie werden jedoch von Lehrstühlen als so bedeutend angesehen, dass diese bislang auf einen Relaunch verzichteten und auf dem veralteten Webbaukasten verblieben.

Zu einer deutlich sichtbaren Änderung im Design kommt es in der Version 1.8 nicht; gleichwohl gibt es einige optische Anpassungen durch Fehlerkorrekturen, welche nur dann ins Auge fallen, wenn man das Design gut kennt und täglich damit arbeitet. Eine optisch deutlich wahrnehmbare Änderung ist erst in der kommenden Version 1.9 geplant. (Stichwort: „Orga-Breadcrumb“).

Behobene Fehler seit 1.7.20

  • Behebung von fehlerhaften Darstellungen in mobilen Endgeräten:
    • Position des feststehenden Kopfteiles der Seite
    • Fehlerhafte Darstellung der Meta-Links, sowie des Fußteils der Seite
    • Sucheingabe
  • Fehler in der Darstellung des Slides (Startseite Fakultät)
    • Fehlerhafte Größe des Slider-Bildes bei Auflösungen größer 1720px
    • Fehlerhafte Position von Titel und Teasertext
  • Die Anhangseite für Bilder funktionierte nicht mehr (#222).
  • In der normalen Startseite wurde bei nicht verwendeter Beschreibung zur Website ein „Klötzchen“ angezeigt (#153).
  • Die Größen für Texte, Überschriften, Absätze, Listen, Tabellen wurden nochmals vereinheitlicht. Abweichende und fehlerhafte Zeilenhöhen bei einzelnen Bereichen wurden bereinigt (Diverse Bug-Meldungen).
  • Fehlerhafte Darstellung der Startseite bei nicht vorhandenen Beiträgen (#243)
  • Im Backend wurden im WYSIWYG-Editor keine Textstile der Website angezeigt. Dies wurde korrigiert (#251) .
  • Die horizontale Trennlinie war bereits seit Veröffentlichung des Designs in verschiedenen Browsern (z.B. Chrome) nicht sichtbar. Dies ist bislang nicht aufgefallen und wurde nun behoben (#282).
  • Bei der Darstellung von Formularen kam es bei verschiedenen Eingabetypen zu optischen Fehlern. Diese wurden korrigiert (#313).
  • Verschiedene Fehler in der Print-Ansicht der Website wurden korrigiert (#60).
  • CSS-Anweisungen im Meta-Menu wurden nicht gefiltert. Dadurch konnten unerwünschte optische Änderungen durchgeführt werden. Diese Anweisungen werden nun nicht mehr übernommen.

Neue Features

  • Shortcodes
  • Darstellung von Text und multimedialen Inhalten
    • Blockquotes erlauben nun das Weglassen des Quotation-Zeichen (notwendig bei mathematischen Formeln und Texten aus dem nicht-europäischen Kulturkreis)
    • Automatischer Tablesorter
    • Bei den Überschriften H1 bis H3 wurde gemäß Empfehlungen aus der Usabillity die automatische Silbentrennung deaktiviert.
    • Nach Aktivierung durch den Site-Admin ist es möglich, Seiten in einer anderen Sprache zu deklarieren (#143, #202).
      (Hinweis: Dies ersetzt nicht komplette anderssprachige Websites, erlaubt jedoch einen Workaround für einzelne Seiten. Zu beachten ist jedoch, dass diese Funktion zu einer Beeinträchtigung der Auffindbarkeit der Website bei Suchmaschinen führen kann.)
    • Für die Darstellung von Bildern wurde die Möglichkeit geschaffen, diese ohne Rand und Schatten anzuzeigen (#209).
    • Artikel und Seiten können nunmehr die Funktion der „Seitenumbrüche“ nutzen um somit einen langen Text auf mehrere Unterseiten aufzuspalten (#265).
  • Grid-System und optische Anpassungen
    • Das Gridsystem wurde auf Bootstrap 3 umgestellt. Das bisherige Grid-System auf Basis von Bootstrap 2 wurde jedoch zur Abwärtskompatibilität für einige Plugins im Code belassen. Erst nach Anpassung der Plugins wird auch der letzte Code (erkennbar im HTML an Klassennamen der Form .span1 bis .span12) entfernt.
    • Grundsätzlich wird die Zeilenhöhe aller Texte nun einheitlich auf Basis der Schriftgröße berechnet
    • Verschiedene Grafiken wurden durch den Schriftsatz AwesomeFont ersetzt
    • Die Position des FAU-Siegels in der Breadcrumb und dem Hero wurde einheitlich festgelegt.
    • Der Sprachschalter für mehrsprachige Webauftritte wurde erneuert. Angezeigt wird nunmehr Sprache der verknüpften Website und nicht mehr die der aktuellen Website. Außerdem wurde das Symbol vom Globus gewechselt hin zu dem (neuen) internationalen Symbol für Mehrsprachigkeit.
  • Darstellung für mobile Endgeräte
    • Bei der Darstellung der Website auf mobilen Endgeräten unterhalb von 768 Pixel:
      • Das „eigene“ Logo der Website wird ausgeblendet. Stattdessen wird der Titel der Website unter dem FAU-Logo angezeigt.
      • Der Slider der Startseite (Fakultät) entfällt auf diesen Auflösungen.
      • Die Reihenfolge der optischen Darstellung der Inhalte einer Seite in einer kleinen Auflösung orientiert sich an der Wichtigkeit der Bestandteile. Überschrift und Inhaltsbereich haben die größte Bedeutung und sind daher vor zusätzlichen Informationen wie dem Meta-Menü oder den Inhalten der Sidebar angeordnet.
      • Teasertexte im Slider werden ausgeblendet.
    • Bei Auflösungen unterhalb von 480 Pixel:
      • Artikelbilder und Thumbnails in Blogrolls werden 100% des verfügbaren Platzes einnehmen; Bilder und andere Elemente werden mittig ausgerichtet.
      • Werbebanner der Sidebar werden ausgeblendet; Ebenso der Slider und weitere Elemente, die nur repräsentative Zwecke haben.
      • Die Suchmaske wird verborgen und erst durch Klick auf die Lupe sichtbar.
      • Die Hauptnavigation wird in einem Hamburger-Menü verborgen.
  • Barrierefreiheit
    • Elemente der Seite, die rein repräsentative Zwecke haben, werden nunmehr auch als solche via WAI-Markierungen deklariert.
    • WAI-Roles für Breadcrumb und Navigationen wurden ergänzt.
  • Strukturierter Text – Bessere Unterstützung von Suchmaschinen und Bots durch Einbau von schema.org-Markup bei folgenden Inhalten:
    •  Events (sowohl Top-Events, als auch via RRZE Event Plugin),
    • Artikel und
    • Kontakte.
  • Lightbox
    • Bei der Verlinkung von Bilddateien im Inhaltsbereich wird automatisiert die Lightbox aufgerufen (#240).

Sonstige Änderungen

  • Der Link zur FAU wurde bei der textuellen Darstellung von dem Wort „Zur“ (bzw. „To“ in der englischen Version) befreit.
  • Aktualisierung von Default-Bildern und Logos:
    Aufgrund der Zunahme der Bildschirme mit hohen Pixeldichten war es notwendig, die voreingestellten Logos der FAU und der Fakultäten neu in 300dpi abzulegen. Ebenso wurden die Platzhalterbilder für Artikel, Top-Events und Artikelbilder für das Portalmenü neu angelegt und dabei auch vereinheitlicht.
  • Bei nicht verwendeten Artikelbildern und Textinformationen zu Portalseiten im Hauptmenü kann das darunterliegende Submenü im „Flyover“ nun die gesamte Breite einnehmen.
  • Die Breadcrumb-Zeile zeigt nur noch die Elemente vor der eigentlichen Seite. Die aktuelle Seite wird nicht mehr in der Breadcrumb gezeigt, da diese in Form der Überschrift nach der Breadcrumb bereits optisch hervorgehoben gezeigt wird.
  • Der Titel und der Teasertext im Slider werden nunmehr mit einem semitransparenten Hintergrund gezeigt. Der Teasertext nimmt nur 10/12 der Gesamtbreite ein, um eine Überlagerung  mit den Steuerelementen des Sliders zu verhindern.
  • Die interne Codestruktur wurde erneuert um weitere geplante Ausbauten und Änderungen zu ermöglichen:
    • Die komplette SASS-Dateistruktur wurde nochmals verbessert um die Anforderungen an ein atomares Design und eine leichtere Weiterentwicklung durch Dritte zu ermöglichen.
    • Bootstrap SASS wurde als Paketbestandteil mit in den Code aufgenommen.
    • Template-Bestandteile wurden in einem Ordner template-parts verschoben.
    • Template Funktionen wurden aus der functions.php in neue Dateien ausgelagert, die sich ebenfalls an dem aktuellen Status Quo der Themeentwicklung orientieren.

Kategorie: CMS-Instanz, FAU-Design Schlagworte: , , , , , , , , ,