CSS Media Queries sind allgegenwärtig und nicht mehr wegzudenken heute. Ermöglichen sie es uns doch, dass wir eine Website gezielt steuern können. Wir reden hier meistens von Breakpoints, die man einfach braucht, um gewissen Problemen in der Darstellung entgegenzuwirken. Das soll kein Einblick in Media Queries werden, denn dazu kann man sich woanders besser Informieren: W3C — Media Queries. Es geht mir mehr um den Umgang damit bzw. den falschen Umgang.

Desktop first, jeden Falls im Moment…

Ich arbeite aktuell immer von oben nach unten was die Gerätegrößen angeht. Nicht nur in der Entwicklung sondern auch beim Design. Es gibt ja auch den Mobile First Ansatz aber damit konnte ich mich bisher nicht anfreunden. Aber aus meiner Sicht ist es eh falsch zu sagen, dass Ansatz A oder B richtig ist. Vielmehr sollte es so sein, dass man den zum Projekt richtigen Ansatz definiert und dann auch konsequent nutzt. Mobile First ist aber nichts für die Entwicklung oder das Design, sondern ein ganzheitlicher Ansatz, den man von Projektbeginn an leben muss. Aber darum soll es hier gar nicht gehen.

In den Beispielen hier wird zu 95% immer (max-width: xxxpx) auftauchen. Aber auch das ist nicht sonderlich wichtig an dieser Stelle. Wollte das nur schon mal vorweg nehmen falls die Frage aufkommt.

Frameworks? Nein danke!

Ich mag sie nicht diese Frameworks (Bsp.: Bootstrap / Foundation). Sie geben mir das Gefühl, dass ich mir eine 999 Teile Werkzeugkiste gekauft habe aber eigentlich nur einen Satz Inbusschlüssel benötigte. In der Anleitung (Dokumentation) steht dann ganz sicher auch noch, wie ich etwas zu benutzen habe und warum das alles so super durchdacht ist. Nein, ich möchte den Frameworks auf keinen Fall ihre Bedeutung absprechen. Aber für mich sind sie eher eine Qual als die erste Wahl. CSS Code rocken, dass möchte ich und das kann ich, ein wenig zumindest! :)

Media Queries für bestimmte Geräte? Nein!

Ansage! Um gleich etwas den Wind aus den Segeln zu nehmen. Natürlich kann es hier und da Sinn machen, dass man gezielt ein Gerät ansprechen möchte. Oder auch eine Geräteklasse (High Resolution Devices (Retina)). Das ist auch OK und sollte man dann auch machen. Aber in erster Linie sind die Media Queries dazu da Probleme in der Darstellung zu lösen oder Inhalte anders darzustellen bzw. anders zu formatieren. Das macht man aber sicher nicht vom Gerät abhängig sondern vom Inhalt, also dem was man zeigen möchte. Auf jedes Gerät einzugehen kann man heute gar nicht mehr gewährleisten, da es einfach zu viele sind. Solche Beispiele hier: “CSS Media Queries for iPads & iPhones” führen aus meiner Sicht zu nichts. Außer man möchte wie gesagt wirklich gezielt etwas machen.

Ein Gutes Beispiel hierfür wäre die Website von Heiko, der einfach möchte, dass man sein Smartphone ins Querformat dreht (Oder einfach den Browser breiter zieht) und weiter gehts.

Im Grunde sagt er dem User: Diese Website ist für Geräte gemacht, die mindesten 480px in der Breite darstellen können bzw. dessen Browser mindestens diese Breite darstellen kann. Das macht er einfach so:

CSS Media Queries: Das Problem mit fixen Breakpoints