Zielgruppe Site AdminVersion: GSB10.1One-Pager: Konfiguration
Mit dem One-Pager der GSB 10 Standardlösung können eigenständige Landingpages oder Kampagnenseiten erstellt werden.
Ziel
Ein One-Pager besteht üblicherweise aus mehreren Kapiteln auf einer Seite, die meist über eine Sprungnavigation zu erreichen sind.
Hierbei ist das aktive Kapitel am oberen Seitenrand so lange sichtbar, bis es durch das nächste Kapitel komplett aus dem sichtbaren Bereich geschoben bzw. gescrollt wird.
Die einzelnen Kapitel können aus einfachen Textblöcken mit klassischen redaktionellen Inhalten wie Fließtexten, eingebetteten Bildern, Zwischenüberschriften, als auch multimedialen, interaktiven Inhalten, wie Bilderstrecken, Videos, Slidern, etc. bestehen und durch Animationen zum Ein- und Ausblenden aufgewertet werden.
| Hinweis: | Die Konfiguration des One-Pagers als Subsite wird hier nicht näher beschrieben, da diese analog der bekannten Mechanismen durchzuführen ist. |
Konfiguration
Modellierung im Content
Der One-Pager wird im Content der GSB-SL mittels eigenständigem Wurzelknoten (technischer Dokumenttyp NavNode), parallel zur vorhandenen Navigationsstruktur abgebildet. Der Knoten verfügt hierbei über ein eigenes Seiten-Layout (technischer Dokumenttyp PageStructure) mit CSS- (technischer Dokumenttyp PageStyleBundle) und JavaScript-Erweiterungen (technischer Dokumenttyp GenricScriptEnt), sowie einem Target-Layout (technischer Dokumenttyp LOViewTemplate), in das die einzelnen Module durch Verlinkung im Navigationziel-Dokument (technischer Dokumenttyp NavTarget) integriert werden können.
Die Module werden mittels Modul-Container (technischer Dokumenttyp GenericTable) als auch Artikeln (redaktioneller Dokumenttyp Textfragment) mit spezieller Darstellung (technischer Dokumenttyp LOViewVariante) für den OnePager konfiguriert.
Das speziell für den One-Pager bereitgestellte Seiten-Layout „Startseite_fuer_OnePager“ blendet die Kopf-, Haupt- und Fußnavigation in Teilen, sowie die Suche komplett aus und eine Kapitelnavigation mit Sprungmarken ein. Das spezielle Target-Layout „Inhalt_ohne_Navigation_und_Marginalspalte_fuer_OnePager“ sorgt zudem für eine Darstellung ohne Randspalte, wobei bei beiden Layouts weiterhin die Darstellungsform der GSB-SL als Basis genutzt wird.
Erreichbar ist der One-Pager über eine Kurz-URL (technischer Dokumenttyp ConfigShortURL), die auf den o.a. Wurzelnoten verlinkt.
Unterstützte Module
Im Detail werden folgende Module für die Konfiguration eines One-Pagers in der GSB-SL zur Verfügung gestellt. Diese müssen analog der GSB-SL sprachabhängig konfiguriert werden.
| Hinweis: | Inhalte, die erst durch Interaktion sichtbar werden, z.B. durch Akkordeons oder Slider, werden von Suchmaschinen abgewertet. Wichtige Elemente sollten entsprechend nicht in Modulen verwendet werden, welche die Inhalte initial verstecken. |
Modul „Bühne“
Dieses Modul ist bereits in der GSB-SL vorhanden, muss jedoch in einer Variante genutzt werden, welche die Elemente nicht auf die jeweiligen Vollansichten verlinkt, sodass der User immer im Kontext des One-Pagers bleibt.
Hierfür wird das Modul mit der speziellen One-Pager-Darstellungsvariante in das Navigationsziel eingehängt.
Verlinkt werden sollten nur Inhalte, die nicht auf Folgeseiten zielen wie z.B. Navigationsknoten.
Modul „Textblock“ mit Fließtext und Bildeinbettung
Die Möglichkeit zur Ausgabe eines Textblocks ist bereits in der GSB-SL durch Nutzung des Dokumenttyps „Textbaustein“ vorhanden und kann für die Pflege des One-Pagers genutzt werden.
Modul „Bilderstrecke“
Dieses Modul ist bereits in der GSB-SL durch Nutzung des Dokumenttyps „Bilderstrecke“ vorhanden und kann grundsätzlich für die Pflege des One-Pagers genutzt werden.
Modul „Video“
Dieses Modul ist bereits in der GSB-SL durch Nutzung des Dokumenttyps „Video“ vorhanden und kann grundsätzlich für die Pflege des One-Pagers genutzt werden.
Modul „Slider“
Dieses Modul ist bereits in der GSB-SL vorhanden, muss jedoch analog der Bühne so verwendet werden, dass die Elemente ausschließlich im Kontext des One-Pagers angezeigt und genutzt werden können.
| Hinweis: | Der Slider erhält als besonderes Modul- bzw. Tabellenlayout OnePager/Layout_Karussell. |
Modul „Karte“
Dieses Modul ist bereits in der GSB-SL durch Nutzung eines HTML-Bausteins analog Anfahrtsskizze vorhanden.
| Hinweis: | Bei deaktiviertem JavaScript im Browser des Nutzers, wird keine Karte ausgegeben. |
Modul „Zeitstrahl“
Zur Darstellung von historischen Daten und chronologischen Abfolgen kann ein Modul genutzt werden, das den Titel, das Datum und die Beschreibung von Dokumenten des Typs „Textbaustein“ mit einem Akkordeon ausgibt.
Die Generische Tabelle für den Zeitstrahl wird entsprechend mit einer Überschrift, Textbausteinen in „Darzustellende Inhalte“ im Slot „Dokumente“ und dem Tabellenlayout Layout_Zeitstrahl konfiguriert.
Beim ersten Laden, werden alle Elemente eingeklappt dargestellt. Mit Klick auf den jeweiligen Titel, wird dann der entsprechende Text ausgeklappt.
| Hinweis: | Bei deaktiviertem JavaScript im Browser des Nutzers, werden immer alle Textblöcke ausgegeben. |
Modul „Zahlencounter“
Um wichtige Zahlenwerte mit Titel auf Basis des Dokumenttyps „Textbaustein“ auszugeben, kann ein Modul verwendet werden, das beim ersten Erscheinen des Moduls im Viewport den Zahlenwert von 0 auf die final definierte Zahl hoch zählt.
Die Generische Tabelle für den Zahlencounter wird entsprechend mit einer Überschrift, Textbausteinen in „Darzustellende Inhalte“ im Slot „Dokumente“ und dem Tabellenlayout Layout_Zahlencounter konfiguriert.
Die Textbausteine im Slot „Dokumente“ geben im Titel die darzustellende Zahl und in der Unterüberschrift die Beschreibung der Zahl an.
| Hinweis: | Bei deaktiviertem JavaScript im Browser des Nutzers, wird der finale Zahlenwert ohne Animation ausgegeben. |
Modul „Social-Media-Leiste“
Damit Nutzer auch soziale Kanäle der Kampagne nutzen können, kann eine Funktionsleiste am Seitenrand eingeblendet werden, die beim Scrollen mitläuft. Hierüber können Nutzer z.B. die Facebook-Seite des One-Pagers schnell aufrufen.
Dieses Modul kann über die PSBodyParameters_cll im Slot „socialmedialeiste“ eingebunden werden.
Die Generische Tabelle für die Social-Media-Leiste beinhaltet dann im Slot „Dokumente“ Bilder (Dokumenttyp IMGObject) für die gewünschten Social-Media-Präsenzen und das Tabellenlayout Layout-SocialMedialeiste.
Die Bilder für die Social-Media-Verweise erhalten neben der grafischen Repräsentation in der Standardgröße eine Funktionsbeschreibung im Alt-Text sowie im Linkziel einen Externen Link (Dokumenttyp ExternalLink) mit der anzusteuernden Web-Adresse.
Animationen
Module können eingeblendet, eingeschoben oder auch fixiert werden. Hierzu wird das Scroll-Verhalten des Nutzers überwacht und die entsprechende Animation ausgelöst.
In der Standardlösung sind die folgenden Animationen vorgesehen:
- Fixierung der Hauptnavigation
- Dynamisches Einblenden von „Nach Oben“-Navigation
- Mitlaufende Social-Media-Leiste. Damit die Teilen-Funktionen bei längeren Seiten immer im sichtbaren Bereich sind, wird die Social-Media-Leiste absolut im Viewport des Browserfensters (bspw. mittig am rechten Rand) positioniert. Beim Scrollen auf der Seite durch den Benutzer ist das entsprechende Element damit immer sichtbar.
- Einblenden durch kurzen Transparenz- oder Einschub-Effekt bei der initialen Darstellung von Teasern und Modulen, z.B. Titelzeile oder gesamte Bild-Container.
Animation beim Scrollen von Teaserelementen und Modulen durch Transparenz oder Verschiebung.
Zur Aktivierung des jeweils gewünschten Animationsverhaltens, werden für die o.g. Beispielmodule Darstellungsvarianten für die Einbindung in das Navigationsziel bereitgestellt, die das jeweilige Modul mit Animationen konfigurieren.OnePagerModul: Keine AnimationOnePagerModulEinblendung: Einblenden über TransparenzOnePagerModulEinschubLinks: Das Modul wird von Links in den sichtbaren Bereich eingefahrenOnePagerModulEinschubOben: Das Modul wird von Oben in den sichtbaren Bereich eingefahrenOnePagerModulEinschubRechts: Das Modul wird von Rechts in den sichtbaren Bereich eingefahrenOnePagerModulEinschubUnten: Das Modul wird von Unten in den sichtbaren Bereich eingefahren
| Hinweis: | Ein sogenanntes „Lazy-Loading“, d.h. das Nachladen von Inhalten bei Bedarf (z.B. scrollen) ist für Suchmaschinen nachteilig und wird nicht durchgeführt. |
Formulare
Formulare können auf dem One-Pager genutzt werden, müssen aber einige Voraussetzungen erfüllen:
- Die Validation von Elementen sollte weitestgehend direkt mit HTML5 erfolgen, um die Fehlerbehandlung bei Fehleingaben möglichst unmittelbar bei der Erfassung durchführen und Fehlermeldungen/-hinweise anzeigen zu können.
- Es sollten ausschließlich einseitige Formulare eingesetzt werden, da eine mehrstufige Formularnavigation mit mehreren Formularseiten aus fachlicher und technischer Sicht in einem One-Pager nicht funktioniert.
Barrierefreiheit
Ist der One-Pager losgelöst vom Hauptauftritt zu nutzen, benötigt dieser analog zu anderen Webseiten neben Impressum und Datenschutzerklärung auch die gesetzlich vorgeschriebenen Inhalte für Gebärdensprache, Leichte Sprache sowie die Erklärung zur Barrierefreiheit.
Wird der One-Pager nur als Landingpage mit Weiterleitungen in den Hauptauftritt verwendet, kann auf die dortigen Informationen verwiesen werden. Die Einstellung ob der One-Pager losgelöst vom Hauptauftritt oder dort integriert ist, ist konfigurativ, d.h. durch die Site Administration, einstellbar.