kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Navigation


Prozess- / Fortschritts-Navigation mit CSS

Bei der Gestaltung von Prozess- bzw. Check-Out-Navigationen wird häufig auf Grafiken zurückgegriffen, um das gewünschte Aussehen zu erreichen.
In diesem Beitrag zeigen wir euch eine Lösung, wie ihr eine solche Navigation mit reinem CSS und ganz ohne Grafiken realisieren könnt. Wir gehen dabei auf eine Lösung mit floatenden Elementen und auf eine Lösung mit dem CSS Flexbox-Modell ein.

Beitrag zu Ende lesen

Automatisches Inhaltsverzeichnis mit jQuery

Ein Inhaltsverzeichnis in den Beiträgen eines Blogs oder in komplexen Unterseiten einer Website bietet sich aus verschiedenen Gründen an. Einerseits bietet ihr euren Lesern einen Mehrwert, andererseits verbessert ihr die Struktur des Beitrags für Suchmaschinen. Wenn ihr ein Inhaltsverzeichnis erstellen möchtet, solltet ihr dafür einen Automatismus einsetzen. Andernfalls müsst ihr das Inhaltsverzeichnis jedes Mal aufwändig anpassen, sobald die Inhalte der Seite verändert werden. In diesem Beitrag archiviere ich ein jQuery-Snippet mit dessen Hilfe ein Inhaltsverzeichnis erzeugt und eingefügt werden kann.

Beitrag zu Ende lesen

WordPress: Permalink der übergeordneten Seite (Page Parent) ausgeben

Wenn ihr WordPress als CMS und nicht als reine Blogging-Software einsetzt, ist die Wahrscheinlichkeit groß, dass ihr eine hierarchische Navigation mit hoher Verschachtelungstiefe erstellen müsst. Damit sich eure Besucher trotz komplexer Navigation auf der Website zurecht finden, wird in der Seitenleiste häufig eine weitere Navigation abgebildet. In diesem Zusammenhang habe ich bereits einige Snippets veröffentlicht, mit deren Hilfe ihr u.a. die Child-Pages oder den Titel der übergeordneten Seite anzeigen könnt. Ihr könnt auch testen, ob die aktuelle Seite Kind-Elemente besitzt, oder ob sie selbst Parent und/oder Child-Page ist. In diesem Beitrag archiviere ich das Snippet um den Permalink zur übergeordneten Seite auszugeben.

Beitrag zu Ende lesen

Prüfen, ob ein WordPress-Navigationsbereich (wp_nav_menu) ein Menü enthält

In WordPress können über die Funktion wp_nav_menu Navigationsbereiche registriert und im Template platziert werden. Im Administrationsbereich hat der Administrator anschließend die Möglichkeit die Navigationsbereiche mit Menüs zu bestücken.
Je nach Theme sollte geprüft werden, ob ein Bereich auch eine Navigation enthält. Beispielsweise weil die Navigation auf dem Smartphone hinter einem Button versteckt wird und dieser Button natürlich keinen Sinn macht, wenn gar keine Links vorhanden sind.

Beitrag zu Ende lesen

WordPress: Kategorien & Schlagwörter verwalten

Beiträge-Icon von WordPress

Beiträge werden in WordPress in Kategorien eingeteilt und verschlagwortet. Kategorien und Schlagwörter sind dabei wichtige Hilfsmittel, um die Inhalte einer Website zu strukturieren und für den Besucher einfacher zugänglich zu machen. Kategorien sind hierarchisch strukturiert und können verschachtelt werden, Schlagwörter sind netzförmig. Sie existieren nebeneinander. Ob man eher mit Kategorien oder Schlagwörtern arbeitet, ist Geschmacksache und abhängig vom jeweiligen Projekt. Häufig wird beides verwendet.

Beitrag zu Ende lesen

Aktiv-Zustände von Links (a:active) auf iPad und iPhone optimieren

Professionelles Webdesign ist längst auch optimiert für die Bedienung mittels Touch-Screen. Gerade im Bereich der mobilen Endgeräte existiert nahezu kein anderes Bedienkonzept. Da es auf einem Touch-Screen allerdings keinen Mouse-Over-Effekt gibt, muss unbedingt ein sinnvoller Aktiv-Zustand für Links integriert werden. Nur so ist sichergestellt, dass der Anwender eine Rückmeldung erhält, wenn er ein Element antippt. Umso ärgerlicher ist es, dass unter iOS Aktiv-Zustände ignoriert werden.

Beitrag zu Ende lesen