Footer einer Website: Worauf Sie beim Design achten sollten

In diesem Beitrag zeigen wir die Fehler, die wir in der Praxis am häufigsten sehen. Zudem erklären wir den richtigen Aufbau Schritt für Schritt. Das Ziel ist einfach: Besucher sollen die gesuchte Information schnell finden, der Footer soll aber nicht überladen wirken. Wir behandeln dabei auch Barrierefreiheit, Mobilgeräte und E-Commerce.

Was genau ist ein Footer, und welche Aufgabe hat er?

Ein Footer ist der Bereich, der am Ende jeder Seite wiederkehrt und im ganzen Auftritt gleich bleibt. Der Header begrüßt den Besucher beim Einstieg. Zum Abschluss übernimmt diese Rolle stattdessen der Footer. Sobald jemand bis zum Ende scrollt, sieht er als Letztes diesen Bereich.

Dieser Bereich übernimmt drei Aufgaben gleichzeitig: Er hält Pflicht- und Kontaktangaben an einem sicheren Ort, er bietet eine zweite Navigationsebene, und er wiederholt die Markenelemente konsequent. Weil diese drei Aufgaben zusammenwirken, zählt der Footer zu den meistgesehenen, aber am wenigsten gestalteten Bereichen einer Seite.

Kurz gesagt: Der Footer ist der stille Teil einer Seite, den trotzdem jeder Besuch zeigt. Wer zehn Seiten durchblättert, sieht den Footer zehnmal. Genau diese Wiederholung macht ein durchdachtes Footerdesign so wichtig. Außerdem bemerken die meisten Besucher den Footer gar nicht bewusst, solange alles funktioniert; erst ein kaputter Link oder eine fehlende Kontaktangabe fällt sofort auf.

Welche Pflichtangaben gehören in den Footer einer Website?

Jede gewerbliche Website braucht eine Kontaktadresse, den vollständigen Firmennamen und die gesetzlich vorgeschriebenen Hinweise. Diese Angaben müssen jederzeit erreichbar sein. Den vollen Umfang dieser Pflichtangaben erklären wir ausführlich in unserem Beitrag Impressumspflicht und Pflichtangaben einer Website. Deshalb konzentrieren wir uns hier darauf, wie der Footer diese Angaben klar und lesbar zeigt.

Konkret verstecken viele Seiten diese Angaben hinter winziger Schrift. Ein schwacher Kontrast verschlimmert das Problem zusätzlich. Besucher prüfen genau diesen sichtbaren Bereich ganz bewusst, um Vertrauen zur Website aufzubauen. Lesbarkeit gehört deshalb zum Kern eines guten Footerdesigns, nicht zu einer Nebensache. Zudem prüfen Sie den Text am besten in seiner echten Größe, nicht nur in einem großen Entwurf.

Bei einer mehrseitigen Website lohnt sich eine einzige gemeinsame Footerkomponente für diese Angaben. Vermeiden Sie also das manuelle Kopieren auf jede einzelne Vorlage. Ändert sich die Adresse, passen Sie den Text an nur einer Stelle an. Diese eine Änderung erreicht danach automatisch jede Seite. Auf diese Weise sparen Sie bei jeder künftigen Anpassung wertvolle Zeit.

Wie sollten Kontaktdaten im Footer erscheinen?

Listen Sie Telefonnummer, Mailadresse und Postanschrift in einer eigenen Footerspalte auf. Formatieren Sie jede Zeile so, dass Besucher sie schnell überblicken. Halten Sie jede Zeile auf eine einzige Angabe begrenzt. Somit findet das Auge den passenden Kanal sofort.

• Machen Sie die Telefonnummer zu einem anklickbaren Link, damit mobile Besucher mit einem Tipp anrufen können.
• Schreiben Sie die Mailadresse als reinen Text, nicht als Bild oder Abkürzung.
• Verknüpfen Sie die Postanschrift mit einem Kartenlink, sofern vorhanden.

Auch praktische Angaben wie Öffnungszeiten gehören in dieselbe Spalte. Sie helfen dem Besucher, ohne Seitenwechsel eine Entscheidung zu treffen. Zum Beispiel spart die Antwort auf "heute geöffnet" im Footer echte Zeit. Außerdem verringert diese kleine Angabe oft die Anzahl der Anrufe, die nur nach den Öffnungszeiten fragen.

Warum bietet der Footer eine zweite Chance für die Navigation?

Die meisten Besucher lesen eine typische Seite ganz normal von oben nach unten durch. Am Ende angekommen, stellen sie sich die Frage "was jetzt?" Genau in diesem Moment springt der Footer ein. Er zeigt Seiten, die im oberen Menü vielleicht übersehen wurden.

Behandeln Sie den Footer deshalb als zweite Navigationsebene, nicht nur als Abschluss. Seiten wie Karriere, Blog oder häufige Fragen passen oft nicht ins Hauptmenü. Dort finden sie im Footer trotzdem einen Platz.

Diese zweite Chance zählt besonders bei langen Seiten. Wer einen ganzen Blogbeitrag liest, ist meist neugierig und interessiert. Ein gut platzierter Footerlink verwandelt dieses Interesse dann in einen nächsten Schritt. Andernfalls verliert sich dieses Interesse ohne weitere Handlung.

Warum sind Footerlinks für die interne Verlinkung wichtig?

Der Footer wiederholt sich auf jeder Seite. Seine Links bilden deshalb ein Rückgrat der internen Verlinkung im ganzen Auftritt. Google Search Central empfiehlt, dass jede wichtige Seite über mindestens einen Link erreichbar bleibt. Zudem sollte jeder Link ein echtes Attribut namens href mit einer aufrufbaren Adresse tragen. Dieses Prinzip gilt ebenso für Footerlinks.

Ankertext und Linkdichte behandeln wir ausführlicher in unserem Beitrag interne Verlinkung, SEO Strategie. Was bedeutet dieses Prinzip konkret für den Footer? Ein Footerlink braucht einen beschreibenden Text, genau wie ein Link im Fließtext. Vage Formulierungen wie "hier klicken" gehören dort nicht hin.

Der Footer wiederholt denselben Ankertext auf jeder Seite. Wählen Sie diesen Text einmal richtig, entsteht daraus ein einheitliches Signal für den gesamten Auftritt. Diese Konsistenz nützt sowohl Besuchern als auch Suchmaschinen. Folglich zahlt sich die Sorgfalt bei der Wortwahl über die gesamte Website hinweg aus.

Welche Seiten sollte der Footer verlinken?

Wählen Sie Footerlinks danach aus, was Besucher wirklich suchen, nicht zufällig. Die folgende Liste zeigt eine typische Gruppe, die für die meisten Unternehmensseiten funktioniert.

1. Die wichtigsten Dienstleistungs- oder Produktseiten.
2. Unternehmensseiten wie Über uns, Kontakt und Karriere.
3. Die Blogstartseite oder ausgewählte Kategorien.
4. Rechtliche Seiten wie Datenschutz und Nutzungsbedingungen.
5. Häufig genutzte Tool- oder Ressourcenseiten.

Versuchen Sie trotzdem nicht, jede Seite im Footer unterzubringen. Ziel ist es, wirklich wertvolle Adressen hervorzuheben. Betreiben Sie mehrere Standorte, fassen Sie diese besser unter einem einzigen "Standorte"-Link zusammen, statt jeden einzeln aufzulisten. Sonst wächst die Liste mit jeder neuen Filiale weiter an.

Wie platzieren Sie Social Media Links im Footer?

Setzen Sie Social Media Icons in eine sichtbare, aber nicht dominante Ecke des Footers. Meist stehen sie am Ende einer Spalte oder in einer unteren Leiste. Halten Sie die Icongröße im Verhältnis zum restlichen Text. Sonst wandert der Blick vom eigentlichen Inhalt zu den Icons ab.

Achten Sie darauf, dass jedes Icon zu einem echten, aktiven Profil führt. Ein Icon für eine Plattform, die Sie nicht mehr pflegen, schickt Besucher auf eine leere Seite. Das schadet dem Vertrauen still und leise. Geben Sie jedem Icon auch ein klares, erreichbares Label, damit auch Screenreadernutzer das Ziel verstehen.

Wählen Sie die Plattformen bewusst aus. Zwei oder drei wirklich aktive Profile wirken glaubwürdiger als fünf Icons zu verwaisten Profilen. Kurz gesagt: weniger aktive Links schlagen mehr ungepflegte Links.

Warum sollten Footerlinks auf jeder Seite gleich bleiben?

Der Footer lädt mit derselben Vorlage auf jeder Seite. Besucher erwarten deshalb auf jeder weiteren Seite dieselbe Anordnung. Ändert sich Reihenfolge, Iconposition oder Textstil von Seite zu Seite, sucht der Besucher jedes Mal von neuem.

Verwalten Sie den Footer deshalb über eine einzige gemeinsame Komponente statt über einzelne Vorlagen. So erreicht eine Änderung sofort jede Seite. Dieser Ansatz verhindert den unruhigen Flickenteppich, der mit wachsender Website sonst entsteht. Andernfalls summieren sich kleine Unterschiede über die Zeit zu einem uneinheitlichen Bild.

Warum überfordert ein zu voller Footer die Besucher?

Ein Footer mit Dutzenden Links in Reihe sendet ein zwiespältiges Signal. Er sagt dem Besucher "alles ist hier, aber nichts davon ist wichtig". Das Auge findet keinen klaren Ankerpunkt mehr. Am Ende klickt niemand mehr auf irgendetwas.

Verringern Sie dieses Risiko durch Priorisierung. Heben Sie die fünf bis acht meistgesuchten Seiten hervor. Den Rest verschieben Sie bei Bedarf auf eine Sitemapseite. Kurz gesagt: zu viele Links sind ein größeres Risiko als zu wenige. Ebenso gilt: ein klarer, kleiner Footer wirkt vertrauenswürdiger als ein riesiger, unübersichtlicher.

Machen Sie einen einfachen Test. Zeigen Sie den Footer jemandem außerhalb Ihres Teams und fragen Sie nach den drei wichtigsten Links. Zögert diese Person, oder nennt jeder etwas anderes, ist der Footer wahrscheinlich zu voll.

Wie gruppieren Sie die Spalten im Footer?

Teilen Sie den Footer in logische Spalten statt in eine lange Liste. Jede Spalte sollte zu genau einem Thema passen. Die folgende Tabelle zeigt einen typischen Aufbau für eine Unternehmensseite.

Geben Sie jeder Spalte eine klare Überschrift. Halten Sie den Inhalt dieser Überschrift auch treu. So kann der Besucher erraten, wo er suchen muss. Vier Spalten reichen bei den meisten Unternehmensseiten völlig aus. In der Praxis führen mehr Spalten häufig zu unangenehmen Zeilenumbrüchen auf kleineren Bildschirmen.

Gibt es eine feste Obergrenze für Footerlinks?

Nein, eine feste Zahl gibt es nicht. Allerdings zeigt die Praxis, dass eine überladene Liste fast immer nach hinten losgeht. Auch die Dokumentation von Google nennt keine exakte Zahl für Links auf einer Seite. Sie warnt lediglich: Wirkt es nach zu vielen Links, sind es wahrscheinlich wirklich zu viele.

Konzentrieren Sie sich deshalb auf Priorität statt auf eine Zahl. Sieben bis zehn Links pro Spalte bleiben in der Praxis gut lesbar. Darüber hinaus fügen Sie besser einen Sitemaplink hinzu. Betrachten Sie diese Zahlen als Ausgangspunkt, nicht als strikte Regel, denn Branche und Zielgruppe verschieben diesen Wert etwas. Zum Beispiel braucht ein kleiner Katalog weniger Links als ein großer Marktplatz.

Wie verändert sich das Footerdesign auf Mobilgeräten?

Auf einem kleinen Bildschirm passen Spalten nicht nebeneinander. Der Footer fällt deshalb meist in eine einzige Spalte, mit Abschnitten untereinander. Ein langer Footer verlängert die Scrollstrecke auf dem Smartphone zusätzlich. Deshalb verwandeln manche Seiten die Spaltenüberschriften in ein aufklappbares Akkordeon.

Prüfen Sie bei der Mobiltestung mehr als nur das Erscheinungsbild. Bestätigen Sie auch, dass Tippflächen groß genug ausfallen. Unser Beitrag Mobilfreundlichkeit testen bietet dafür eine praktische Checkliste. Achten Sie besonders auf die Kontaktnummer, denn ein Anruf ist oft die häufigste Aktion mobiler Besucher. Ebenso wichtig ist eine klare Beschriftung jeder eingeklappten Spalte, damit niemand raten muss, was sich darunter verbirgt.

Wie sehen Suchmaschinen Footerlinks?

Suchmaschinen crawlen Footerlinks genauso wie Links im Fließtext. Dafür brauchen Sie allerdings ein normales Linkelement mit dem Attribut href und einer echten, aufrufbaren Adresse. Ein Element, das nur auf einen Klick per JavaScript reagiert, verfolgen Suchmaschinen womöglich nicht zuverlässig.

Auch nofollow im Footer ist eine bewusste Entscheidung. Diese Frage behandeln wir ausführlich in unserem Beitrag interne Links, ist nofollow sinnvoll. Kurz gesagt: gewöhnliche Unternehmensseiten im Footer brauchen meist kein Attribut mit dem Wert nofollow.

Hilfreich ist zudem ein Link zur Sitemapseite im Footer. So erhalten Besucher und Suchmaschinen einen Ort, um tiefere Seiten zu erreichen. Seiten, die weder ins Hauptmenü noch in den Footer passen, brauchen trotzdem einen Zugang. Sonst verlassen sich diese Seiten allein auf die interne Suche, die nicht jeder Besucher überhaupt nutzt.

Welche Fehler passieren beim Footerdesign am häufigsten?

Hier sind die Fehler, die uns in der Praxis am häufigsten begegnen. Jeder davon beeinträchtigt die Besuchererfahrung direkt.

• Ein zu schwacher Farbkontrast erschwert das Lesen.
• Die komplette Sitemap landet in einer einzigen, langen Spalte.
• Kaputte Links zu abgeschalteten Kampagnenseiten bleiben unbemerkt.
• Jede Seite nutzt ein anderes Footerlayout.
• Die Pflichtangaben fehlen im Footer vollständig.

Die meisten dieser Fehler entstehen, weil Teams den Footer für unwichtig halten. Wie oben gezeigt, ist ein gutes Footerdesign einer Website jedoch ein kritischer Baustein für Vertrauen und Navigation. Diese Fehler bleiben außerdem oft monatelang unbemerkt, weil der Footer häufig erst ganz zum Schluss gestaltet wird.

Ein weiterer häufiger Fehler ist, den Footer nur für den Desktop zu entwerfen und niemals auf einem echten Smartphone zu testen. Öffnen Sie die Seite auf einem echten Gerät. Tippen Sie jeden Footerlink mit dem Finger an. Enge oder überlappende Buttons fallen so sofort auf. Dieser kurze Test dauert nur wenige Minuten, zeigt aber zuverlässig jedes Problem.

Worauf müssen E-Commerce-Seiten im Footer zusätzlich achten?

Bei E-Commerce-Seiten konzentriert der Footer gleich mehrere Vertrauenssignale. Zahlungsicons, ein Link zur Rückgabe und Versandinformationen beeinflussen die Kaufentscheidung unmittelbar.

Dieses Thema behandeln wir ausführlicher in unserem Beitrag Vertrauen im Onlineshop aufbauen. Zeigen Sie diese Vertrauenselemente im Footer in einem eigenen, lesbaren Block. Quetschen Sie sie nicht in eine einzige überfüllte Zeile. So bestätigen Käufer die Zahlungssicherheit mit einem kurzen Blick. Andernfalls übersehen viele Käufer diese wichtigen Signale zwischen den übrigen Footerlinks.

Wiederholen Sie Versandzeit und Rückgabebedingungen zusätzlich in der Nähe des Warenkorbs. Genau dort fällt meist die eigentliche Kaufentscheidung. Der Footer unterstützt das E-Commerce-Vertrauen, sollte aber nicht die einzige Quelle dafür bleiben. Insgesamt wirken mehrere kleine Vertrauenssignale an verschiedenen Stellen der Seite stärker als ein einziges großes.

Wie spiegelt das Footerdesign die Markenidentität wider?

Über Logo, Farbpalette und Typografie erinnert der Footer am Ende der Seite noch einmal an die Markenidentität. Unser Beitrag Farbpsychologie im Webdesign erklärt, welche Farbtöne in Bereichen wie dem Footer Vertrauen schaffen.

Bei der Schriftwahl vermeiden Sie am besten einen Font, der stark vom Haupttext abweicht. Sonst verliert die Seite ihre Einheitlichkeit. Unser Beitrag Website Typografie, so kombinieren Sie Schriftarten richtig empfiehlt Paarungen, die über die gesamte Seite hinweg funktionieren, Footer eingeschlossen.

Halten Sie zudem das Verhältnis zwischen Überschrift- und Fließtextgröße konsistent. Eine kleinere Schriftgröße allein ist unproblematisch. Bricht dieses Verhältnis jedoch völlig, wirkt der Footer wie ein fremder Anbau statt wie ein Teil der Seite. Kurz gesagt: Der Footer soll sich wie eine natürliche Fortsetzung der Seite anfühlen.

Welche Barrierefreiheitspunkte zählen beim Footerdesign am meisten?

Barrierefreiheit denken Teams beim Footerdesign meist zuletzt mit, dabei lässt sie sich besonders leicht umsetzen. Die Richtlinie des W3C zum Linkzweck empfiehlt, dass der Zweck eines Links aus seinem Text oder dem nahen Kontext klar hervorgeht. Links zum selben Ziel sollten außerdem denselben Wortlaut tragen.

Schreiben Sie Footerlinks, die das Ziel direkt benennen. Nutzen Sie "Datenschutz" oder "Kontakt" statt "hier klicken". Halten Sie zudem genügend Kontrast zwischen Text und Hintergrund. So lesen auch sehbehinderte Besucher den Footer bequem.

Prüfen Sie, dass ein Tastaturnutzer die Footerlinks der Reihe nach erreicht. Jeder Link braucht dafür einen sichtbaren Fokusrahmen. Dieses kleine Detail öffnet Ihre Seite für ein breiteres Publikum und kostet kaum Aufwand, sobald es Teil Ihrer Vorlage ist. Zusammengefasst zahlt sich Barrierefreiheit im Footer also mit geringem Aufwand sehr gut aus.

Wie testen Sie Footerlinks regelmäßig?

Wächst eine Website, entfernen Teams alte Kampagnenseiten. Der passende Footerlink bleibt dabei oft vergessen stehen. Besucher landen dann auf einer Seite mit dem Fehlercode 404. Prüfen Sie Footerlinks deshalb regelmäßig, um dieses Risiko zu vermeiden.

Unser Tool zur Prüfung kaputter Links scannt in Sekunden jeden Link einer Seite, Footer eingeschlossen. Ersetzen Sie kaputte Adressen durch aktuelle Seiten. Entfernen Sie Links, die keinen Sinn mehr ergeben, ganz. Legen Sie diese Prüfung in einen Kalender, zum Beispiel einmal pro Quartal. Bestimmen Sie dafür eine verantwortliche Person, damit diese Aufgabe zur festen Routine wird statt zu einer Aufgabe für "irgendwann". Außerdem notieren Sie jeden gefundenen kaputten Link, bis die nächste Aktualisierung ihn behebt.

Braucht ein Footer eine Copyrightzeile?

Eine Copyrightzeile lautet meist etwa "© Firmenname, alle Rechte vorbehalten". Sie steht in der untersten Leiste des Footers. Eine Pflicht ist das nicht, trotzdem signalisiert sie die Markeninhaberschaft klar.

Vermeiden Sie eine fest eingetragene Jahreszahl in dieser Zeile. Nutzen Sie stattdessen eine Methode, die stets das aktuelle Jahr zeigt. Sonst veraltet die Zeile, sobald niemand im Januar an die Aktualisierung denkt. Schreiben Sie außerdem den vollständigen Firmennamen, denn diese Zeile dient manchen Besuchern als kurze Identitätsprüfung. Zudem trennt eine dünne obere Linie diese Zeile angenehm vom übrigen Footerinhalt.

Braucht ein Footer eine Schaltfläche, um nach oben zu springen?

Ein kleiner Pfeil oder Button, der den Besucher zurück zum Seitenanfang bringt, verkürzt vor allem auf dem Smartphone die Scrollstrecke. Diese Schaltfläche ist nicht zwingend, bei langen Blogbeiträgen oder Produktlisten ist sie trotzdem praktisch.

Platzieren Sie diese Schaltfläche in der unteren rechten Ecke, ohne andere Inhalte zu überlagern. Geben Sie ihr zudem ein verständliches Label wie "zum Seitenanfang", denn ein reiner Pfeil allein reicht für Screenreadernutzer nicht aus.

Wie wählen Sie die Hintergrundfarbe des Footers?

Sowohl ein dunkler als auch ein heller Hintergrund funktioniert. Wichtig ist allein der ausreichende Kontrast zwischen Text und Hintergrund. Viele Unternehmensseiten setzen auf einen dunklen Footer, denn dieser markiert das Seitenende klar.

Entscheiden Sie sich für einen dunklen Footer, kombinieren Sie ihn mit heller Schrift. Passen Sie auch die Iconfarben entsprechend an, sonst wird der Text schwer lesbar. Bei einem hellen Footer trennt eine dünne obere Linie den Bereich sauber vom Inhalt darüber. In jedem Fall sollte zumindest ein Ton aus Ihrer Hauptpalette im Footer erhalten bleiben. Andernfalls wirkt der Footer wie ein Fremdkörper am Ende der Seite.

Wie gestalten Sie den Footer auf mehrsprachigen Websites?

Eine mehrsprachige Website kann zusätzlich einen praktischen Sprachumschalter direkt im Footer platzieren. So kehrt ein Besucher von jeder Seite aus zu seiner Sprache zurück. Setzen Sie diesen Umschalter in eine schlichte Zeile, getrennt vom übrigen Inhalt.

Achten Sie darauf, dass jede Sprachversion dieselben Pflicht- und Kontaktangaben trägt. Eine reine Übersetzung der Texte reicht dafür nicht aus. Der Kontaktkanal selbst muss für Besucher dieser Sprache ebenfalls korrekt und erreichbar bleiben. Planen Sie zudem mit der längsten Übersetzung, denn manche Sprachen benötigen deutlich mehr Platz als andere. Sonst läuft der Text in genau der Sprache über, die Sie zuletzt getestet haben.

Wann brauchen Sie professionelle Hilfe für den Footer einer Website?

Einen Footer können Sie durchaus selbst pflegen. Wächst die Website jedoch, wechselt sie zu einer mehrsprachigen Struktur, oder steht ein Relaunch der Marke an, lohnt sich ein kompletter Neuaufbau meist mehr. Die Zusammenarbeit mit einem Team spart dabei Zeit, sowohl bei der Barrierefreiheit als auch bei der internen Verlinkung.

Als Talha Aslan und unser Team decken wir im Rahmen unserer Webdesign-Leistung jeden Bereich einer Seite ab, den Footer eingeschlossen. Bedeutet das, dass jede Website denselben Footer braucht? Keineswegs. Jede Branche und jede Zielgruppe setzt schließlich andere Prioritäten. Das Footerdesign einer Website sollte sich deshalb an den eigenen Zielen orientieren, nicht an einer generischen Vorlage.

Zusammengefasst ist der Footer einer Website kein Bereich, den Sie übersehen sollten. Er prägt das Besuchervertrauen und die Navigation im ganzen Auftritt direkt, oft stärker, als die meisten Teams zunächst annehmen. Vergleichen Sie die obigen Schritte zunächst sorgfältig mit Ihrer eigenen bestehenden Website. Finden Sie einen überladenen oder lückenhaften Bereich, korrigieren Sie zuerst die Priorität und danach die visuelle Struktur. Selbst eine kleine Anpassung verbessert dann oft spürbar die gesamte Erfahrung auf der Seite, und Besucher bemerken diesen Unterschied meist sofort.