Wann ist das Maß voll?

Media Queries maßvoll nutzen
Kommentare

Hört man den Begriff „Responsive Webdesign“, denkt man als erstes an eine Website, die sich automatisch an die Größe des Devices anpasst, auf dem sie angezeigt wird. Natürlich entspricht das durchaus der Realität, allerdings wissen viele nicht, wie sich dieses Verhalten überhaupt erreichen lässt.

Oft genug werden Responsive Websites mithilfe von entsprechenden Frameworks erstellt, und fast alle dieser Tools nutzen Media Queries, um die Breakpoints für verschiedene Devices zu definieren. Die Frage, die man sich dabei jedoch stellen sollte, ist: Brauche ich Media Queries für jedes Device und jede Bildschirmgröße und -auflösung? Angesichts der Menge an unterschiedlichen Geräten auf dem Markt wäre man mit dem Definieren eine ganze Weile beschäftigt und liefe Gefahr, plötzlich zu viele Media Queries in seinem Code zu haben. Obwohl – kann man überhaupt zu viele Media Queries haben oder ist das Maß irgendwann voll? James George ist der Frage nachgegangen und zeigt, was man bei der Nutzung von Media Queries beachten sollte.

Verschiedene Media-Query-Typen

Die meisten Webentwickler und –designer dürften mit Media Queries vertraut sein. Im Prinzip sind sie nichts weiter, als ein CSS-Block, mit dem sich eine bestimmte Bildschirmgröße definieren lässt. Genutzt werden sie, um Geräte mit einer bestimmten Breite oder Höhe oder einer bestimmten Bildschirmauflösung anzusprechen und die Darstellung einer Website für sie zu optimieren. Genauso kann auf die Ausrichtung des Devices abgezielt werden – sprich, die Darstellung im Portrait- oder Landscape-Modus.

Dabei gibt es verschiedene Media-Query-Typen, die die Performance einer Website unterschiedlich stark beeinflussen. So können sie entweder in ein Stylesheet eingebettet werden oder als externes Media Query mit einem jeweils eigenen Stylesheet abgerufen werden. Für die meisten Websites ist es ratsam, die erste Lösung zu wählen. Zwar erhält man so eine umfangreichere CSS-Datei, dafür aber weniger HTTP-Requests und letztendlich eine bessere Seiten-Performance.

Media Queries richtig strukturieren

Für die richtige Nutzung von Media Queries kommt es auf ihre Strukturierung an. Dafür gibt es verschiedene Möglichkeiten, zum Beispiel, sie zu stapeln oder sie sich überschneiden zu lassen. Dabei ist allerdings ein wenig Fingerspitzengefühl gefragt. So sorgen Überschneidungen dafür, dass der Browser sämtliche Bilder für die sich überschneidenden Styles herunterlädt, während das Stapeln nur den Download eines Bildes auslöst – nämlich, das, was mit dem Media Query für das entsprechende Device verbunden ist.

Es ist also wenig überraschend, dass sich überschneidende Media Queries oft für allerhand Probleme sorgen, je mehr Media Queries definiert werden. Werden sich überschneidende Media Queries dann auch noch falsch gestapelt, funktioniert die Darstellung der Seite nicht mehr richtig und einzelne Media Queries werden von anderen überschrieben. Dazu kommt, dass das Editieren einer Seite mit zu vielen Media Queries enorm zeitaufwändig ist. Dann noch herauszufinden, welcher Style einen anderen überschreibt, endet oft mit der sprichwörtlichen Suche nach der Nadel im Heuhaufen.

Um zu kontrollieren, welche Bilder, die mit einem Media Query (und den sich damit überschneiden) heruntergeladen werden, gibt es verschiedene Skripte. Allerdings sollte man hier abwägen, was für die Performance der Seite besser ist. Dazu sagt James George:

You have to compare how much performance you’ll get out of controlling the assets downloaded with a script, versus the load time of the script itself.

Es gibt kein Richtig oder Falsch

Bei der Nutzung von Media Queries gibt es kein Richtig oder Falsch. Wie viele Media Queries nötig sind, hängt individuell von dem jeweiligen Projekt ab – genauso wie die Frage, mit welcher Methode man sie strukturiert. Grundsätzlich gilt jedoch, dass man so wenige Media Queries wie möglich nutzen sollte. Einerseits, weil Webdesigner so leicht einzelne Queries anpassen können, andererseits weil sonst die Performance der Seite schnell negativ beeinflusst wird.

Media Queries bieten so eine nützliche Ergänzung für die Gestaltung eines Responsive Webdesigns, können aber die Definition eines Default-Styles allerdings nicht ersetzen. Darum sollten Webdesigner die Methode wählen, die am besten zum eigenen Projekt passt, um die bestmögliche User Experience für die Websitebesucher zu bieten.
Aufmacherbild: two measuring scoops of whey protein powder – isolate (white) and concentrate (creamy) von Shutterstock / Urheberrecht: marekuliasz

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -