Umstellung auf HTML 5 mit mobilem Layout

Das neue Layout ist da! Das neue Layout ist endlich da! Viele von Ihnen werden den Unterschied kaum bemerken, aber es hat sich einiges geändert, auch hinter den Kulissen.
Wichtigste Änderung für:
- Meta-Menü-Benutzer: diese sind jetzt festgelegt!
- 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!

Wie bekomme ich das neue Layout?

Wir schalten es auf Wunsch für Sie ein. Danach stehen Ihnen die neuen Funktionen sogleich zur Verfügung. In seltenen Fällen und bei selbstgebauten Spezialitäten kann es dazu kommen, daß die Inhalte etwas anders aussehen, da das HTML 5 den Code strikter interpretiert. Sie sollten also soviel Zeit mitbringen, sich Ihre Seiten nach der Umstellung kurz anzuschauen. Bei etwaigen Fehlern sind Sie allerdings auf sich selbst gestellt, weil wir nicht die Ressourcen haben, jeden Fehler zu fixen.

Was hat sich geändert?

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

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 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.

Schreibe einen Kommentar

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