Benutzeroberfläche und Navigation nach Gerätetyp
Das Layout der Webseite passt sich dynamisch an das verwendete Endgerät und die Bildschirmausrichtung an (Responsive Design).
| Funktion / Element | PC (Desktop) & Tablet (Querformat) | Smartphone & Tablet (Hochformat) |
| Hauptnavigation | Oben im Header unterhalb des Titels platziert. | Unten fixierte Navigationsleiste am Bildschirmrand. |
| Auffächern der Unterpunkte | Fächert sich beim Überfahren mit der Maus (Hover) oder Klick nach unten auf. | Fächert sich im Menü-Overlay per Antippen der Hauptkategorien nach unten aus. |
| Mehr-Menü (+) | In die obere Menüleiste oder den Fußbereich integriert. | Jederzeit unten rechts verankert und mit einem Tippen aktivierbar. |
| Suchfunktion | Suchleiste oder Lupe oben rechts im Header bzw. der Seitenleiste. | Lupe-Symbol in der unteren Navigationsleiste öffnet ein Such-Overlay. |
| Darkmode & Sprache | Oben rechts im Header (Mond-Symbol & DE-Button). | Oben rechts im Header (Mond-Symbol & DE-Button). |
Geräteansichten
Smartphone
Tablet
PC/Mac
Die Kernfunktionen im Detail
1. Untermenüs und Aufklapp-Verhalten („Auffächern“)
- Desktop & Tablet (Querformat): Beim Fahren mit dem Mauszeiger über einen Hauptmenüpunkt öffnen sich die zugehörigen Unterpunkte.
- Mobil & Tablet (Hochformat): Im geöffneten Menü lassen sich Hauptkategorien durch Antippen aufklappen. Die Unterpunkte fächern sich direkt darunter aus, sodass die Übersicht erhalten bleibt.
2. Permanenter Schnellzugriff („Mehr-Menü“ oder „+“)
- Auf Smartphones und hochkant gehaltenen Tablets befindet sich die Option Mehr (+) dauerhaft unten rechts am Bildschirmrand.
- Sie bleibt beim Scrollen fixiert und ermöglicht jederzeit den schnellen Zugriff auf erweiterte Kategorien, Impressum, Datenschutz oder Kontaktdaten.
3. Darkmode (Dunkelmodus)
- Über das Mond-Icon in der Kopfzeile oben rechts lässt sich das Erscheinungsbild der Webseite mit einem Klick von einem hellen auf ein dunkles Farbschema umstellen, um das Lesen bei geringem Umgebungslicht zu angenehmer zu gestalten.
4. Sprachauswahl
- Direkt neben dem Darkmode-Schalter im Header befindet sich die Sprachauswahl (z. B. DE). Ein Klick darauf wechselt die Sprachversion der Inhalte.
5. Kategorien und Artikelansicht
- Jeder Artikel ist mit einem Kategorie-Badge versehen (z. B. Bonsaipersönlichkeiten). Ein Klick darauf filtert alle Beiträge derselben Kategorie.
- Angaben zu Veröffentlichungsdatum und geschätzter Lesedauer sind direkt unter dem Kategorietitel platziert.
- Bilder passen sich automatisch der Bildschirmbreite an und werden auf mobilen Geräten zentriert im Textfluss dargestellt.
