Blog

Online Marketing noch besser machen

Easy Homepage Navigation für Smartphones und PCs erstellen

Beim Erstellen deiner Homepage Navigation geht es darum für dein Unternehmen und deinen Kunden, die vorteilhafteste Lösung zu finden. Die Auswahl kann einen großen Unterschied machen.

Hast du noch kein Homepage Design ist deine Navigation gestaltbar. Andererseits wirst du sie gegebenenfalls den neuen Erkenntnissen anpassen. Um zu starten, schau dir zunächst deine (geplanten) Inhalte an. Achte insbesondere auf die Anzahl der Seiten oder Kategorien, deren Seitenzahl steigen wird.

Navigation mit wenigen Seiten

Bei unter 8 Seiten wird eine Navigation mit einer Ebene reichen. Sie muss sowohl für PCs und Smartphones funktionieren.

Klassische Homepage Navigation auf einer Ebene

Eine klassische Navigation ist heute noch gelegentlich auf langen Seiten zu finden.

Die Navigation wird nicht gestylt. Es handelt sich um eine Ansammlung von unterstrichenen Links. Sie werden am Anfang der Homepage/Seiten untereinander eingefügt.

Fühere Homepage Navigations Design
Klassische Homepage Navigation Abb. 1

Dieses Menü ist vom Prinzip her praktikabel. Sie macht Sinn für überwiegend textbasierte Homepage Architekturen (mit etwas mehr Styling) oder Seiten mit viel Inhalt.

Sie sieht auf Smartphones und PCs gleich aus.

Moderne Homepage Navigation auf einer Ebene

Diese moderne Navigation verwenden heute viele Unternehmen, die eine kleine Homepage mit wenigen Seiten einsetzen.

Sie wird für PCs und Smartphones (responsive Navigation) unterschiedlich gestylt (Abb.2).

Fühere Homepage Navigations Design
Moderne PC/Smartphone Navigation Abb. 2

Das Menü ist horizontal ausgerichtet, spart Platz und lenkt den Blick der Kunden auf die Inhalte.

Um eine solche Navigation für deine Homepage zu erstellen, bedarf es bestimmter Kenntnisse. Bei einer entsprechenden Anleitung ist das sogar für Anfänger möglich.

Mehr dazu später.

Navigation mit über 7 Seiten

Bei über fünf bis sieben Seiten wird es eng.

So springen im Browserfenster des PCs die Links auf die nächste Zeile. Beim Smartphone ist die vertikale Navigation nach einer gewissen Anzahl von Menü-Einträgen zu lang (Abb. 3).

Smartphone vs PC Navigation
Zu grosse PC/Smartphone Navigation Abb. 3

Eine Lösung muss für beide Varianten der Navigation, gefunden werden.

Klassiker Navigation mit mehreren Ebenen

Wenn es eine Standard-Navigation für Unternehmen gibt, dann ist es die Dropdown Navigation. Der Inhalt wird nicht nur auf einer Ebene sondern gleich auf mehreren Ebenen verteilt.

Das Menü gliedert sich in Themen oder Haupt­kategorien auf. Themen sind einzelne Seiten. Jede Haupt­kategorie beinhaltet mindestens zwei oder mehr Seiten (Abb. 4). Beispielsweise unter einer Kategorie „Produkte“ wird pro Produkt eine Seite verlinkt (hier: Seitenlink1 und Sublinks 1a-1c).

Dropdown Navigation
Dropdown PC Navigation Abb. 4

Bei wenigen Links mag diese Navigation auf dem PC noch akzeptabel sein. Doch für das Smartphone kommen nun noch mehr vertikale Links durch jeweils ausgeklappte Sublinks hinzu. So würde die Navigation über die Seite hinausgehen (siehe Abb. 3).

Diese Navigation muss im Vergleich zur Navigation von Abb. 2 auch wesentlich komplexer konstruiert werden.

Daher stelle ich jetzt noch eine modernere Option vor, die viele Vorteile mit sich bringt.

Moderne Navigation mit mehreren Ebenen

Zusätzlich zur regulären, horizontalen Navigation mit maximal 7 Links wird eine weitere Navigation auf der Homepage verwendet.

Eine Navigation, die eigentlich eine Galerie ist, dient als die zweite Ebene. Sie hat attraktive, klickbare Grafiken­/Fotos und/oder Beschrei­­bungen mit Links, die zu weiteren Seiten führen (Abb. 5).

Homepage-Navigation mit Menü und Galerie
Navigation mit Galerie Abb. 5

Die reguläre, horizontale Navigation der Homepage bleibt sowohl auf dem PC und Smartphone übersichtlich und leicht bedienbar (Abb. 2). Die Galerie enthält Links zu Seiten der Kategorien (Abb. 5). Sie passt sich dem Smartphone wie anderer Inhalt an.

Um diese Navigation umzusetzen, wird die Konstruktion der modernen Navigation verwendet (Abb. 2). Der Hauptinhalt einer Kategorie-Seite enthält die Galerie mit Links zu weiteren Seiten.

Navigationen schnell und flexibel erstellen

Um zu erfahren, wie du die Navigation erstellst, lies weiter.

Damit die Umsetzung schnell durchführbar wird, selbst für Anfänger, habe ich ein Kurs für ein Homepage Design inklusive moderner Navigation entwickelt.

Homepage Design erstellen

Damit wirst du in der Lage sein, eine frei gestaltbare Homepage mit einer der beiden modernen Navigationen zu erstellen.

FAZIT: Eine easy Navigation gibt es für jede Homepage

Eine Homepage Navigation sollte vorteilhaft für dich und deine Kunden sein. Um eine passende Navigation zu erstellen, schau dir die Anzahl deiner Seiten an. Bei vielen Seiten stellt sich oftmals die moderne Homepage Navigation mit Galerie als gute Lösung heraus. Die Galerie sieht attraktiv auf dem Smartphone sowie PC aus.

Weiterführende Links

HTML Links auf deiner Homepage verstehen

Autor/in: Iris Mitlacher