Umstellung auf HTML 5 mit mobilem Layout

Das neue Layout ist seit 08. Februar 2018 für alles Projekte der zentralen WordPress-Installation der JGU aktiviert.

Die wichtigsten Änderungen vorab:

  • Meta-Menü-Benutzer: Diese Linkliste wird jetzt automatisch erzeugt.
  • Smartphoner: Es gibt ein Burger-Menu! Die Seite ist passend gemacht für verschiedene Anzeigegrößen.
  • Startseitenmacher: Alles geht, was auch auf www.uni-mainz.de geht!

 

In seltenen Fällen und bei selbstgebauten Spezialitäten kann es dazu kommen, dass die Inhalte etwas anders aussehen, da das HTML 5 den Code strikter interpretiert. Daher sollten Sie sich Ihre Seiten kurz anzuschauen. Bei etwaigen Fehlern geben wir gern Tipps, allerdings haben wir nicht die Ressourcen jede Spezialität bei der ein Fehler geschehen ist, zu fixen.

 

Meta-Menü: feste Liste nützlicher Elemente

Sie brauchen ein Menü weniger zu pflegen. Es existieren nur noch zwei Stellen, an denen Sie Menüs einblenden können: das Level1Menü oben und das Menü in der linken Spalte.

Eine Reihe von nützlichen Seiten sind ab jetzt fest verknüpft. Wie verwalten Sie das? So sieht die maximale Füllung des aus: Home, Suche (Search), Index, Sitemap und Kontakt (Contact).

  • HOME: wird immer vorhanden sein, damit die anderen auftauchen, müssen Sie nur Seiten anlegen, die so heißen wie die Links!
  • INDEX und SITEMAP: lassen Sie die Seiten einfach leer, per Programm werden die passenden Inhalte dort eingespielt.
  • SUCHE/SEARCH: Auf dieser Seite wird das Suchfeld dargestellt und die rechte Spalte ausgeblendet.
  • KONTAKT/CONTACT: Die wichtigste Seite: so erreichen Ihre Kunden Sie!

Andersrum gesagt: fehlen die Seiten, oder heißen die Seiten anders, werden sie nicht im Meta-Menü eingeblendet!

Zusätzlich werden noch die Sprachvarianten im Anschluss dieser Liste automatisch eingeblendet, sofern diese für das WordPress-Projekt vorhanden sind.

Was sollten Sie tun?

Bitte überprüfen Sie Ihre Projektseiten und beachten Sie die folgenden Hinweise:

  1. Meta-Menü: wenn Sie ein Metamenü mit anderen Elementen als Home, Suche, Index, Sitemap, Kontakt verwendet haben, weisen Sie ihr einstiges Metamenü nun dem Level1-Menü oder der linken Spalte zu.
  2. Wenn Sie in Ihrem Projekt einen ImageScroller verwenden, achten Sie bitte darauf, dass alle hochgeladenen Bilder das gleiche Seitenverhältnis haben. Falls dies nicht der Fall ist, wird Ihnen dies angezeigt.
  3. Wie soll der Seitenkopf in der mobilen Ansicht aussehen?
    Wechseln Sie im Dashboard  → Design  → Customizer → Webseiten-Informationen. Tragen Sie dort in JEDEM FALL etwas ein. Diese Beschriftung wird auf mobilen Endgeräten im Seitenkopf angezeigt, wenn das Endgerät die Kopfgrafik aus Platzgründen nicht anzeigen kann.:
    Bitte beachten Sie: es kann sein, dass der angegebene Seitenname für die Darstellung auf Desktop-Bildschirmen insgesamt zu lang ist (da hier eine maximale Darstellungsbreite von 668 Pixeln vorgegeben ist). Wenn Sie sehen, dass der Seitenname zu lang ist, empfehlen wir, ggf. zusätzlichen/längeren Text in das Feld 'Erweiterter Seitenname' darunter zu setzen und bei Header-Layout eine zweizeilige Variante auszuwählen.
  4. XSL-Dateien: sieht die damit generierte Seite gut aus, müssen Sie nichts machen. Ansonsten ersetzen Sie die nicht mehr existenten Klassennamen.

Was hat sich geändert?

Ein paar Schlagworte zu den Änderungen:

  • Customizer
  • Header
  • Footer
  • Mobiles Layout mit Burger
  • festes MetaMenü
  • CSS Klassennamen bei eigenen XSL-Dateien

Was können Sie nun mit dem neuen Layout mehr tun?

Diese Funktionen können Sie verwenden, wenn Sie möchten: Dokumentation der Funktionen im mobilen Layout

Wie teste ich das mobile Layout?

In den meisten Browsern gelangen Sie per F12 in die Entwickleransicht, dort können Sie auf verschiedene Smartphonegrößen stellen.

Google Chrome: F12, dann Strg + Shift + M aktiviert den Device Toggle Bar. Erneutes Drücken dieser TastenKombination stellt wieder auf Desktop zurück. Erneutes Drücken von F12 beendet die Entwickleransicht.

Kleine Beispielgalerie, was schonmal passiert ist

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.