Inhaltsbereich Navigation Navigation Fußzeile

Footer

Verwendung

Der im Aufbau über alle Dienstleistungen hinweg einheitliche Footer befindet sich immer am Ende jeder Seite. Dieser enthält zunächst einen Link zur Hilfe-Funktion, die Nutzende bei der Verwendung des Portals und den daran angebundenen Fachverfahren unterstützt. Sie verlinkt Kontext-sensitiv auf Informationen zum Zweck und Ziel der jeweiligen angezeigten Seite bzw. Maske und gibt detaillierte Beschreibungen der einzelnen Abschnitte und durchführbaren Aktionen.

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

Links im Footer

Links zu „Informationen“, „Kontakt“ und „Service“ sind als Block vom darüber liegenden 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.

Die an das Zoll-Portal angebundenen Dienstleistungen erstellen eigenständig und unter Beachtung der Layout-Vorgaben für den Seitenrahmen mit Header, Navigation und Footer alle relevanten Inhalte, wie z. B. Gebärdensprach-Videos, Texte in Leichter Sprache, eigene Erklärung zur Barrierefreiheit, die Datenschutzerklärung und das Impressum.

Das Zoll-Portal bezieht sich in seinen Texten und Videos ausschließlich auf eigene Inhalte inklusive der internen Fachdienste. Alle weiteren Dienstleistungen liegen außerhalb des Verantwortungsbereichs des Zoll-Portals und sind deshalb von den Verfahrensverantwortlichen auch eigenständig zu pflegen. Zur Verlinkung der entsprechenden Inhalte können die Redakteure das Redaktionssystem des Zoll-Portals verwenden.

Logos im Footer

Unterhalb dieses Bereichs befinden sich im Footer (optional verlinkte) Logos wie das der Generalzolldirektion, des OZG, und weiteren externen Angeboten. Andere Fachverfahren 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, womit keine einheitliche Bemaßung vorgegeben werden kann.

Hier können bei Bedarf auch Icons zu Social Media-Auftritten als weitere, eigene Zeile platziert werden.

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

Die angebundenen Dienstleistungen verlinken hier jeweils zu ihren eigenen Inhalten. Wenn Dienstleistungen über eine eigene Deklaration zur Barrierefreiheit verfügen, so 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)