Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 12 Navigations- und Interaktionsdesign
Pfeil 12.1 Die Gestaltung der Hauptnavigation
Pfeil 12.1.1 Position
Pfeil 12.1.2 Umsetzung
Pfeil 12.1.3 Gestaltung
Pfeil 12.1.4 Dropdown-Menü
Pfeil 12.1.5 Mega-Dropdown-Menü
Pfeil 12.1.6 Kreative Navigationen
Pfeil 12.1.7 Feste Navigation
Pfeil 12.2 Die Gestaltung der Subnavigation
Pfeil 12.3 Die Gestaltung der Metanavigation
Pfeil 12.4 Die Gestaltung der Footer-Navigation
Pfeil 12.5 Navigation auf mobilen Endgeräten – responsive Navigation
Pfeil 12.5.1 Top-Nav – alles so lassen
Pfeil 12.5.2 Footer-Navigation – ganz ans Ende
Pfeil 12.5.3 Einfaches Toggle-Menü – Ein- und Ausblenden
Pfeil 12.5.4 Multi-Toggle
Pfeil 12.5.5 Off-Canvas-Menü – Rein- und Rausfahren
Pfeil 12.5.6 Weitere allgemeine Gestaltungstipps für eine mobile Navigation
Pfeil 12.6 Weitere Navigationsmittel
Pfeil 12.6.1 Links
Pfeil 12.6.2 Individuelle Linkunterstriche
Pfeil 12.6.3 Buttons
Pfeil 12.6.4 Die Suchfeld-Navigation
Pfeil 12.6.5 Weitere Navigationselemente
Pfeil 12.7 Formulare
Pfeil 12.7.1 Die Komponenten eines Formulars
Pfeil 12.7.2 Eingabefelder
Pfeil 12.7.3 Rückmeldungen
Pfeil 12.7.4 Validierung
Pfeil 12.7.5 Die User Experience bei Formularen
Pfeil 12.7.6 Formulare mit HTML5
 
Zum Seitenanfang

12.4    Die Gestaltung der Footer-Navigation Zur vorigen ÜberschriftZur nächsten Überschrift

Der Footer schließt die Seite inhaltlich und optisch ab. Während früher ein dezenter Copyright-Hinweis, vielleicht noch mit einem Link zum Impressum, das höchste der Gefühle war, hat sich der Footer inzwischen zu einem vollwertigen Navigationsmitglied entwickelt. Es gibt sogar Webseiten, die gönnen sich einen »Mega-Footer«. Irgendwo dazwischen liegt wohl die Wahrheit.

Ganz schön umfangreich … Der Footer bei sixt.de erfreut vor allem die Suchmaschinen bei so vielen Querverlinkungen zu SEO-optimierten Landing Pages.

Abbildung 12.39    Ganz schön umfangreich … Der Footer bei sixt.de erfreut vor allem die Suchmaschinen bei so vielen Querverlinkungen zu SEO-optimierten Landing Pages.

Ist der Anwender schon bis zum Footer-Bereich heruntergescrollt, ist es sinnvoll, ihn dort auch »abzuholen« – also ihn nicht wieder hoch bis zur Hauptnavigation scrollen zu lassen oder vielleicht nur einen Back-to-Top-Link anzubieten, was zwar schon gut und wichtig ist, sondern ihm ein weiteres Informationsangebot in Form nützlicher Links zu unterbreiten.

Viele weiterführende Links in einem eigenen farbigen Kasten, die Footer-Navigation beim enorm-magazin.de

Abbildung 12.40    Viele weiterführende Links in einem eigenen farbigen Kasten, die Footer-Navigation beim enorm-magazin.de

Die Varianten sind dabei sehr breit gefächert. Dies kann eine Wiederholung der Haupt- und/oder Metanavigation genauso sein wie weitere Unterseiten, die nochmals speziell ausgewählt wurden. Auf jeden Fall werden Inhalte präsentiert, die optisch mehr oder weniger klar vom eigentlichen Inhaltsbereich getrennt sind. Manchmal wird ein einfacher Trennstrich eingesetzt, oft aber auch klarere Trennungen wie markante Farbflächen.

Go-to-Top-Link | Gerade bei sehr langen Inhalten wird am Ende der Seite gerne ein Link oder Button angeboten, bei dessen Aktivierung die Seite wieder ganz nach oben scrollt. Dieser Go-to-Top-Link soll das (mühsame) selbstständige Scrollen nach oben ersetzen und dem Anwender damit die Bedienung der Seite erleichtern. Die Umsetzung eines Nach-oben-Links ist recht simpel und lässt sich mit den internen HTML-Ankern erreichen. Es ist sozusagen ein Link innerhalb einer Seite. Anstatt auf eine andere HTML-Seite zu verweisen, wird auf eine CSS-ID angesprochen:

<a href="#oben">Nach Oben</a>

Listing 12.9    Definition eines HTML-Ankerlinks

Download

Den Quellcode »to-top-link.html« für dieses Beispiel finden Sie unter BeispielmaterialKapitel_12.

Im href-Attribut steht der Name der ID, zu dem die Anzeige springen soll. Zu Beginn der Seite wird die Ziel-ID definiert:

<div class="wrapper" id="oben">

Listing 12.10    Definition des Zielankers

Der Back-to-Top-Button bei smashingmagazine.com. Er ist dank Icon und Text gut erkennbar.

Abbildung 12.41    Der Back-to-Top-Button bei smashingmagazine.com. Er ist dank Icon und Text gut erkennbar.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern