kulturbanause Blog

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

Intrinsic Web Design


Video: Responsive Webdesign ohne Media Queries

Responsive Design und Media Queries sind per Definition eng miteinander verbunden. Die Media Query definiert einen Breakpoint, der wiederum dafür sorgt, dass das Layout an den gewünschten Stellen umbricht und somit den Wechsel von Smartphone zu Desktop meistert. Doch seit Ethan Marcotte 2010 seinen populären Artikel zum Thema RWD veröffentlichte, hat sich viel verändert. Heute stehen neue Technologien zur Verfügung und auch die modulare Denkweise im Designprozess hat viel verändert. Grund genug, sich anzuschauen, wie es besser gehen könnte.

Beitrag zu Ende lesen

Flexbox – Responsive Layouts ohne Media Queries

Innerhalb von Flexbox kann mit den Eigenschaften flex-grow, -shrink & -basis festgelegt werden, ob Elemente größer werden dürfen, ob sie kleiner werden dürfen und welche Ausgangsgröße zugrunde liegt. Mit Flexbox lassen sich somit responsive Layouts herstellen, die keine Media Queries benötigen. Das wiederum gilt aktuell in einigen Anwendungsfällen als »Best Practise«, da in sich abgeschlossene Komponenten entwickelt werden können, die nicht auf die Größe des Viewports sondern auf den verfügbaren Platz im Elternelement reagieren.

Beitrag zu Ende lesen

CSS Multi Columns – Responsive Layouts ohne Media Queries

Mit dem »Multi Column Layout« von CSS lassen sich Inhalte in mehreren Spalten anzeigen. Das CSS-Feature bietet sich besonders gut für Fließtexte an, kann aber auch für andere Darstellungen sinnvoll eingesetzt werden. Besonders interessant ist, dass mit Multi Columns responsive Layouts ohne Media Queries möglich sind. Die Gestaltung von in sich abgeschlossenen Komponenten wird somit möglicherweise einfacher.

Beitrag zu Ende lesen