Funktionale Fußzeilen erstellen

Jason Tselentis in Lernen am 11. September 2015

Sicher, die Fußzeile Ihrer Webseiteist das Letzte, was die Besucher Ihrer Website sehen werden, aber das bedeutet nicht, dass Sie an den typografischen Details sparen sollten. Wenn Sie das Axiom "Das Beste kommt zum Schluss" beherzigen, sollten Sie der Fußzeile genauso viel Aufmerksamkeit schenken wie dem Rest Ihrer Website.

Wie und wo Fußzeilen funktionieren

Im Druck zeigt eine Fußzeile dem Leser, wo er sich in einem Buch oder einer Zeitschrift befindet, indem ein Titel, ein Kapitel, ein Abschnitt oder eine andere Kennzeichnung außerhalb des Hauptinhalts erscheint. Jede Seite hat ihre eigene Fußzeile, zusammen mit der Seitenzahl, die als Folio bezeichnet wird. Ein Abschnitt kann eine laufende Fußzeile mit der Angabe "Abschnitt 1" haben, und wenn Sie den Abschnitt Nächste erreichen, steht dort Ändern mit "Abschnitt 2" und so weiter. Fußzeilen und Folios können sowohl in gedruckten als auch in digitalen Dokumenten vorkommen.

Eine Doppelseite mit Fußzeilen auf der linken und rechten Seite in der Schriftart News Gothic™ Schrift. Das Folio bzw. die Seitenzahlen erscheinen unter der Fußzeile.

Webseite mit einer einfachen Fußzeile in der Schriftart News Gothic™ Bold Schrift, linksbündig mit der Navigation und dem Inhalt des Abschnitts.

Ähnlich wie Fußzeilen und Folianten in einem Buch ist die Fußzeile von Webseitevom Hauptinhalt getrennt und befindet sich oft am unteren Rand. Wenn Sie sich im Internet umsehen, werden Sie Fußzeilen mit einer Vielzahl von typografischen und grafischen Elementen sehen, die für die Navigation auf einer Website unerlässlich sind und in einigen Fällen helfen, zu den wichtigsten Inhalten zu gelangen.

- Typografischer Inhalt
- Adresse(n) und Telefonnummer(n)
- Standort(e), von dem/denen aus Sie auf die Website zugreifen
- Informationen zum Urheberrecht
- Rechtliches Erklärungen
- Bedingungen für den Dienst, Nutzungsbedingungen
- Datenschutzerklärung
- Cookie-Richtlinie
- Zeitstempel der letzten Aktualisierung(en) oder Veröffentlichung(en)
- Wiederholung des Inhalts des Hauptmenüs oder der Untermenüs
- Häufig aufgerufene Links

Ikonographie, Grafiken:

- Markenidentität
- Logos für Partner
- Unternehmenspartner
- Icons für die Navigation
- Schaltflächen für soziale Medien

Netz oder nicht Netz...

Wird Ihre Fußzeile mit allem Drum und Dran ausgestattet sein? Vielleicht ist sie auch einfach nur karg. Ob groß, mittel oder klein, verwenden Sie ein Raster, um es zu organisieren, und überlegen Sie, wie die Fußzeile mit dem umgebenden Inhalt abschließt.

Hier ist zu viel auf zu kleinem Raum. Wenn sich die Fußzeile durch Hinzufügen von Text und Schaltflächen vom linken zum rechten Rand der Website erstreckt, wirkt das gezwungen und sogar unangenehm.

Durch die Zentrierung der Fußzeile gerät in diesem Fall alles aus dem Gleichgewicht, und die strukturelle Integrität der Website wird beeinträchtigt.

Durch die Verringerung des Inhalts und die Verteilung der Last wird das Layout ausgeglichen.

Fußzeilen können breit und tief sein und in Spalten gesetzt werden. Ein rot gefärbtes Ornament aus Wingdings® Schrift wird verwendet, um einen Artikel abzuschließen, bevor die Fußzeile beginnt, deren Typografie in Clarendon® und News Gothic Schriften gesetzt ist.

Was Über multifunktionale Fußzeilen? Oder die Mehrfachpositionierung Ihrer Fußzeile? Sie fragen sich vielleicht: Was ist das und warum sollte ich das brauchen? Wenn Sie ein bildlastiges Design haben und wollen, dass die Navigation bei der Ankunft auf Ihrer Website zweitrangig ist, dann machen Sie die Navigation zu einer Fußzeile - nur für den Moment. Wenn die Website geladen wird, wird die Navigation durch einen Sticky Footer am unteren Rand fixiert, aber beim Scrollen schwebt sie nach oben und wird zu einem Top-Menü.

Wenn Nutzer gescrollt wird, bewegt sich die Fußzeile in der ITC Franklin Gothic™-Familie mit, bis sie am oberen Rand der Seite stehen bleibt und eine Überschrift und eine Unterüberschrift in der hellen Clarendon-Schrift Schrift angezeigt werden.

Das Backend

Bei einer Website mit einer großen Anzahl von Seiten wäre es von Vorteil, wenn sowohl das Menü als auch die Fußzeile als Include enthalten wären. Einbindungen können mit PHP, ASP, JavaScript (JS) oder jQuery vorgenommen werden. Wenn Sie mit diesen Methoden nicht vertraut sind oder sie Ihnen zu schwierig oder zu zeitaufwändig erscheinen, können Sie das Include auch mit Standard-HTML und server side includes (SSI) erstellen.

Wenn sich die Primärdatei und die eingeschlossene Datei im selben Verzeichnis auf Ihrer server befinden, fügt diese Zeile den Include-Inhalt hinzu:

<!–#include file=”your-file-name.html” –>

Mit SSI können Sie auf einfache Weise dynamisch Inhalte in eine HTML-Seite einfügen, wobei Ihr primärer Dateiname auf shtml, shtm oder stm endet und nicht auf html, um den Include-Inhalt zu verarbeiten, der html, htm, txt oder inc sein kann.

Wenn sie sich nicht auf einer server befinden und für sich alleine stehen, haben die Dateien mit dem ssi-Titel getrennte HTML-Dateien, die unabhängig voneinander funktionieren. Wenn sie jedoch beide zusammen auf server platziert sind, wird die Datei ssi-footer.html in die Datei ssi-demo.shtml eingefügt. Der hinzugefügt am Bonus? Wenn Sie mehrere Seiten in Ihrer Website haben und die Fußzeile aktualisieren müssen, brauchen Sie nur die einzelne Datei ssi-footer.html zu aktualisieren, um sie auf die gesamte Website zu übertragen.

Hämmer und Hamburger

"Ich nehme an, dass es verlockend ist, wenn das einzige Werkzeug, das man hat, ein Hammer ist, alles wie einen Nagel zu behandeln" - AbrahamH. Maslow

Bei aller Liebe, die wir der Fußzeile entgegenbringen können, könnte man leicht dafür plädieren, überhaupt keine Fußzeile zu haben. Man könnte alles, was Nutzer braucht, in einem versteckten, zusammenklappbaren Menü unterbringen, auch bekannt als Hamburger-Menü, ein Navigationsgerät, über das ich Über in einem Artikel über Webseite Menüs und Navigation geschrieben habe.

Anstatt jede Website mit denselben Werkzeugen anzugehen, wie z. B. einem Hamburger-Menü oder denselben Fußzeilendesigns, sollten Sie den Inhalt, Nutzer, die Anwendungsfälle und die Entwicklung der Website berücksichtigen. Anstatt immer einen Hammer oder einen Hamburger zu verwenden, hämmern Sie so lange an der Fußzeile herum, bis Sie etwas entwickelt haben, das sich sehen lassen kann - und sei es nur am unteren Rand.

Jason Tselentis ist Designer, Autor und Dozent. Als außerordentlicher Professor an der Fakultät für Design der Winthrop University unterrichtet er visuelles Kommunikationsdesign, Markenstrategie und -entwicklung, Webdesign und Typografie. Seine Schriften Über Design und visuelle Kultur sind in den Zeitschriften Arcade, Eye, mental_floss, Open Manifesto, Print und HOW erschienen. Herr Tselentis hat außerdem vier Bücher über Design, Typografie und Designgeschichte veröffentlicht.