Die neue Navigation von Selbständig im Netz – Einblicke, Infos und Plugin-Tipps

Die neue Navigation von Selbständig im Netz - Einblicke, Infos und Plugin-TippsViele von euch werden es sicher schon bemerkt haben, ich habe an der Hauptnavigation ein paar Dinge verändert.

Was genau ich gemacht habe und warum, erkläre ich im Folgenden. Zudem stelle ich die Plugins vor, die ich dafür genutzt habe.

Über euer Feedback würde ich mich freuen.

Warum eine neue Navigation?

Das ist eine gute Frage. Es ist generell so, dass ich regelmäßig neue Dinge ausprobiere und teste. Ich bastle einfach gern an meinen Projekten und versuche immer wieder was zu verbessern und Erfahrungen zu sammeln.

Dazu kommt, dass ich selber nach einer gewissen Zeit mit einzelnen Elementen meiner Blogs unzufrieden bin, nur dauert es manchmal eben einige Zeit das zu erkennen. Ich stoße ja auch ständig auf neue Websites und lerne dort unter anderem neue Umsetzungen der Navigation kennen.

Nichtzuletzt bekomme ich natürlich Feedback von meinen Lesern, welches ich ebenfalls mit in die Veränderungen einfließen lasse.

Das alles hat dazu geführt, dass ich mir mal wieder Zeit für meine Navigation genommen habe und die geändert habe.

Was mich an meiner Navigation gestört hat

Mein Hauptproblem ist, dass ich eigentlich viel zu viel in die Hauptnavigation packen möchte. Es gibt so viele spannende und wichtige Unterseiten in meinem Blog, dass ich echt Probleme habe diese alle zu verlinken.

Deshalb musste ich mich einfach mal bremsen und überlegen, was wirklich in die Hauptnavigation soll und was, so schmerzhaft es ist, rausfliegt.

2 Menüpunkte haben in meiner bisherigen Navigation gefehlt. Das ist zum einen das Nischenseiten-Aufbau E-Book, welches zwar im Header beworben wird, aber nun auch in die Hauptnavigation sollte.

Zum anderen hat mich schon länger gestört, dass es keinen Link zur Startseite in der Navigation hab. Man kommt zwar über den Klick auf das Logo zur Startseite, aber in der Navigation war nichts drin. Davon abgesehen habe ich mir natürlich noch weitere Gedanken über die Punkte in der Hauptnavigation gemacht.

Ein weitere Sache, die mich schon länger beschäftigt, sind die Untermenüs. Diese waren bisher mit der hauseigenen Funktion von WordPress umgesetzt, sahen aber meiner Meinung nach nicht ideal aus. Und da ich mittlerweile so viele interessante und spannende Inhalte habe, wollte ich in Zukunft gerade die Untermenüs nutzen, um diese zu präsentieren.

Zudem war es lange Zeit so, dass beim Scrollen der komplette Header nach oben weggescrollt ist und keine Navigation mehr verfügbar war. Vor einer ganzen Weile hatte ich mal den kompletten Header Sticky gemacht, so dass dieser am oberen Rand blieb. Das nahm aber zu viel Platz weg. Deshalb wollte ich nun die Hauptnavigation beim Scrollen am oberen Rand anzeigen lassen.

Dieser Punkte habe ich mich angenommen.

Sticky Menü

Kommen wir erstmal zum letzten angesprochen Punkt, dem Hauptmenü beim Scrollen. Ich habe mich hier nach einer Lösung umgeschaut und das Plugin myStickymenu erstmal auf einem Testserver ausprobiert.

Das Plugin hat mir gut gefallen, da es einfach und schnell ist, aber dennoch alle notwendigen Einstellungsmöglichkeiten bietet.

In den Optionen musste ich lediglich die CSS-Klasse der Hauptnavigation eintragen und ein paar Einstellungen für die mobile Ansicht vornehmen. Das war es auch schon und nach relativ kurzer Zeit habe ich das Ergebnis erzielt, was ihr nun sehen könnt.

Ich finde die mitscrollende Hauptnavigation sehr nützlich und sie nimmt dennoch wenig Platz weg.

Neue Menüpunkte

Als nächstes geht es um die einzelne Menüpunkte in der Hauptnavigation.

Zum einen habe ich ganz links den Menüpunkt “Blog” eingebaut. Hier geht es zur Startseite meines Blogs. Ich glaube, dass es für viele Leser einfach ein gutes Gefühl ist diesen Link zu haben. Das erleichtert die Navigation und man weiß immer, wie man schnell zur Startseite gelangt. Sicher keine Mega-Veränderung, aber ich finde es so besser.

Zum anderen habe ich den Menüpunkt “E-Book” eingebaut, hinter dem sich mein Nischenseiten-Aufbau E-Book verbirgt. Es gibt zwar oben rechts im Header auch einen Hinweis zum eBook, aber die meisten Leser schauen erstmal nur auf die Hauptnavigation. Deshalb macht dieser Link zu einer meiner wichtigsten Einnahmequellen Sinn.

Die Ergebnisse sind auch spürbar. Die eBook-Seite wurde seit der Umstellung der Navigation deutlich häufiger aufgerufen und auch die Verkäufe sind angestiegen. Nun sind das zwar nur Werte von gut eineinhalb Wochen, aber es ist dennoch sichtbar.

Zudem habe ich den Punkt “Downloads” eingebaut, da ich ja eine neue Download-Seite habe, wie ich schon letztens berichtet habe.

Ebenfalls ergänzt habe ich den Punkt “Nischensites“. Auch wenn die Nischenseiten-Challenge aktuell nicht läuft, so möchte ich auf diesen wichtigen Themenbereich meines Blogs natürlich in der Hauptnavigation hinweisen. Ebenfalls hinzugekommen ist der Punkt “Einnahmen“, der zu einer Übersicht von Einnahmereports führt.

Um diese neuen Punkte einbauen zu können, mussten natürlich bisherige Menüpunkte entfernt werden. Einer davon war der einzelne Link zur Nischenseiten-Challenge. Diese ist nun ja wieder vorbei und deshalb war es für mich kein Problem den Link zu entfernen. Dafür gibt es ja nun den generellen Punkt “Nischensites”.

Ebenfalls entfernt habe ich die Punkte “Frage?” und “Tools”. Die sind nun in die Mini-Navigation am oberen Rand meiner Website gerutscht. Diese Navigation habe ich zudem dunkel hinterlegt, damit sie besser erkennbar ist. Und ich habe dort auch den neuen Menü-Punkt “Newsletter” eingebaut, der nun auf eine neue Seite mit einer Auflistung aller meiner Newsletter führt.

Zudem habe ich diese Navigaton zweigeteilt. Linksbünding sind vor allem Links zu fachlichen Inhalten ausgerichtet. Rechtsbündig gibt es allgemeine organisatorische Links.

Neue Untermenüs

Die wohl größte Änderung habe ich an den Untermenüs der Hauptnavigation vorgenommen. Im folgenden Screenshot sehr ihr, wie so ein Untermenü bisher aussah:

Einblicke in die neue Navigation von Selbständig im Netz

Das war einfach die Anzeige, wie sie WordPress selbst ausgibt. Ich war damit nicht wirklich zufrieden, da es weder besonders gut aussah, noch hat man den Platz damit gut ausgenutzt.

Das hat mich zu einer Lösung gebracht, die ich schon lange im Auge habe und hier im Blog auch schon mal in einer einfachen Version genutzt habe, dem Mega Menü. Damals habe ich alle Kategorien meines Blogs, und das sind eine Menge, als Hover-Untermenü in die Hauptnavigation aufgenommen. Diese Anzeige habe ich damals aber manuell gestaltet, um die vielen Kategorien ansprechend in mehreren Spalten anzuzeigen.

Eine manuelle Umsetzung wollte ich diesmal nicht, weshalb ich mich nach passenden Plugins umgeschaut habe. In die Endauswahl kamen die Plugins Max Mega Menu und Hero Menu. Während das erstgenannte recht einfach gehalten ist und bereits in der kostenlosen Variante so gut wie alles notwendige bereitstellt, ist das kostenpflichtige “Hero Menu” Plugin deutlich umfangreicher. Es hat eine sehr gute Konfigurations-Oberfläche und unendliche Einstellungsmöglichkeiten.

Ich habe mich am Ende aber für das “Max Mega Menu” Plugin entschieden. Zum einen hat es zwar ebenfalls viele Einstellmöglichkeiten, aber es ist dennoch vergleichsweise übersichtlich. Noch wichtiger war aber, dass ich bei Tests festgestellt habe, dass das “Hero Menu” deutlich mehr Datenbankzugriffe verursacht.

Die Einstellungen in dem von mir gewählten Plugin sind für einen Laien nicht ganz so verständlich. Hier sieht man einen Ausschnitt.

Die neue Navigation von Selbständig im Netz - Einblicke, Infos und Plugin-Tipps

Dennoch habe ich mich da recht schnell eingefunden und musste nur noch wenig über die allgemeine CSS-Datei meines Themes anpassen.

Bevor ich aber die Untermenüs für die Punkte “Nischensites”, “Tutorials” und “Best of” (ehemals “Top-Artikel”) erstellen konnte, habe ich auf Papier geplant, wie diese aussehen sollen. Denn solche Mega Menüs sind schick, aber man muss sie auch sinnvoll füllen können.

Wie ihr beim Überfahren der Menüpunkte sehen könnt, habe ich passende Links und auch eine Grafik in diese Untermenüs integriert:

Die neue Navigation von Selbständig im Netz - Einblicke, Infos und Plugin-Tipps

Man kann alle möglichen Widgets in seine Submenüs einbinden, was ich aber erstmal nicht ausgenutzt habe.

Schön an dem Plugin finde ich zudem, dass es eine leichte Verzögerung beim drüberfahren mit der Maus gibt. Wenn man also nur drüberfährt und woanders mit der Maus hinwill, dann geht es nicht auf. Man muss ca. eine halbe Sekunde darüber bleiben, damit sich das Untermenü öffnet.

Ich werde in Zukunft das Plugin genauer auf Blogprojekt.de vorstellen und auf Details eingehen.

Work in Progress

Ist die Arbeit an der Navigation damit beendet? Sicher nicht.

In der Vergangenheit habe ich immer wieder an der Navigation gebastelt, sei es weil ich Feedback von euch bekommen habe, weil ich neue wichtige Inhalte erstellt habe oder einfach weil ich von anderen Websites inspiriert wurde. Es geht also immer weiter

Ich würde mich auf jeden Fall über euer Feedback freuen.

Zudem werde ich in Zukunft mal wieder eine Heatmap-Analyse durchführen und mir auch die Klick-Statistiken genauer anschauen.

Fazit

Schon länger hatte ich eine Überarbeitung der Navigation im Auge. Nun habe ich es endlich umgesetzt und bin mit dem Ergebnis sehr zufrieden.

Dann kann ich mich ja demnächst an mein anderes großes Projekt machen, die Überarbeitung der Startseite. 🙂

Was haltet ihr von solchen Mega-Menüs?

Ergebnis anschauen

Peer Wandiger

22 Gedanken zu „Die neue Navigation von Selbständig im Netz – Einblicke, Infos und Plugin-Tipps“

  1. Hey Peer,

    eigentlich mag ich MetaMenüs nicht wirklich, aber ich bin positiv überrascht! Sieht echt super aus und ist sehr übersichtlich. Gefällt mir gut!

    PS: Kam das Naming “Nischensites” aus Platzgründen zustande? 😉

    Viele Grüße

    Florian

    Antworten
  2. Hallo Peer,

    deine Änderungen gefallen mir gut. Sie bringen einen frischen Wind rein und wirken etwas moderner. Find ich klasse. Tolle Arbeit

    Antworten
  3. Hallo Peer, das sieht meiner Meinung nach sehr professionell aus, nur würde ich das Design insgesamt vielleicht noch etwas leichter und nicht so wuchtig gestalten. Vielleicht auch etwas heller, außerdem würde ich den Verlauf / Schatten zwischen der linken Seitenleiste (Dunkelgrau) und dem Content Text bereich (Hellgrau) überdenken / entfernen.

    Antworten
  4. Wenn ich mich nicht irre, dann unterstützt das Theme meiner Seite auch Mega-Menüs… ich meine da irgendwo mal was gelesen zu haben. Allerdings sind die Menüpunkte noch überschaubar genug sich darüber noch keine Gedanken machen zu müssen…. ich schau es mir dennoch mal an, damit ich bescheid weiß, wenn es soweit ist.

    Schön hast du das gemacht Peer. Ist ja auch echt schwer bei einem so dicken Brocken alles ins Menü zu bekommen, was einem an dem eigenen Baby wichtig ist 😀

    Antworten
  5. Hallo
    Um mit dem Smartphone (Android) besser lesen zu können, zoome ich oft etwas rein. Wenn ich das hier mache und dann das Menü öffne, bekomme ich nicht mehr alle Menüpunkte angezeigt und Sie lassen sich dann auch nicht scrollen.
    Viele Grüße

    Antworten
  6. Hallo Peer,
    das Problem, all die mir wichtigen Links in der Navi unterzubringen kenne ich auch. Insofern finde ich die Umsetzung mit den Megamenüs schon klasse. Muss mir mal anschauen, wie das dann auf dem Smartphone aussieht. Aber wieso “verschwendest” Du für den Menüpunkt “Förderung” so viel Platz? Ist Dir der wirklich so wichtig? Steckt dahinter eine Einnahmequelle? Denke eher nicht.

    Antworten
  7. Hallo Peer,
    das neue Menü gefällt mir sehr. Besonders positiv finde ich das Bild im Submenü. Das lockert alles etwas auf und man wird nicht nur von Links “erschlagen”.

    Da könntest du (wenn du dafür den Platz findest) gerne mehr einbauen, z.B. in jedes Untermenü eines.

    Ändern würde ich allerdings den Hintergrund der Submenüs. Probiere doch einmal einen etwas durchscheinenderen Hintergrund oder eine etwas hellere Farbe.

    Insgesammt aber sehr gelungen.

    Viele Grüße,
    Schmitt

    Antworten
    • Das mit dem dunklen Hintergrund bei den Submenüs werde ich mir auf jeden Fall nochmal anschauen. Und das Bild im Submenü finde ich auch sehr schick. Mal sehen, ob och für die anderen da auch was passendes finde.

      Antworten
  8. Mega-Menü finde ich gut, wenn sie entsprechend passend sind und sinnvoll gefüllt werden. Was mir derzeit nicht gefällt, ist das obere Menü. Da ist ist die Farbe nicht passend gewählt und lenkt nur von dem unteren Menü ab. Grüße.

    Antworten
  9. Hi Per,

    deine Realisierung der Verweise finde ich eine klasse Weiterentwicklung deiner Site.

    Ich habe mich heute nachmittag auch gleich am myStickyMenu versucht. Hat funktioniert. Leider hat dieses plugin scheinbar Probleme mit dem “WP Minify Fix” plug in. Beides bekomme ich zusammen nicht ans Laufen. Vielleicht finde ich das Problem noch.

    Antworten
  10. Hallo Peer,

    viel übersichtlicher als vorher. Ich find´s auch schön, dass die Menüs nicht mehr aufklappen, wenn man nur kurz mit der Maus drüber fährt. Das nervt bei vielen Webseiten.

    Gruß
    Tom

    Antworten
  11. Ich finde die Schriftgröße etwas groß gerate. Man hat das Gefühl, die Menüleiste schreit einen an. Wäre aber sehr interessant wenn du uns auf dem laufenden hältst, wie sich das Nutzerverhalten durch die Veränderung ändert.

    Antworten
  12. Hallo Peer,
    Ich finde das war eine gute Idee mit der Navi, für mich ist es jetzt deutlich übersichtlicher. Das Sticky Plugin ist auch eine Coole sache, habe letztenst in einem deiner Artikel davon gelesen,ich habe es aber nicht ausprobiert…Kommt dann die Tage ?

    Antworten
  13. Sieht gut aus! Die Bilder peppen auch die Navigation auf.

    Ich habe das Plugin myStickymenu direkt integriert. Das Mega Menu benötige ich für meine Affiliate-Webseite nicht.

    Antworten
  14. Ich habe lange nicht mehr auf deiner Seite vorbei geschaut, aber mit der neuen Navigation bin ich persönlich mehr als zufrieden! Es wirkt alles deutlich übersichtlicher. 🙂

    Antworten
  15. Hallo Peer
    Ich habe mich auch für das ‘Max Mega Menu’ entschieden. So wie Du es umgesetzt hast, funktioniert das in der Free Version, oder ist dafür die Pro Version notwendig?

    Antworten

Schreibe einen Kommentar