kulturbanause Blog

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

Visual Design & UX


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

Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

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

Flexbox: Mehrspaltige Liste von Boxen mit vertikal zentrierten Inhalten

Vertikales Zentrieren einerseits und gleich hohe Elemente andererseits stellten Webdesigner lange Zeit vor große Herausforderungen. Dank Flexbox gehört dies mittlerweile der Vergangenheit an. In diesem Beitrag archivieren wir ein häufig benötigtes Flexbox-Pattern in dem einige Teaser-Boxen mehrspaltig nebeneinander angezeigt werden sollen, sobald ausreichend Platz vorhanden ist. Innerhalb der einzelnen Box befindet sich in Icon und beschreibender Text unterschiedlicher Länge. Das Icon soll immer vertikal in der Mitte des Textes positioniert werden. Mit zwei verschachtelten Flexboxen kein großes Problem.

Beitrag zu Ende lesen

WordPress: Single-Seiten von Custom Post Types umleiten

Innerhalb einer WordPress-Website wird zum Erstellen von Übersichtsseiten, z. B. von Produkten oder Mitarbeitern meist auf »Custom Post Types« zurückgegriffen. Die einzelnen Beiträge des Post Types werden dann mit Hilfe eines Loops an der gewünschten Stelle auf der Website ausgegeben. Doch nicht immer wird dabei die Single-Ansicht (Detailseite) benötigt. In diesem Beitrag archivieren wir ein Snippet, mit dem ihr die Single-Ansicht, sowie die Vorschau für bestimmte Beitragstypen umleiten könnt. Sowohl im Backend als auch im Frontend.
Beitrag zu Ende lesen

Material Design – Die Designsprache von Google

»Material Design« ist eine von Google stetig weiterentwickelte Designsprache. Sie verbindet die Gestaltungsregeln des klassischen Grafik-Designs mit den Möglichkeiten digitaler Benutzeroberflächen. Ziel von Material Design ist u.a. die Verbesserung der Benutzerfreundlichkeit. Darüber hinaus hat Material Design einen charakteristischen Look, so dass im Material Design gestaltete Interfaces sich ideal kombinieren lassen.

In diesem Artikel erklären wir euch, worin der Unterschied zum Flat Design besteht und welche Gestaltungsregeln beim Material Design berücksichtigt werden sollten.

Beitrag zu Ende lesen