kulturbanause Blog

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

Design-Pattern


Navigation beim Runterscrollen verstecken, beim Hochscrollen anzeigen

Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.

Beitrag zu Ende lesen

Die Navigation im Responsive Web Design

Hamburger Icon

Aufgrund der vielen verschiedenen Bildschirmgrößen und Geräte muss eine moderne Webseite flexibel auf die individuellen Bedürfnisse des Endnutzers reagieren. Einer der schwierigsten Punkte im Responsive Web Design ist dabei die Navigation. Damit eine Webseite auf verschiedenen Geräten benutzerfreundlich navigiert werden kann, brauchen wir ein Konzept, das es uns ermöglicht die Navigation entsprechend der Bildschirmgröße und des Bedienkonzepts (Mouse/Touch) anzupassen. Zu diesem Zweck gibt es unterschiedliche Musterlösungen - auch »Navigation Pattern« genannt – die wir in diesem Beitrag detailliert erklären.

Beitrag zu Ende lesen

Touchscreen optimierte DropDown-Navigation mit jQuery

Umfangreiche Navigationen stellen insbesondere auf großen Touchscreens eine Herausforderung dar. Da Mouse-Over-Effekte nicht funktionieren, werden tiefer liegende Navigationsebenen häufig durch einen Klick auf das unverlinkte Elternelement geöffnet. Wenn ein anderes Elternelement angeklickt wird, soll das zuvor geöffnete Untermenü geschlossen und das neue Menü geöffnet werden. In diesem Beitrag archivieren wir ein Snippet, dass diese Aufgabe erledigt.

Beitrag zu Ende lesen

Text mit CSS vertikal zentrieren

Texte auf einer Website horizontal zu zentrieren sollte für die meisten Webdesigner kein Problem darstellen. Auch wie gefloatete und absolut positionierte Elemente horizontal zentriert werden können haben wir bereits in einem Beitrag erklärt. Eine vertikale Zentrierung von Texten kann da schon etwas komplizierter sein. In diesem Artikel erklären wir euch, wie ihr mit wenigen CSS-Angaben zum Ziel kommt und ansprechende gestalterische Ergebnisse erzielt. Insbesondere im Responsive Webdesign kann diese Technik von Vorteil sein.

Beitrag zu Ende lesen

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

Layout-Pattern im Responsive Web Design

Um eine Webseite für verschiedene Geräte und Bildschirmgrößen zu optimieren gibt es unterschiedliche Konzepte nach denen sich der Inhalt einer Seite verhalten kann. Um auf allen Größen eine gute Figur zu machen verschiebt sich der Inhalt nach gewissen »Layout-Pattern«. Die meistgenutzten Layout-Muster zeigen wir in diesem Beitrag anhand von Beispielen.

Beitrag zu Ende lesen