Es gibt viele Arten, eine Navigation auf Ihrer Homepage zu realisieren. Eine moderne gute Navigation sollte auf den ersten Blick klar verständlich sein und auf PC, Tablet und Smartphone gut bedienbar sein.
Es gibt verschiedene Methoden, Links darzustellen und eine Navigation zu realisieren. Wir zeigen Ihnen nachfolgend einige Methoden und beschreiben kurz die Vor- und Nachteile:
Textlinks – die Standard-Navigation
ein Beispiellink
Vorteile: Jeder weiß, was passiert, wenn ich auf einen Link klicke: es öffnet sich eine neue Seite.
Nachteile: bei vielen Links unübersichtlich, ansonsten keine Nachteile
Buttons
Vorteile: Sehen optisch besser aus
Nachteile: Längere Ladezeiten beim Aufruf, Suchmaschinen können die Grafiken nicht als Text auslesen. Manche Buttons sind nicht sofort als Link zu erkennen.
CSS-Menüs
Informationen zu CSS-Menüs finden Sie hier:
Responsive Menüs mit Dreamweaver-Erweiterungen realisieren
Sie wollen ein responsives Menü mit vielen Funktionen innerhalb weniger Minuten realsieren? Mit Hamburger-Funktion, Markierung der aktuellen Seite, voll responsive und vieles mehr? Wir nutzen selbst Dreamweaver-Erweiterungen von Projectseven.com und können Ihnen diese wärmstens empfehlen. Folgende Menü-Erweiterungen gibt es aktuell von Projectseven.com:
- Maxi Menu Magic von Projektseven.com – diese Dreamweaver-Erweiterung erzeugt voll responsive Navigations-Menüs, die horizontal oder vertikal eingesetzt werden können. Sie können normale Ausklapp-Menüs integrieren, Maxi-Menüs mit zusätzlichen Bildern oder Texten und Menüleisten über die ganze Bildschirmbreite verteilt. Zudem sind die Ausklappmenüs beim Ausklappen animiert, d.h. sie fließen von der Seite ein. Die Farben der Menüs lassen sich nach vordefinierten Farbsets definieren oder individuell festlegen. Link mit Live-Beispielen: projectseven.com/products/menusystems/mxm/index.htm
- projectseven.com/products/menusystems/amm/index.htm – Adaptive Menu Magic – wunderschönes Menü realisiert mit der Project-Seven-Dreamweaver-Erweiterung AMM
- Slide Out Menu Builder
- Pop Menu Magic 3
- Mega Menu Magic
- Tree Menu Magic 3
- Overlay Magic
Dropdown-Menü
Ein Beispiel und den Quellcode dazu finden Sie hier.
Responsives HTML5-Menü mit Javascript und Media-Queries
Bei Todd Motto finden Sie ein Tutorial für ein responsives HTML5-Menü mit Javascript und Media-Queries: toddmotto.com/building-an-html5-responsive-menu-with-media-queries-javascript
Breadcrumb-Navigation
Mit einer Breadcrumb-Navigation können Sie auch eine sehr logische Navigation erstellen. Mehr Infos dazu in unserer Rubrik Breadcrumb.
WordPress-Themes und WordPress-Plugins
Fast alle WordPress-Themes enthalten von Haus aus responsive Menüs. Zusätzlich können Sie via Plugin oft ein responsives Menü nachrüsten.
Hier einige responsive WordPress-Themes mit integriertem responsiven Menü:
- generatepress.com – WordPress Theme (voll responisv)
- de.wordpress.org/themes/responsive
- de.wordpress.org/themes/twentysixteen
- de.wordpress.org/themes/gridbox
Und hier einige WordPress-Plugins für responsive Menüs:
Neben der Art der Links spielt auch die räumliche Anordnung der Links auf der Webseite eine große Rolle.
Folgende Punke sollten beachtet werden:
- Sie sollten von jeder Seite mit einem Klick auf die Startseite kommen
- Es gibt eine Faustregel, demnach sollte jede Unterseite einer Webseite mit maximal 3 Klicks erreichbar sein.
- Eine Suchfunktion ist ideal, um die Besucher direkt von einem Suchbegriff auf die passende Unterseite zu führen
- Eine Sitemap mit einer Auflistung aller Seiten kann bei großen Projekten sehr sinnvoll sein.
- Die Navigation sollte immer an der gleichen Stelle angebracht sein, d.h. der Benutzer muss die Navigationselemente als solche erkennen können und diese immer am gleichen Platz finden. So können sich Ihre Besucher bald “blind” orientieren
- Die Navigation muss logisch, einfach und selbsterklärend sein.
- Die Linkbegriffe müssen zu den sich hinter dem Links befindlichen Seiten passen – z.B. soll der Link Rezepte bitte schön auch zu Rezepten als Inhalt führen.
- Verlinken Sie nicht in “under construction” Bereiche, dass ist peinlich und unprofessionell. Entsprechende Teilbereiche der Homepage einfach erst nach deren Fertigstellung verlinken.
- Ändern Sie die Struktur Ihrer Homepage nicht oder nur im Notfall. Ein simples Umbenennen eines Ordners auf Ihrer Webseite oder die Umbenennung eines Links führt über Suchmaschinen kommende Besucher ins Nirvana. Und die Robots von Google und Co. können nicht jeden Tag Ihre Webseite auf Änderungen absuchen. Zudem haben Ihre Besucher sich an Ihre Webseitenstruktur “gewöhnt”. Jede Änderung ist wie in einem Supermarkt, in dem die Warenstruktur umgeräumt wurde. Es mag ja sinnvoll und nützlich sein, aber als Stammkunde findet man im ersten Moment nichts wieder und ärgert sich häufig… Also muss die Änderung wirklich notwendig und von großem Vorteil sein, damit der Nutzungsgewinn langfristig den Umgewöhnungsnachteil übertrifft.
- Am einfachsten ist eine flexible umd mitwachsende Navigation über CMS-Systeme mit modulartiger Bauweise zu realiseren.
Weitere Webseiten mit Informationen rund um die Navigation auf einer Homepage:
- designm.ag/resources/website-navigation-menu-toolbox/ – Webseiten-Navigation und Menüs – Toolbox mit sehr vielen Links zu sehr coolen Navigationsleisten und -menüs.
- die-barrierefreie-website.de/umsetzung/navigationsleisten.html – Umsetzung von barrierefreien Navigationsleisten
- ff-webdesigner.de/website-planung-tutorial-workshop.html – Grundgedanken zur Webseiten-Planung
- kundennutzen.ch/navigation.php – Checkliste zur Webseiten-Navigation
- onlinemarketing-blog.de/2010/08/03/visuelle-navigation-website-usability-vereinfachen/ – Visuelle Navigation: Website-Usability vereinfachen
- responsive-nav.com – der Name ist Programm – bei Responsive Nav erhalten Sie ein responsives Navigations Plugin mit Touch Screen Support.
- wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation – Tutorial bei Selfhtml zum Thema Navigation richtig erstellen
- thestyleworks.de/tut-art/listnav.shtml – Seitennavigation mit CSS-Listen
- w3schools.com/howto/howto_js_topnav.asp – hier lernen Sie, wie Sie eine responsive Top Navigation mit Hamburger-Menü erstellen.
- web-praesenz.ch/layout.html – Schritt-für-Schritt-Anleitung zum zeitgemäßen Aufbau einer Webseite
- yourhtmlsource.com/accessibility/navigation.html – englisches Tutorial zur Webseiten-Navigation