Dank Flexbox oder CSS Grid wird gutes UX Layout einfacher

Es war nicht immer einfach, gutes UX Design durchzusetzen. Oft wiegten die Argumente der Webentwickler schwerer, zu komplex waren die Anforderungen an das Layout. Das wird sich in Zukunft ändern: mit Flexbox und CSS Grid hat die Webentwicklung zwei flexible Werkzeuge bekommen. Mit kleinen Einschränkungen lassen sich beide auch heute schon nutzen.

Was ist Flexbox?

Das CSS Flexible Box Layout Module, kurz Flexbox, ist ein eindimensionales Layout für die flexible Anordnung von Container-Inhalten. Die CSS Anweisung “display: flex;” ermöglicht eine responsive Positionierung mit automatisch errechneten Abständen. Auf Scrimba gibt es einen außerordentlich guten Kurs zur Flexbox, der alles einfach und vollständig erklärt.

Scrimba ist ganz nebenbei gesagt ein Paradebeispiel für geniales UX Design. Videos mit Codebeispielen, in denen der Zuschauer selbst mitschreiben kann. Das düfte selbst für erfahrene UX Designer eine neue Nutzererfahrung sein.

Was ist CSS Grid?

Das CSS Grid Layout ist ein zweidimensionales Layout für Container-Inhalte. Mit dem CSS Grid können also responsive Layouts mit kreativer Freiheit gestaltet werden. Auch für das CSS Grid gibt es einen umfangreichen Kurs auf Scrimba, der Ihnen ermöglicht, auch komplexe Layouts mit der neuen Technik zu erstellen.

Wann setze ich beide ein?

Während die Flexbox die typische Problemlösung für Navigationselemente ist, wird CSS Grid für Bildergalerien oder ein Masonry Layout verwendet.

Beide Technologien werden noch nicht zu hundert Prozent von allen gängigen Browsern unterstützt. Welche Browser genau unterstützt werden und wieviel Prozent der Nutzer noch nicht mit Flexbox oder CSS Grid versorgt werden können, sieht man am besten auf Caniuse, der besten Übersicht über Webtechnologien und Browserkompatibilität. Sinnvoll ist also die Möglichkeit des Prefixings oder eines Fallbacks, sofern man ältere Browser nicht ausschließen kann. Beim CSS Grid kann man deshalb Fallback-Anweisungen direkt im Grid notieren, da sie von aktuellen Browser automatisch ignoriert werden.

Aktuelle UX Beispiele für Flexbox und CSS Grid

Während Youtube noch ganz zögerlich die Flexbox verwendet, setzt Web.de in Teilen seiner Mail-Anwendung bereits auf das CSS Grid.