Alternative: Fehlanzeige? – Media Queries in Responsive Design
Kommentare

Responsive Design wird immer beliebter, und mittlerweile ist das Konzept sogar fast zum Mainstream beim Webdesign geworden. Fast jede Responsive Website nutzt Media Queries, um sowohl das Layout, als auch andere Elemente an die Größe des Viewports anzupassen.

Für Webentwickler heißt das vor allem: ein bisschen weniger Arbeit, weil nicht für jede Mobile-Device-Größe separater Code erstellt werden muss. Kein Wunder also, dass Media Queries für viele die beste – und einzige – Lösung sind und man gar nicht nach weiteren Alternativen sucht. Doch genau damit fangen, so erklärt Richa Jain, die Probleme eigentlich erst an.

Ein Problem: Media Queries sind nicht modular

Um eins vorwegzunehmen: gegen den Einsatz von Media Queries in Responsive Designs spricht grundsätzlich nichts – immerhin tun sie ihren Dienst und ermöglichen es Webdesignern, den gleichen Content auf Devices unterschiedlicher Größe darzustellen. Gerade für die Anpassung der Breite und Höhe stehen verschiedene Media Queries zur Verfügung, mit denen sich der gewünschte Effekt erreichen lässt.

Das Problem dabei ist allerdings, dass Media Queries nicht modular sind. Will man ein Element in einem Container in unterschiedlichen Container-Größen anzeigen (etwa innerhalb einer Sidebar oder über eine ganze Seite), helfen einem Media Queries nicht weiter, weil sie nur die Größe des Viewports überprüfen – und der ist in diesem Fall bei beiden Layouts gleich. Soll die Website dann auch noch Responsive gestaltet werden, steht man als Webentwickler vor noch größeren Problemen.

Um mit solchen Layout-Fragen umzugehen, benötigt man meist viel zusätzlichen Code, weil für jedes Element ein einzelner Breakpoint pro Device-Größe maintained werden muss. An Modularität oder sauberen Code ist dabei allerdings nicht mehr zu denken.

Element Queries als Alternative zu Media Queries?

In der Theorie klingt die Lösung des Problems einfach: anstatt den Style eines Elements immer mit der Größe des Viewports zu verbinden, sollte er mit dem zugehörigen Container verbunden werden können. Praktisch gibt es zumindest keine reine CSS-Lösung, mit der sich das umsetzen lässt. Zwar gibt es verschiedene Workarounds wie Elementary, Element Queries, EQ.js oder CSS Element Queries, allerdings sorgen auch sie meist dank ihrer eigenen Einschränkungen für unnötig viel Komplexität.

Was aber macht die Gestaltung solcher Element Queries so schwierig? Eines der größten Probleme dabei ist die Circularity. Die Größe eines Elements kann je nach ihrer Abhängigkeit vom Content unterschiedlich spezifiziert werden; wie man damit umgehen soll, wenn der Content von der Größe des Elements abhängt, ist momentan noch eine andauernde Diskussion bei Webentwicklern.

Ein weiteres Problem ist auch, dass Element Queries bisher nicht genug Aufmerksamkeit generieren, um als ernsthafte Alternative zu Media Queries weiterentwickelt zu werden. Dabei, so erklärt Richa Jain, würden sich beide Queries gut ergänzen:

Media queries and element queries are complementary. They address different situations and needs.

Zudem wird die Menge an Websites in den nächsten Jahren vermutlich immer mehr zunehmen – und damit auch ihre Komplexität. Auch darum sollten sich Webentwickler nicht darauf ausruhen, was ihnen momentan an Tools zur Verfügung steht, sondern bereits weiterdenken und nach Alternativen suchen, um mit der steigenden Komplexität umgehen zu können.

Aufmacherbild: Responsive web design on mobile tablet and smart phone devices von Shutterstock / Urheberrecht: Piotr Adamowicz

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -