Infos rund um die Navigation auf einer Homepage

Es gibt viele Arten, eine Navigation auf Ihrer Homepage zu realisieren.

Verschiedene Methoden, Links darzustellen, zeigen wir Ihnen nachfolgend 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

    Button

    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.

  • Flash-Menüs





    Vorteile: Sehen meist besser als Buttons aus
    Nachteile: Suchmaschinen-Hürde. Ladezeiten teilweise lang. Flash wird nicht von allen Ausgabegeräten (z.B. iPhone, iPad) ausgegeben

  • CSS-Menüs (mit Javascript)

    Informationen zu CSS-Menüs finden Sie hier:

    de.selfhtml.org/css/layouts/navigationsleisten.htm
    www.1ngo.de/web/tmenu.html

  • DHTML-Menü

    www.heise.de/download/dhtml-menu-studio-1118206.html - hier können Sie kostenlos ein Programm zum Erstellen von DHTML-Menüs herunterladen

  • PHP-Menü

    Ein PHP-Menü finden Sie hier: www.alopezie.de/A1menu

  • Aufklappmenü

    Ein sehr schönes Ausklapp-Menü ist das Tree Menü Magic von Projectseven.com - eine Dreamweaver-Erweiterung: www.projectseven.com/products/menusystems/tmm3

  • Dropdown-Menü

    Ein Beispiel und den Quellcode dazu finden Sie hier.

  • Responsives Design mit integriertem Navigations-Menü wie bei meine-erste-homepage.com

    Wir nutzen für meine-erste-homepage.com die Dreamweaver-Erweiterung Affinity mit dem Drop Menü Magic. Die Extension enthält ein komplettes Design mit einem automatischen Menü-Generator, sowohl für horizontale als auch vertikale Menüs. Die komplette Webseite und die Menüs sind natürlich valide und responsive.

  • 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

  • SlickNav - responsives Menü mit CSS & Javascript

    Ein sehr hübsches responsives Javascriptmenü auf Basis einer Listennavigation finden Sie bei slicknav.com. Das Script unterstützt Multi-Level-Menüs, der Quelltext ist klar und einfach strukturiert, das Menü wird von allen modernen Browsern unterstützt, das Menü ist auch für reine Tastatur-Bedienung geeignet und funktioniert auch bei ausgeschaltetem Javascript.

  • Breadcrumb-Navigation

    Mit einer Breadcrumb-Navigation können Sie auch eine sehr logische Navigation erstellen. Mehr Infos dazu in unserer Rubrik Breadcrumb.

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:

Diese Webseite weiterempfehlen:


Weitere interessante Rubriken / Webseiten zu diesem Themenbereich:

  • Breadcrumb-Navigation - realisieren Sie via PHP eine Brotkrumen-Navigation
  • Check - testen Sie Ihre Webseite auf Fehler, z.B. können Sie mit dem Linkcheck prüfen, ob alle Ihre Links korrekt sind oder sich fehlerhafte Links auf der Webseite befinden
  • CMS - Content Management Systeme
  • e-teaching.org - sehr schön realisiertes Aufklappmenü
  • Link-Counter - ein Link-Counter zählt die Klicks auf einen Link


Kommentare (0)

Name
E-Mail (Wird nicht online angezeigt)
Homepage
Titel
Kommentar
Tragen Sie deshalb bitte den Text, den Sie in dem Bild sehen, in das nebenstehende Textfeld ein.
»

Webhosting inkl. Homepagebaukasten!


Hier die 10 neuesten Homepage-News für Webmaster aus unserer Redaktion:


Bildschirmdarstellung von Webseiten online testen - Top Tool!
quirktools.com/screenfly - fantastisches Tool zum Testen von responsiven Webseiten auf sehr vielen Ausgabegeräten. Sie können die gängigen PC-Monitore, Tablets, Smartphones etc. nach Größe bzw. Marke/Hersteller auswählen und schwupps wird die eingegebene URL so angezeigt, wie sie z.B. auf dem iPhone 3 aussehen würde. Mit einem Klick lässt sich der Test von Hoch- auf Querformat ändern, zudem kann auch eine individuelle Bildschirmgröße eingestellt werden. Da es heute eine unglaubliche Vielzahl an Geräten und Bildschirmgrößen gibt, ist das Screenfly-Tool wirklich ein sehr gutes und quasi unverzichtbares Werkzeug, um die Darstellung von responsiven Webseiten zu überprüfen. Top-Tool für jeden Webdesigner!
Gepostet am 20.01.2016 von meine-erste-homepage.com
Socicon Generator
Social Icon Generator - unter der URL http://www.socicon.com/generator.php finden Sie einen sehr guten Socicon-Generator. Der Generator erstellt individuell anpassbare Social-Icons für unglaublich viele soziale Netzwerke als .png-Dateien. Die Größe, die Iconfarbe, der Hintergrund und die Form können beliebig angepasst werden. Sie können somit ganz einfach farblich passende Social-Media-Icons zu Ihrer individuellen Webseitenfarbe erstellen.

Hier ein Beispiel mit eckigen Social-Media-Icons mit unserer Linkfarbe #2175bc auf schwarzem Hintergrund:

Twitter Facebook Google_Plus Pinterest

Und hier ein weiteres Beispiel mit runden Social-Media-Icons mit gelbem Hintergrund:

Twitter Facebook Google_Plus Pinterest

Und zum Schluß unser Blauton als Hintergrund, mit weiße Icons, dabei eckige Grundform mit abgerundeten Ecken:

Twitter Facebook Google_Plus Pinterest

Wir finden ein echt fantastisches Tool!
Gepostet am 12.01.2016 von meine-erste-homepage.com
Bildgigant- Online-Bilddienstleister
www.bildgigant.de - Eigenbeschreibung des Anbieters: Machen Sie Ihre Kreativprojekte interessanter mit einem lizenzfreien Bild aus unserem Shop. Unsere Bilder können zum Beispiel als Hintergrund oder Titelbild für Ihre Webseite, Ihr Produkt, Ihren neuen Flyer, eine Präsentation oder eine nette Grußkarte verwendet werden. Unser Sortiment wird in unterschiedlichen Auflösungen angeboten und eignet sich zur Anwendung im gesamten Digital- und Printbereich. Verkaufen Sie jetzt Ihre Bilder auf Bildgigant und Sie bekommen 50% des Erlöses. Wir kategorisieren und keyworden Ihre Bilder kostenlos!
Gepostet am 12.01.2016 von meine-erste-homepage.com
Juannas bunte Smilie-Sammlung
www.juanna.ch/smilies/index.htm - Juannas bunte Smilie-Sammlung
Gepostet am 12.01.2016 von meine-erste-homepage.com
WebSite X5 jetzt in der Version 12 erhältlich
Incomedia hat die Version 12 seiner bekannten Webdesign-Software "WebSite X5" veröffentlicht.
Zu den umfangreichen Neuerungen gehören folgende Features:

- Neue Versionen: Professional 12 (199,99€), Evolution 12 (69,99€) und Home 12 (19,99€)
- Responsive Webdesign für bis zu 1.000 Templates
- Für eine optimale responsive Darstellung können Breakpoints definiert werden
- Prüfen von Produktverfügbarkeiten im WebSite X5 Control Panel (auch über mobile Geräte)
- Neues Datenschutz- und Sicherheitszentrum (Für Cookies und reCaptcha)
- Automatische Anpassung der Webseitensprache

Weitere Informationen im Web unter
http://www.websitex5.com/de/
Gepostet am 06.01.2016 von meine-erste-homepage.com
Blogplaner zum Ausdrucken oder als fertig gedruckte Version
Bei einem Online-Blog gibt es allerhand zu tun: Es müssen regelmäßig Posts abgesetzt werden, Updates müssen gemacht werden, bestimmte Themen je nach Blog jahreszeitlich angegangen werden, es gibt Ausgaben und Einnahmen und vieles mehr.

Für diese organisatorischen Dinge gibt es hier einen Blogplaner: http://kreavida.de/blogplaner-2016-zum-kostenlosen-download/. Den Blogplaner für 2016 können Sie als gedruckte Version direkt auf der Webseite bestellen.
Gepostet am 06.01.2016 von meine-erste-homepage.com
Haben Sie ein Interesse an einer obdachlosen Zeitung?
Einen sehr interessanten Bericht zum Thema Homepages und soziale Netzwerke findet sich in der Welt Digital: http://hd.welt.de/Kultur-edition/article150328869/Haben-Sie-Interesse-an-einer-obdachlosen-Zeitung.html
Gepostet am 06.01.2016 von meine-erste-homepage.com
Frohes Neues Jahr!
Gepostet am 01.01.2016 von meine-erste-homepage.com
Silvestergruss
Gepostet am 31.12.2015 von meine-erste-homepage.com
Frohe Weihnachten
Gepostet am 24.12.2015 von meine-erste-homepage.com

Mehr News in unserer Rubrik Aktuelle News für Webmaster!

03 GIF-Banner


Hier die neuesten Postings aus unserem Homepage-Forum:

Unser großes Homepage-Forum ist bei all-inkl.com gehostet:

ALL-INKL.COM - Webhosting Server Hosting Domain Provider


Feedback und Informationen zu meine-erste-homepage.com:

meine-erste-homepage.com ist bei 1&1 Webhosting gehostet.

1&1 MyWebseite jetzt 30 Tage kostenlos testen