Kompatibilität:

WebSite X5 Evo und Pro

Bei der Erstellung einer responsiven Website ist eines der wichtigsten Elemente, das optimiert werden muss, das Navigationsmenü. Während die Struktur auf dem Desktop umfangreich und komplex sein kann, ist der verfügbare Platz auf Smartphones und Tablets deutlich begrenzt: Ein nicht angepasstes Menü kann Navigation, Benutzerfreundlichkeit und Nutzererlebnis beeinträchtigen.


In WebSite X5 passt sich das Menü automatisch an die verschiedenen Auflösungen an, dank des responsiven Systems und des Hamburger-Menüs. Um jedoch eine wirklich effektive Navigation zu gewährleisten, ist es wichtig, Struktur und Verhalten des Menüs in Abhängigkeit von den verschiedenen Breakpoints zu überprüfen.


Warum ein responsives Menü entscheidend ist

Bevor Sie fortfahren, bedenken Sie, dass nur ein gut optimiertes Menü es ermöglicht:

  • die Navigation auf kleineren Bildschirmen zu verbessern;
  • den Zugriff auf die wichtigsten Bereiche der Website zu erleichtern;
  • visuelle Überladung zu vermeiden;
  • Übersichtlichkeit und Ordnung zu bewahren;
  • die allgemeine Benutzererfahrung zu verbessern.


Ziel ist es, die Navigation unabhängig vom verwendeten Gerät einfach, intuitiv und funktional zu gestalten.


So strukturieren Sie das Menü richtig

Die wichtigsten Schritte zur Erstellung eines responsiven Menüs sind folgende:

1. Erstellen Sie die Sitemap

Zunächst müssen Sie die Sitemap erstellen, da das Menü seine Einträge automatisch daraus übernimmt:

  • Gehen Sie zu Schritt 3 - Sitemap.
  • Ordnen Sie Seiten und Ebenen logisch an.
  • Definieren Sie sorgfältig Namen und Hierarchien.


#tip - Weitere Informationen finden Sie unter Wie erstellt man eine Sitemap?


2. Menü einrichten

Nachdem die Sitemap definiert wurde, können Sie das Menü-Objekt verwenden, um das eigentliche Menü zu erstellen. Sie können entscheiden, wo Sie es platzieren: 

  • Im Header des Templates: Dies ist die empfohlene Lösung. Sie erstellen das Menü einmal und es erscheint identisch auf allen Seiten. Dadurch sparen Sie Zeit und erhalten einheitliche und konsistente Seiten.  
  • In der Seitenleiste: ideal für vertikale Menüs. Beachten Sie, dass eine Seitenleiste bei begrenztem Platz schwierig zu handhaben sein kann.
  • Innerhalb der Seiten: nützlich für lokale oder unterstützende Menüs, aber weniger geeignet für das Hauptnavigationsmenü.


 In den meisten Fällen sollten Sie daher zur Erstellung des Hauptnavigationsmenüs wie folgt vorgehen: 

  • Gehen Sie zu Schritt 2 - Template > Template-Inhalt > Header.
  • Fügen Sie das Menü-Objekt ein.
  • Konfigurieren Sie Größe, Position und Stil.


#tip - Weitere Informationen finden Sie unter Wie arbeitet man mit dem Menü-Objekt?


3. Verhalten bei Breakpoints konfigurieren

  • Verwenden Sie die Responsive Bar im Fenster Template-Inhalt, um die verschiedenen Ansichten zu überprüfen.
  • Überprüfen Sie, wie sich das Menü an niedrigere Auflösungen anpasst.
  • Verkleinern Sie das Menü-Objekt entsprechend dem verfügbaren Platz und verschieben Sie es so, dass es nicht von anderen Objekten „überdeckt“ wird: Andernfalls sind die Menüpunkte nicht anklickbar.

4. Hamburger-Menü überprüfen

  • Die Hamburger-Schaltfläche wird automatisch aktiviert, wenn der verfügbare Platz nicht mehr ausreicht, um alle Menüeinträge anzuzeigen. 
  • Überprüfen Sie mithilfe der Responsive Bar, bei welchen Breakpoints sie erscheint, und passen Sie bei Bedarf Größe und Position an.
  • Öffnen Sie das Einstellungsfenster des Menü-Objekts, um den Stil der Hamburger-Schaltfläche anzupassen. 


Navigation mit der Sticky Bar weiter verbessern

Wenn Sie das Menü während der Navigation noch zugänglicher machen möchten, können Sie eine responsive Sticky Bar integrieren.


Die Sticky Bar ist eine Leiste, die beim Scrollen der Seite immer sichtbar bleibt und am oberen Rand des Browserfensters fixiert ist. Sie enthält in der Regel die wichtigsten Elemente des Headers, wie zum Beispiel:

  • Hauptmenü;
  • Logo;
  • strategische Links;
  • Kontakt-Buttons oder CTAs.


Dieses Werkzeug ermöglicht es Ihnen:

  • die Navigation stets zugänglich zu halten;
  • die Benutzerfreundlichkeit und die Kontinuität der Navigation zu verbessern;
  • den schnellen Zugriff auf die wichtigsten Bereiche zu erleichtern;
  • die Benutzererfahrung insbesondere auf mobilen Geräten zu verbessern.


So konfigurieren Sie die Sticky Bar:

1. Sticky Bar aktivieren

  • Gehen Sie zu Schritt 2 - Template-Einstellungen > Sticky Bar.
  • Aktivieren Sie die Option Obere Leiste anzeigen.

2. Gestaltung und Inhalte festlegen

  • Konfigurieren Sie Darstellung und Inhalte in den Bereichen Allgemein und Inhalte.
  • Fügen Sie nur Elemente ein, die für die Navigation wirklich notwendig sind.

3. Responsives Verhalten optimieren

  • Verwenden Sie die Responsive Bar, um Sichtbarkeit und Inhalte an die verschiedenen Breakpoints anzupassen.
  • Bewerten Sie, welche Objekte in kleineren Ansichten beibehalten oder ausgeblendet werden sollen.


#tip - Die Sticky Bar sollte eine wesentliche Navigation gewährleisten: Bevorzugen Sie Logo, Menü und strategische Funktionen und vermeiden Sie es, den verfügbaren Platz zu überladen, insbesondere auf Smartphones. Weitere Informationen finden Sie unter Sticky Bar. Wie erstellt man eine Navigationsleiste, die beim Scrollen immer sichtbar bleibt?


Praktische Tipps für ein effektives responsives Menü

Ein responsives Menü richtig zu gestalten bedeutet, das richtige Gleichgewicht zwischen inhaltlicher Vollständigkeit, einfacher Navigation und Benutzerfreundlichkeit auf verschiedenen Geräten zu finden.


Ein zu komplexes oder schlecht optimiertes Menü kann die Benutzererfahrung schnell beeinträchtigen, insbesondere auf Smartphones, wo Platz und schnelle Zugänglichkeit entscheidend sind.


Um bessere Ergebnisse zu erzielen:

  • halten Sie die Struktur einfach und hierarchisch klar;
  • begrenzen Sie die Anzahl der Haupteinträge und strukturieren Sie die Inhalte nach Priorität;
  • vermeiden Sie zu lange oder zu stark verschachtelte Menüs;
  • verwenden Sie kurze und leicht verständliche Bezeichnungen;
  • überprüfen Sie Lesbarkeit, Größe der Schaltflächen und Benutzerfreundlichkeit;
  • kontrollieren Sie das Verhalten des Menüs bei verschiedenen Breakpoints;
  • testen Sie die Navigation auf echten Smartphones und Tablets;
  • verwenden Sie die lokale Vorschau, um mögliche Probleme vor der Veröffentlichung zu erkennen.


Zusammenfassung

Das responsive Menü ist einer der wichtigsten Aspekte bei der Gestaltung einer effektiven Website.


Mit WebSite X5 können Sie die Navigation an verschiedene Geräte anpassen, ohne in den Code eingreifen zu müssen, und so Benutzerfreundlichkeit, Zugänglichkeit und die Gesamtqualität des Projekts verbessern.


Ein gut gestaltetes Menü macht die Website professioneller, benutzerfreundlicher und auf jedem Gerät effektiver.