Inhaltsbereich Navigation Navigation Fußzeile

Footer

Verwendung

Der im Aufbau über alle Dienstleistungen hinweg einheitliche Footer befindet sich immer am Ende jeder Seite. Die Dienstleistungen erstellen eigenständig und unter Beachtung der Vorgaben für den Seitenrahmen gemeinsam mit Header und Navigation alle relevanten Inhalte.

Das Zoll-Portal bezieht sich in seinen Texten und Videos ausschließlich auf eigene Inhalte inklusive der angeschlossenen Dienstleistungen. Alle weiteren Dienstleistungen liegen außerhalb des Verantwortungsbereichs des Zoll-Portals und sind deshalb von den für die Dienstleistungen verantwortlichen Bereichen auch eigenständig zu pflegen.

Aufbau und Inhalte

Hilfebereich

Der Footer beginnt mit einem Bereich, der die Nutzenden durch Links zu Hilfen bei der Verwendung des Portals und der daran angebundenen Dienstleistungen unterstützt. Diese Links verweisen kontextsensitiv auf Informationen zum Zweck und Ziel der jeweils angezeigten Seite bzw. Maske. Dienstleistungen, die über eigene Hilfeseiten verfügen, können die Linkziele je Seite festlegen.

Links im Footer

Gemeinsam mit dem Hilfebereich sind Linklisten zu „Weitere Informationen“, „Kontakt“ und den mobilen Apps des Zolls als eigenständig gestalteter Block vom Hauptinhalt der Seite abgegrenzt. Die unter diesen Überschriften gruppierten Links sind nicht festgelegt, sondern werden entsprechend den Ausbaustufen des Portals weiter ergänzt.

Dieser Bereich wird in der mobilen Ansicht als ausklappbares Element angezeigt, bei dem nur die Überschriften initial sichtbar sind, über die sich die Untermenüs mit den Links öffnen lassen.

Auf eine „Drucken“-Funktion wie in älteren Versionen des Seitenrahmens wird bewusst verzichtet, da diese nur Standard-Funktionen der Browser dupliziert und somit unnötig redundant ist.

Logos im Footer

Unterhalb dieses Bereichs befinden sich im Footer (optional verlinkte) Logos wie das der Generalzolldirektion, des OZG, und weiterer interner oder externer Angebote. Andere Dienstleistungen können hier abweichende für sie wichtige Logos einbinden. Hierbei muss beachtet werden, dass die Logos aus Gründen der Parität optisch gleich gewichtet sein müssen, wodurch hier keine einheitliche Bemaßung vorgegeben werden kann.

Den Abschluss des Footers und damit der gesamten Seite bildet eine Reihe mit Links zu Meta-Informationen wie Impressum, Datenschutz, Barrierefreiheit, Bildnachweis (sofern Stock-Fotos verwendet werden), und dem Urheberrechtshinweis der Generalzolldirektion.

Wenn Dienstleistungen über eine eigene Deklaration zur Barrierefreiheit verfügen, dann muss die geforderte Feedback-Funktion nach § 7 Absatz 2 BITV 2.0 angeboten werden.

Ebenfalls am Ende der Seite wird, analog zum Beginn der Seite, ein weiterer Link angeboten, mit dem Nutzende bequem zum Beginn der jeweiligen Seite zurück navigieren können (Zurück zum Seitenanfang). Unterhalb des Footers sind keine weiteren Inhalte zulässig.

Positionierung & responsives Verhalten

Ab dem Breakpoint XS (≥ 0px)

  • Der Footer nimmt die volle Breite des Viewports ein.
  • Der Footer ist immer die letzte Komponente einer Seite mit 128px vertikalen Abstand zum vorherigen Element.
  • Es wird kein Weißraum unter dem Footer gelassen.
  • Alle Inhalte des Footers werden untereinander oder inline platziert.
Screenshot des Footers (obere Hälfte) in der Größe Smartphone.
Breakpoint XS (≥ 0px)
Screenshot des Footers (untere Hälfte) mit den enthaltenen Links in der vertikalen Anordnung als Akkordeon.

Ab dem Breakpoint SM (≥ 576px)

  • Die Linklisten für „Informationen“, „Kontakt“ und „Service“ werden in zwei Spalten aufgeteilt. Dabei nimmt jeder Block die gleiche Breite ein.
Footer Tablet obere Hälfte.
Breakpoint SM (≥ 576px)
Footer Tablet untere Hälfte.

Ab dem Breakpoint LG (≥ 992px)

  • Die Inhalte im blauen Hilfe-Banner werden in zwei gleichbreiten Blöcken nebeneinander gestellt.
  • Die Linklisten für „Informationen“, „Kontakt“ und „Service“ werden in vier Spalten aufgeteilt. Dabei nimmt jeder Block die gleiche Breite ein.
Screenshot des Footers (obere Hälfte) in der Größe LG mit den Inhalten in  Spalten.
Breakpoint LG (≥ 992px)

Ab dem Breakpoint XL

  • Der Footer nimmt die volle Breite des Grids ein (inkl. Seitenabstand).
  • Der Ecken des freistehende Hilfe-Containers werden abgerundet.
Screenshot des Footers (obere Hälfte) in der Größe LG mit den Inhalten in  Spalten.
Breakpoint XL (≥ 1200px)