Site Footer System
Zweck
Das Site Footer System bietet eine Methodik für die Gestaltung der unteren Verankerung einer Website. Es dient als Sicherheitsnetz für Nutzer, die nicht gefunden haben, wonach sie suchen, als Verzeichnis für SEO-kritische Links und als Behälter für obligatorische rechtliche, markenbezogene und soziale Informationen. Ein gut gestalteter Footer bietet einen Abschluss des Seitenerlebnisses, ohne kognitive Überlastung zu erzeugen.
Anwendungsfälle
- Gestaltung des globalen Footers für mehrseitige Websites.
- Organisation komplexer Sitemaps in überschaubare Navigationscluster.
- Standardisierung der Platzierung von Utility-Links (AGB, Datenschutz, Copyright).
- Integration globaler Call-to-Actions (Newsletter, Kontakt) am Seitenende.
- Entwicklung einer responsiven Strategie für mehrspaltige Linklisten.
Wann NICHT zu verwenden
- Einseitige Minisites: Wenn eine einfache Copyright-Zeile ausreicht.
- Progressive Web Apps (PWA) mit Bottom-Tabs: Wenn eine persistente App-ähnliche Navigation die traditionelle Fußzeile ersetzt.
- Konversionsorientierte Landingpages: Wenn ein Footer „Leaks“ oder Ablenkungen bietet, die den Nutzer vom primären CTA wegführen (obwohl ein minimaler Footer mit rechtlichen Links normalerweise dennoch erforderlich ist).
Eingaben
- Informationsarchitektur (IA): Alle nicht im primären Header enthaltenen Links.
- Rechtliche & Compliance-Anforderungen: Datenschutzerklärung, AGB, etc.
- Markenidentität: Logo, Social-Media-Profile und Unternehmensleitbild.
- Globale Aktionen: Sekundäre Konversionsziele wie Newsletter-Anmeldung.
- Device-Breakpoints: Grid-System-Definitionen für responsives Spaltenstapeln.
Ausgaben
- Footer-Anatomiekarte: Visuelle oder strukturelle Definition der Zonen (Identität, Links, Utility, CTA).
- Link-Hierarchie: Kategorisierte Cluster der Sekundärnavigation.
- Responsives Blueprint: Regeln für das Stapeln oder Zusammenklappen von Spalten auf mobilen Geräten.
- Barrierefreiheits-Landmarks: Semantische Tags (
<footer>,<nav>) und Labels.
Workflow
1. Footer-Inhalte kategorisieren
Teilen Sie Ihre Inhalte in logische Zonen ein:
- Identitätszone: Logo, Beschreibung und Social-Media-Icons.
- Navigationszone: Link-Cluster, gruppiert nach Thema (Produkte, Unternehmen, Ressourcen).
- Aktionszone: Newsletter-Anmeldung oder primäre Kontaktinformationen.
- Utility-Zone: Copyright, rechtliche Links und Sprachauswahl.
2. Ein Strukturmuster wählen
Wählen Sie ein Muster basierend auf der Seitenkomplexität:
- Der schmale Footer: Eine einzelne Zeile für minimale Websites.
- Der breite Footer (Sitemap): Mehrspaltiges Layout für Unternehmen/E-Commerce.
- Der aktionsorientierte Footer: Fokussiert auf einen großen CTA vor den Linklisten.
3. Visuelle Hierarchie festlegen
Wenden Sie das visual-hierarchy-system auf den Footer an:
- Verwenden Sie fette Überschriften für Link-Cluster.
- Stellen Sie sicher, dass die Textgröße lesbar, aber etwas kleiner als der Fließtext ist (z. B. 14px).
- Schaffen Sie hohen Kontrast zwischen dem Footer-Hintergrund und den Linkfarben.
4. Mobile Anpassung definieren
Planen Sie den Übergang von Desktop zu mobil:
- Stapeln: Mehrspaltige Layouts sollten zu einer einzigen Spalte stapeln.
- Akkordeon-Muster: Für sehr breite Footer sollten Linkgruppen auf mobilen Geräten in Akkordeons zusammenklappbar sein, um die Seitenlänge zu reduzieren.
- Touch-Ziele: Stellen Sie sicher, dass alle Links leicht zu tippen sind. Erfüllen Sie WCAG 2.2 SC 2.5.8 (Mindestzielgröße) – interaktive Ziele mindestens 24x24px, mit ausreichendem Abstand zwischen benachbarten Links; bevorzugt 44px+ für primäre Touch-Ziele.
5. Semantische & Barrierefreiheits-Ebenen hinzufügen
- Schließen Sie den Abschnitt in ein
<footer>-Tag ein. - Verwenden Sie
<nav>-Elemente für Link-Cluster mit eindeutigenaria-labels (z. B. „Footer Ressourcen“). - Stellen Sie sicher, dass das Kontrastverhältnis WCAG AA (4,5:1) erfüllt.
Entscheidungsregeln
- Die Sitemap-Regel: Wenn die Website mehr als 15 Seiten hat, verwenden Sie einen mehrspaltigen „Breiten Footer“, um die Entdeckung zu erleichtern.
- Externe Links: Social-Media- und externe Ressourcen sollten in neuen Tabs öffnen (
target="_blank"), um Nutzer auf Ihrer Seite zu halten. - Copyright-Platzierung: Platzieren Sie Copyright und rechtliche Links immer ganz unten (der „Sub-Footer“).
- CTA-Priorität: Wenn der Footer eine Newsletter-Anmeldung enthält, sollte dies das visuell markanteste Element im Footer sein.
Einschränkungen
- Barrierefreiheit: Muss über die Tastatur-Tab-Reihenfolge erreichbar sein. Alle Links müssen sichtbare Fokus-Zustände haben, die niemals durch sticky Header oder Cookie-Banner verdeckt werden (WCAG 2.2 SC 2.4.11 Focus Not Obscured).
- Responsivität: Spalten dürfen nicht überlaufen oder zu schmal werden (min-width).
- Rechtliches: Muss zwingend erforderliche Links gemäß lokaler Vorschriften enthalten (DSGVO, CCPA, etc.).
Häufige Fehlermuster
- Link-Overload: Jede einzelne Seite der Website wird eingefügt, was eine Textwand erzeugt, die Nutzer ignorieren.
- Schlechter Kontrast: Helles Grau auf dunklem Hintergrund, das die Barrierefreiheitsstandards nicht erfüllt.
- Die „Sackgasse“: Ein zu kleiner oder fehlender Footer, der Nutzern, die nach unten scrollen, keine Orientierung bietet.
- Nicht standardgemäße Gruppierung: Mischen nicht zusammenhängender Links (z. B. „Karriere“ unter „Produkte“).
Validierungskriterien
- Footer verwendet semantische
<footer>- und<nav>-Tags. - Link-Cluster haben klare, beschreibende Überschriften.
- Mobilansicht stapelt Spalten korrekt und erhält Touch-Ziele.
- Kontrastverhältnis für gesamten Footer-Text entspricht WCAG AA (4,5:1).
- Rechtliche Links und Copyright sind vorhanden und korrekt platziert.
- Social-Media-Links verwenden erkennbare Icons mit barrierefreien Textlabels.