Der Footer einer Website hat sich im Laufe der Zeit zu einem sehr wichtigen Navigationselement auf einer Seite gemausert. Und obwohl viele Nutzer ihn nie zu Gesicht bekommen werden, solltest du ihm eine gewisse Aufmerksamkeit widmen, um deinen Websitebesuchern eine gute Nutzererfahrung zu bieten. In diesem Artikel erfährst du, was ein Footer überhaupt ist und welche Elemente du in ihm platzieren kannst. Anhand von zehn Beispielen zeige ich dir, wie du ihn auf verschiedene Art gestalten kannst.
Was ist ein Footer und welchen Mehrwert hat er für deine Website?
Welche Elemente du in einem Footer platzieren kannst
Warum Footer auch auf mobilen Endgeräten gut aussehen müssen
Zehn Praxisbeispiele von Website-Footern
Was ist der Footer einer Website?
Der Footer einer Website wird von vielen Besuchern oft übersehen, trägt dennoch eine essenzielle Rolle im Webdesign. Wie der Name schon vermuten lässt, befindet sich dieser Abschnitt am unteren Ende einer Webseite. Er dient nicht nur als Abschluss der Seite, sondern beherbergt auch eine Vielzahl wichtiger Elemente und Informationen.
Im Footer einer Website finden sich oft Links zu relevanten Unterseiten wie Impressum, Datenschutzerklärung oder Nutzungsbedingungen. Doch er kann noch viel mehr sein als nur eine Sammlung von rechtlichen Informationen. Social-Media-Verknüpfungen, Kontaktinformationen, ein Newsletter-Abonnement oder sogar zusätzliche Navigationslinks - all diese Elemente kannst du im Footer einer Website platzieren.
Wenn ich persönlich auf Websites unterwegs bin, die mir nur eine sehr unübersichtliche Navigation bereitstellen, scrolle ich schnell nach unten, um im Footer nachzusehen. Viele Webmaster verwenden den Footer als eine Art Sitemap, wo sich alle Links der Seite wiederfinden. Ein gut gestalteter Footer trägt somit wesentlich zur Benutzererfahrung bei und kann sogar das Vertrauen der Besucher stärken.
Design & Layout eines Footers
Das Design und Layout eines Footers spielen eine entscheidende Rolle für die Funktionalität und Ästhetik einer Website. Ähnlich wie bei jedem anderen Bereich des Webdesigns ist es wichtig, dass dein Footer nicht nur funktional, sondern auch ansprechend gestaltet ist.
Bestand zu den guten alten Web 2.0-Zeiten ein Footer aus einer Textzeile mit Impressum-Link und Copyright-Informationen, hat sich dies heutzutage glücklicherweise geändert. Ein guter Footer bietet deinen Websitebesuchern eine gute Übersicht und passt in dein Design. Dabei ist es entscheidend, dass der Footer nicht überladen wirkt, sondern eine ausgewogene Balance zwischen verschiedenen Elementen findet.
Häufig sehe ich Footer, die zu viele Informationen und Links einfließen lassen. Dadurch wirkt der Footer schnell überdimensioniert und unübersichtlich - beides Grundvoraussetzungen für eine schlechte User Experience. Beispiel: Betreibst du ein Newsportal, solltest du dort nicht aktuelle Beiträge oder Artikel in deinen Footer platzieren. Hinterlege stattdessen beliebte Kategorien, die wiederum auf eine Übersichtsseite zum passenden Thema leiten.
Das Layout des Footers sollte dabei sowohl auf Desktop- als auch auf mobilen Geräten gut funktionieren. Besonders auf kleinen Bildschirmen ist es wichtig, dass der Footer nicht zu viel Platz einnimmt und die Navigation nicht beeinträchtigt.
In der Regel sind Footer in mehrere Spalten und Reihen aufgeteilt. Folgende Elemente kannst du bedenkenlos in deinen Footer einbinden:
Links zu Pflichtseiten (Impressum, Datenschutz etc.)
Newsletter-Anmeldung
Wichtige Links in Form einer Sitemap (z.B. Leistungen, Über uns, Kontakt)
Unternehmenslogo
Social Media Links
Call to Action
Links zu wichtigen externen Seiten (z.B. App Store oder Google Play)
Suchfunktion
Ein guter Footer zeigt dem Nutzer auch klar und deutlich, dass die Seite an dieser Stelle zu Ende ist. Stell dir vor, dein Footer ist so lang und umfangreich, dass deine Besucher nicht wissen, dass es sich um diesen handelt.
Funktionen & Elemente eines Footers
Der Footer einer Website ist weit mehr als nur ein unteres Ende der Seite. Er dient als Navigationsdrehscheibe für wichtige Informationen und Funktionen, die deinen Nutzern zusätzlichen Mehrwert bieten sollen.
Zu den grundlegenden Elementen, die oft im Footer zu finden sind, gehören Links zu Unterseiten wie Impressum, Datenschutzerklärung und Nutzungsbedingungen. Diese rechtlichen Hinweise sind essenziell für die Transparenz und Rechtskonformität einer Website. Diese Links sollten auf jeder deiner Seiten sichtbar sein, um dich vor Abmahnungen zu schützen. Jedoch haben diese Links nichts in der Hauptnavigation am oberen Ende der Webseite zu suchen.
Darüber hinaus können im Footer auch Navigationslinks zu verschiedenen Bereichen der Website platziert werden, um den Nutzern eine zusätzliche Möglichkeit zur Navigation zu bieten. Dies kann besonders hilfreich sein, wenn die Hauptnavigation oben auf der Seite nicht ausreicht, um alle relevanten Inhalte abzudecken. Tief in der Website verschachtelte Unterseiten eignen sich dementsprechend hervorragend für den Footer.
Kontaktinformationen wie Adresse, Telefonnummer und E-Mail-Adresse sind ebenfalls häufig im Footer zu finden. Dies ermöglicht es den Nutzern, schnell und einfach Kontakt aufzunehmen, falls sie Fragen haben oder Unterstützung benötigen.
Social-Media-Verknüpfungen sind ein weiteres gängiges Element im Footer einer Website. Sie ermöglichen es den Nutzern, sich mit der Marke über verschiedene Social-Media-Plattformen zu vernetzen und auf dem Laufenden zu bleiben über Neuigkeiten und Updates. Je nach Anzahl der sozialen Kanäle kannst du diese Links sowohl in der Hauptnavigation als auch im Footer platzieren. Auch wenn es hier keine offizielle Richtlinie gibt, verzichte ich bei mehr als drei Social Media Icons auf eine Platzierung in der Navigation. Stattdessen werden diese Links im Footer bereitgestellt.
Ein Newsletter-Abonnementformular kann ebenfalls im Footer platziert werden, um den Nutzern die Möglichkeit zu geben, sich für Updates und Angebote anzumelden. Dies kann dazu beitragen, die Kundenbindung zu stärken und die Reichweite der Marke zu erhöhen. Verzichte dabei jedoch auf endlos lange Formulare, um sich für den Newsletter anzumelden. E-Mail-Adresse, Opt-in-Checkbox und Button - das wars. Willst du mehr Informationen von deinen Abonnenten haben, verzichte auf das Formular im Footer und platziere es an einer anderen Stelle oder erstelle eine eigene Unterseite.
Die zunehmende Verbreitung von mobilen Geräten hat das Responsive Webdesign zu einem unverzichtbaren Bestandteil jeder Website gemacht. Zum Vergleich: Bei manchen Websites (insbesondere Onlineshops) liegt der Anteil von Besuchern mit mobilen Endgeräten bei 80-90 Prozent. Meine eigene Website ist sehr stark an B2B, also an anderen Unternehmern ausgelegt. Dies führt dazu, dass viele mit ihren Desktop-Geräten diese Website aufrufen. Dieser Blog hingegen wird primär von Tablets und Smartphones gelesen.
Doch wie passt der Footer in diese mobile Landschaft? Auf kleineren Bildschirmen wie Smartphones und Tablets kann der Platz begrenzt sein, weshalb es wichtig ist, den Footer auf diese Bildschirmgrößen anzupassen, ohne dabei wichtige Informationen zu verlieren. Dies kann durch die Verwendung von flexiblen Layouts und Medienabfragen erreicht werden, die es ermöglichen, den Footer je nach Bildschirmgröße neu zu positionieren oder zu verkleinern.
Wie bereits erwähnt, besteht ein Footer aus mehreren Spalten und Reihen. Mit einem Grid oder Flexbox lassen diese sich kinderleicht vertikal untereinander platzieren. Einfache Links und Text lassen sich auf einem Tablet problemlos in zwei Spalten darstellen. Bei einem Smartphone verzichte ich generell auf zwei Spalten im Footer. Auch wenn der Trend zu größeren Displaygrößen bei Smartphones geht, solltest du immer Nutzer älterer Modelle im Hinterkopf haben. Als Referenz nehme ich gerne ein altes Apple iPhone 7. Dieses wurde 2016 auf den Markt gebracht und besitzt mit 4,7 Zoll Bildschirmdiagonale einen sehr guten Sweet Spot, um das eigene mobile Layout zu testen.
Footer: Beispiele & Inspiration
Schauen wir uns zehn verschiedene Footer auf Desktop- und Mobilgeräten an. Diese reichen von Shopping-Seiten bis hin zu Nachrichtenportalen und sollen dir zeigen, dass die meisten Footer einem ganz einfachen Muster folgen.
Honeder Naturbackstube
Dieser Footer überzeugt durch Minimalismus: Unternehemensadresse, Social Links, Impressum und. Datenschutz - das war's. Damit passt er sich perfekt dem reduzierten Design der gesamten Website an. Viel mehr braucht es gerade bei kleineren Seiten auch nicht.
madewithlove Belgium
Das belgische Softwareunternehmen setzt ihren Footer perfekt in Szene und hat trotz vieler Links die Übersicht nicht verloren. Stattdessen werden die wichtigsten Unterseiten in Kategorien eingeteilt, welche sich dann auf drei Spalten aufteilen. Zu sehen sind außerdem Logo, Claim des Unternehmens, ein Icon, eine Sprungmarke zum oberen Bereich der Seite und eine Blog-Sektion mit den letzten fünf Artikeln und einer Suchfunktion.
Besucht der Nutzer diese Website mit einem Smartphone, so reduziert sich das gesamte Footer-Design noch einmal drastisch. Denn übrig bleiben lediglich die wichtigsten Links der Hauptnavigation.
FHOKE UK
Die Werbeagentur FHOKE aus Salisbury zieht mit einer großen Typo im Footer eine große Aufmerksamkeit, sobald der Nutzer diesen Teil der Webseite erreicht. Dank zweier Calls to Action hat der Besucher die Möglichkeit, einen Kennenlerntermin zu buchen und erhält zudem Informationen zu den beiden Standorten der Agentur.
Real Thread Shirts
Onlineshops haben in der Regel dutzende Unterseiten, die sich unmöglich alle im Footer unterbringen lassen. Stattdessen werden diese kategorisiert, welche dann über den Footer aufgerufen werden können. Real Threads auf einen Footer, bestehend aus drei Reihen und fünf Spalten. Durch die geringe Schriftgröße bleibt die Übersicht bestehen, sodass der Nutzer sich schnell navigieren kann.
Lediglich auf mobilen Endgeräten sollte nachgebessert werden: Hier setzt das Unternehmen auf zwei Spalten - selbst bei kleineren Smartphones. Dies führt zu horizontalem Scrolling und sieht daher nicht schön aus. Auch das Newsletter-Tool ist nicht perfekt in das responsive Design gebracht worden.
sport1
Das Sportportal liefert seinen Besuchern einen perfekten Footer ohne Schnickschnack und anderen Kram. Der Footer besteht aus fünf Reihen und sechs Spalten - ist damit eher groß. Jedoch ist die Darstellung supergelungen und es werden alle wichtigen Seiten problemlos untergebracht.
Arsenal FC
Der englische Fußballverein Arsenal verzichtet komplett auf einen traditionellen Footer mit Links zu Unterseiten. Stattdessen werden dort die Logos der Sponsoren des Clubs gezeigt und zu deren Website verlinkt. Warum die Medienabteilung des Vereins so vorgeht, kann ich mir nicht erklären.
Zeit Online
Anders als viele andere Medien- und Nachrichtenportale fällt der mobile Footer bei Zeit Online minimalistisch aus. Dieser verlinkt zu Seiten, die mit dem Kerngeschäft der Redaktion nur wenig zu tun haben. Die allerwenigsten Leser werden eine der dortigen Webseiten aufrufen, sondern suchen in der Regel eine Navigation der einzelnen Kategorien.
Nike
Das US-Bekleidungsunternehmen geht einen sehr interessanten Weg, den du bei Footern nicht allzu oft sehen wirst. Statt die Inhalte des Footers untereinander zu platzieren, werden diese in Kategorien verschachtelt. So bleibt der Footer übersichtlich und der Nutzer kann sich das gewünschte Akkordeon einfach aufklappen.
Apple
Die Kalifornier gehen einen ähnlichen Weg wie Nike und verschachtelt die Unterseiten in Kategorien. Anders als bei Nike setzt Apple auf eine Menge Links im Footer. Durch die Akkordeons wird der Nutzer nicht überfordert und ist in der Lage, Inhalte und Unterseiten schnell zu finden.
Amazon
Der Footer des Online-Versandhändlers hat mich ziemlich überrascht. Ich hatte dort vorwiegend wichtige Shopping-Kategorien oder Werbung für die eigenen Produkte erwartet. Stattdessen werden dort die am häufigsten gesuchtesten Unterseiten gelistet. Dabei setzt Amazon auf einem größeren Smartphone auf ein Zwei-Spalten-Layout.
Fazit
Heutzutage kommt kaum eine Website um einen Footer herum. Es gab Zeiten, da wurden die rechtlichen Seiten in die Hauptnavigation am oberen Ende der Seite eingebunden - diese sind glücklicherweise vorbei.
Konzentriere dich bei deinem Footer auf die wichtigsten Unterseiten und verzichte auf unnötigen Kram. Deine Besucher werden den Footer zur Navigation benutzen und freuen sich über ein durchdachtes Konzept. Sorge dafür, dass der Footer auf allen möglichen Endgeräten super aussieht und seine Übersicht nicht verliert. Hast du auf dem Desktop einen sehr großen und umfangreichen Footer, solltest du darüber nachdenken, vergleichsweise unwichtige Elemente bei der mobilen Version zu verstecken.
* Um den Lesefluss nicht zu beeinträchtigen wird zwar nur die männliche Form genannt, stets aber die weibliche Form gleichermaßen mitgemeint. Menschen jeglichen Geschlechts sind mir als Leser*innen herzlich willkommen 🌈❤️
Du möchtest in eine neue Website investieren und bist auf der Suche nach einem professionellen Webdesigner? Lass uns unverbindlich über deine Probleme, Wünsche und Projektziele reden. Sende mir einfach eine Projektanfrage und wir gehen es an!
