Aktualisierung der FAU Themes

Zur Bereinigung von Fehlern wurde eine neue Version der FAU Themes erstellt.

Folgende Änderungen wurden umgesetzt:

  • Die fehlerhafte Darstellung von Kontaktbildern wurde behoben (#711)
  • Verschiedene Validierungsfehler (CSS und HTML) wurden behoben (#657)
  • Auf Wunsch einiger Kunden wurde die Darstellung des <abbr>-Tags weniger auffällig gestaltet.
  • Der Kontrast der Buttons im Textbereich für das Aufrufen weiterer Kategorien wurde erhöht
  • Der Kontrast im Submenu von Vordergrund zu Hintergrundfarbe wurde um ein Byte erhöht um WCAG AA zu erreichen
  • Verlinkte Bilder im Contentmenü wurden aus dem Tabfocus genommen
  • Der Introtext im klassischen Menu wurde als Presentation deklariert

Es wurde keine neuen Funktionen erstellt oder vorhandene Funktionen geändert, die bei der Nutzung von Webauftritten in Gebrauch sind.

Das FAU EInrichtungstheme wurde nach einer Testphase heute aktualisiert. Das Update der übrigen Themes der Fakultäten folgt in den nächsten Tagen.

Update (29.11.2019)

Die Fakultätsthemes wurden nunmehr auch aktualisiert.

Ankündigung: Update der FAU Themes

Ab dem kommenden Freitag werden die Themes der zentralen Einrichtungen aktualisiert. In der Woche ab dem 22.07 folgen danach die Themes der Fakultäten.

Das Aupdate beinhaltet keine wesentlichen Änderungen der Funktionalität. Aufgrund der immer weiter steigenden Zahlt an Nutzern mit einem Handy als Endgerät, ist es jedoch notwendig, verschiedene Optimierungsmaßnahmen vorzunehmen.

Dies betrifft insbesondere die Optimierung von Bildern und Bildgruppen (Galerien, Slider) für kleine Auflösungen.

 

Konkretere Informationen zum Update:

Im Vergleich zur letzten Version (1.11.3) wurden im wesentlichen die verschiedenen Darstellung von Bildern optimiert. Anlass war ein gemeldeter Fehler bei der Darstellung der Galerie im Grid-Format und Problemen der Darstellung von Artikelbildern bei kleinen Auflösungen.

So wurden bisher kleine Thumbnails von Artikelbildern in der Größe 220×110 Pixel ersetzt durch Bilddateien von 480×240 Pixel. Mittels CSS werden die Bildern entsprechend der jeweils vorhandenen Browserbreite in er gewünschten Breite und Höhe dargestellt.

Im Zuge dieser Korrekturen und Verbesserungen wurden dann auch damit zusammenhängende Optionen ergänzt.

Konkret:

  • Fixes bei der Darstellung von Bildern bei Galerien, Posts in RWD, Pages in RWD, Imagelinks.
  • Einführung einheitlicher 2:1 und 3:2 Formate, die für Mobile Darstellung eine Mindestbreite von 480 Pixel mit bringen.
  • Neue Option zur Definition eines Fallbackbildes bei Contentmenus
  • Neue Grid-Column mit 5 Bildern bei Grid-Galerien
  • Neue Sizes für Imagelink ( „x120“, „x240“, „x360“, „x480“)
  • Copyright-Text bei dem Startseiten-Template für Lehrstühle entfällt automatisch, wenn der Copyright-Text der URL des gecroppten Bildes entspricht.
  • Imagelinks aus einer Kategorie lassen sich nun auch via Slug ansteuern mit Hilfe des Attributs cat="" .
  • Ergänzung der Grid-Galerie-Darstellung um die CSS-Klasse nospace

Noch nicht gelöst, weil aufwendiger, ist die notwendige Umstellung des Layouts auf Flex-Grid. Diese Umstellung ist nötig um bekannte Probleme (siehe GitHub) hinsichtlich der Positionierung von Block-Inhalten im Contentbereich bei gleichzeitigen Vorliegen von Navigation Links und Sidebar rechts zu heben.

Update (22.07.)

Am Freitag wurde bereits das Theme FAU-Einrichtungen aktualisiert. Am heutigen Montagvormittag wurden ebenfalls die Themes FAU-techfak und FAU-Philfak aktualisiert. Die Themes FAU-RWFak, FAU-Medfak und FAU-Natfak folgen morgen, sofern keine Fehler festgestellt werden.

Update (23.07.)

Auch die verbliebenen Themes FAU-RWFak, FAU-Medfak und FAU-Natfak wurden heute aktualisiert.

Update der FAU Themes auf 1.10.48

Wie letzte Woche und auch davor bereits angekündigt, fand heute der Update der FAU-Designs statt.

Folgende Korrekturen wurden zum Vergleich zur vorherigen Version vom Dezember 2018 umgesetzt:

  • Korrektur der Farben bei Social Media Icons entsprechend des gewählten Fakultätsthemes
  • Fehlerbehebung bei der Anzeige der Überschrift in der Sidebar (#578)
  • Anzeige von Links auf Kategorien in den Portalmenüs (#573)
  • Abstand des Banners auf Lehrstuhl-Startseiten nach unten (#588)
  • Diverse WCAG-Verbesserungen hinsichtlich der Regel „Roles and Labels“
  • Entfernung des veralteten „Nach unten“-Links im Bannerbereich (#594)
  • WCAG 1.3.1 Bugfix für Darstellung der Blogroll

Weiterhin beinhaltet die neue Version eine neu Funktion:

  • Verbesserung der Kontrasteinstellungen bei der Darstellung der Slider-Texte bei Fakultäts- und fau.de-Portal-Darstellung (#595).

Eine weitere neu eingebaute Funktion betrifft lediglich die Nutzung des Themes für die zentrale FAU-Website www.fau.de und ist nicht von Relevanz für andere Webauftritte.

 

 

FAU Designs: Version 1.8

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.

Neue Version der FAU-Themes

Mit dem vor kurzem erfolgten Update des Systems wurden auch alle FAU-Themes auf die Version 1.6.14 aktualisiert.

Mit dem Update wurden folgende Änderungen eingespielt:

Fehlerkorrekturen:

  • Bugfix #109: „Seitenabstand“
  • Bugfix #110: „Seitennavigation“
  • Bugfix#118:Portalmenü bei max-width von 480px: Zusätzlicher margin-bottom für eine angenehmere Liste
  • Bugfix #122: „Text-Widgets mit  Shortcodes“
  • Bugfix Personenanzeige: Bei der Darstellung von Personenseiten kam es zu Fehlern durch fehlerhaft beendete „</div>“-Anweisungen. Dies wurde korrigiert.
  • Bugfix: „Weiterlesen-Link“ bei Artikel-Teaser wurde um einen Screenreadertext ergänzt um die Zugänglichkeit zu verbessern.

 

Verbesserte Funktionen, Gestaltung oder neue Features:

  • Die optische Darstellung von Ausgaben vom neuen Plugin RRZE Calendar wurden so angepasst, daß es das alte Plugin RRZE-Events nahtlos ersetzen kann.
  • Für das Theme der RW wurden die Logos der Fachbereiche Jura und WiSo in die Vorauswahl aufgenommen (#81).
  • Anpassungen der Anzeige von Kontaktinformationen in der Sidebar.
    • Wichtige Hinweise in dieser Sache: Bei der Anzeige von Kontakten in der Sidebar auf Seiten vom Typ „Standardseite“ oder „Seite mit Navigation links“ wurde das Kontaktbild bislang über dem Namen des jeweiligen Kontakts angezeigt. Dies ist semantisch falsch und wird derzeit neu bearbeitet:Die normale Ansicht nach dem Corporate Design sieht vor, dass das Kontaktbild links neben den Kontaktinformationen positioniert ist.  Hierfür reicht bei den Seitentypen „Standardseite“ oder „Seite mit Navigation links“ jedoch der zur Verfügung stehende Platz nicht aus. Daher wird die Darstellung vom Browser in der Desktop-Ansicht (>968 Pixel Breite) zusammen geschoben und das Bild über dem Namen angezeigt. Mehrere Benutzer beschwerten sich daraufhin und wünschten sich, dass man hier das Bild abschaltet, es jedoch für die Darstellung im Inhaltsbereich weiterhin zur Verfügung steht.Wir haben das Bild daher in der aktuellen Version für die Darstellung bei den genannten Seitentypen herausgenommen. Gleichwohl gibt es von anderen Benutzern den Wunsch, das Bild eben doch dort zu belassen.

      Wir werden dem nachkommen, indem wir hierzu eine gesonderte Option einbauen werden, mit der die Seitenbetreiber selbst entscheiden, ob auch in der Sidebarbar auf den genannten Seiten ein Bild angezeigt wird. In dem Fall werden wir die Positionierung jedoch semantisch korrekt nach dem Namen bzw. dem Titel des Kontakts darstellen.

      Als Workaround kann man alternativ jetzt bereits den Shortcode nutzen, anstelle die Theme-Funktion zur Einbindung der Person zu verwenden.

  • Bei der Anzeige von Kategorien und Menus in dem Widget von Nachrichten ist es nunmehr möglich, die FAU-Farben als Hintergrund des Links zu definieren.

Performanceoptimierungen:

  • CSS für das Studienangebots-Plugin wurde aus dem Theme entfernt. Bei Aktivierung und Nutzung des Plugins wird das CSS stattdessen nur dann geladen, wenn es tatsächlich gebraucht wird.
  • Vereinheitlichung Listenelemente in Sidebar und Widgets: Bei der Darstellung von Listenelementen und Unterlistenelementen in der Sidebar gab es unterschiedliche Darstellungen, abhängig davon, ob die Listen als Text-Widget oder über das Kontakt-Plugin eingebunden wurden. Dies wurde korrigiert und die Darstellung vereinheitlicht.
  • Externe Symbolgrafiken im Portalmenu wurden auf „Awesome Font“ umgestellt.
  • Performance Optimierung: list-arrow.png durch Awesome Font Icon ersetzt.
  • Codeverbesserung #107