HTML5 Experiment: CSS3 Media Queries
Kategorie Web | 5 Kommentare »
Sinn von Media Queries
Jetzt wird es spannend! Abgesehen von ein paar neuen HTML Elementen wie <section> und <header> war bis jetzt noch nicht viel HTML5/CSS3 in diesem HTML5/CSS3 Experiment :-) Deshalb werfe ich heute einen Blick auf CSS3 Media Queries. Ich will diese nutzen, um die Berlin Silhouette im Seitenkopf nur dann anzuzeigen, wenn der Browser eine bestimmte Mindestgröße hat. Doch warum sollte ich das überhaupt wollen?
Dazu muss ich leider etwas ausholen und den Begriff „mobile first“ erläutern. Bei der Entwicklung einer Webseite geht man von einem Standardgerät aus, für die die Seite entwickelt wird. Häufig ist das der eigene Rechner. Durch das Aufkommen mobiler Endgeräte wie Smartphones und Tablets muss dies aber in Frage gestellt werden. Viele Nutzer surfen heute mit solch einem Gerät durchs Netz und man muss davon ausgehen, dass immer mehr Nutzer mit solch einem Gerät die eigene Seite aufrufen werden. Die Geräte unterscheiden sich dabei durch mindestens folgende 3 Punkte von einem normalen Desktoprechner:
- kleineres Display bzw. geringere Bildschirmauflösung
- langsame Internetanbindung
- Touch Bedienung anstatt von Maus und Tastatur
Mein angenommenes Standardgerät ist damit nicht mehr ein Desktoprechner, sondern ein Smartphone – mobile first.
Nun wäre es ziemlicher Käse, den Nutzer eines Desktoprechners mit einer reduzierten Darstellung zu belästigen, nur damit es auch für die sporadisch vorbeischauenden Mobilhelden gut aussieht. Idealerweise merkt ein Nutzer mit Desktoprechner nicht, dass die Seite mit mobile first im Hinterkopf entworfen wurde. Während ich mich auf einem Smartphone über gesparte Bandbreite und Platz durch das Weglassen der Berlin Silhouette freue, möchte ich diese auf einem großen Bildschirm sehen.
Ziel ist es also, die auf das Nötigste reduzierte Seite schrittweise entsprechend der Möglichkeiten des Endgeräts zu verbessern oder kurz: „progressive enhancement„. Mit CSS3 Media Queries kann man genau dies bewerkstelligen, wie ich am folgenden Beispiel zeige.
Beispiel CSS3 Media Query
Zunächst möge der geneigte Leser das Beispiel öffnen und folgendes Experiment durchführen:
- ist das Browserfenster maximiert, wird die Berlin Silhouette im Seitenkopf angezeigt
- verkleinert man die Seitenbreite, verschwindet die Berlin Silhouette und wird nicht mehr angezeigt
- macht man das Browserfenster ganz schmal, verschwindet auch der bunte Strich unter dem Textzug „Sent from Hauptstadt!“
- egal wie breit das Browserfenster ist, zu keinem Zeitpunkt wird eine horizontale Scrollleiste angezeigt
Hat das geklappt?
Bleibt noch die Frage, ob die Grafiken lediglich nicht angezeigt werden oder ob sie tatsächlich nicht geladen werden? Dazu ein weiteres kleines Experiment:
- ich verkleinere das Browserfenster soweit, dass die Berlin Silhouette nicht angezeigt wird
- ich lade die Seite neu und schaue mir den Netzwerkverkehr mittels Firebug an und sehe:
- jetzt vergrößere ich die Seitenbreite, die Silhouette erscheint und in Firebug sehe ich:
Wie man an den beiden Bildschirmfotos hoffentlich nachvollziehen kann, wird das Bild skyline.jpg für die Berlin Silhouette erst geladen, wenn es auch angezeigt werden soll. Ein mobiles Endgerät muss dieses Bild demnach nie runterladen und hat entsprechend Bandbreite gespart. Auch wird auf dem Display kein Platz mit einer Grafik verschwendet, die für den Seiteninhalt nicht essentiell ist.
Hat man das Prinzip von Media Queries erst einmal verstanden, ist die Umsetzung denkbar einfach. Die Grundversion der Seite enthält das Bild nicht. Erst wenn die Bildschirmbreite größer 768 Pixel ist, wird das Bild als Hintergrund dem Seitenkopf zugewiesen.
[gist id=4551639]
Über den gleichen Mechanismus lasse ich auch den farblichen Strich unter dem Seitentitel bei zu geringer Auflösung verschwinden. Wie der CSS3 Media Query Standard zeigt, kann man noch einige andere Werte neben der Seitenbreite abfragen. Bevor es diesen Standard gab, hätte man stattdessen JavaScript verwenden müssen, um einen ähnlichen Effekt zu erreichen.
Auch das verwendete Grid System responsive.gs nutzt Media Queries, um ab einer zu geringen Bildschirmbreite alle Bereiche unabhängig von den ursprünglich belegten Grid Spalten untereinander zu positionieren. So verschwindet nicht nur die Berlin Silhouette, sondern die beiden Seitenspalten rutschen in diesem Moment auch unter die Artikelliste.
Zusammenfassung
Lässt man sich auf den Ansatz „mobile first“ ein, muss man beim Konzeptionieren und späteren Einfärben der Seite prinzipiell folgenden Punkten folgen:
- Entwurf einer minimalen Seite, abgestimmt auf das schwächste zu unterstützende Endgerät.
- Entwurf der maximalen Seite mit allen Designelementen.
- Festlegung von Meilensteinen wie Bildschirmauflösung, ab denen bestimmte Designelemente auf der Seite erscheinen oder geändert werden sollen.
- Umsetzung der Meilensteine mittels Media Queries, die dafür sorgen, dass zum richtigen Zeitpunkt zusätzliches CSS angewendet wird, um den gewünschten verbesserten Zustand zu erreichen.
PS: Ich glaube, ich kann jetzt Silhouette ohne Nachzuschlagen fehlerfrei schreiben :-)
Mobile first ist gut, aus verschiedenen bekannten Gründen.
Nun hat mein Tablet aber 2560px Breite. Die Seiten sehen so aus wie für 1280px entworfen. Es gibt einen Zoom auf das zweifache. Damit wirft das Pixel wie schon der Punkt aus der Druckerei zu einem Punkt mit definierter Größe und ohne realen Bezug.
Ich finde es merkwürdig und schade dass die CSS-Entwickler verpasst haben dort nach cm Bildschirmbreite entscheiden zu können.
Ich kann ja im CSS cm verwenden. Leider ist Windows doof und weiß nicht, wieviel dpi der Bildschirm tatsächlich darstellt. Es geht immer von einem Standardmaß aus.
Es war doch aber abzusehen, dass Bildschirme besser werden. Wieso hat das bei Microsoft und dem W3C niemand gemerkt?
Also die Sache mit den cm verstehe ich nicht. Aber ansonsten hat das W3C ja wenig damit zu tun, wie ich meine Seite entwerfe. Mittel wie Media Queries geben mir ja gerade die Möglichkeit, dass ich auch für extrem hohe Auflösungen noch wesentlich verfeinerte Seiten bieten kann. Momentan ist meine Testseite einfach auf 980 Pixel beschränkt, da ich zunächst das heutige Design einfach nur nachbilden will.
Die technischen Mittel sind da, man muss sie nur nutzen :-)
Du hast die Seite auf 980px beschränkt, weil es eben immer so gemacht wird. Ich kann aber nicht ohne weiteres herausfinden, ob diese 980px auf 6cm eines neuen Smartphones oder auf 80cm bei einem Fernseher angezeigt werden.
Ok, du würdest also lieber eine Angabe z.B. in DPI oder so wollen, richtig?
Allerdings hast du dafür auch die Prozentangaben…
DPI wären wunderbar.
Dann könnte ich, in Verbindung mit den Pixeln, in den Mediaquerys die vorgenannten Produktgruppen unterscheiden.
Eigentlich sind mir bei der Auswahl der Kategorie Handy/Tablet/PC die genaue Pixelanzahl nicht so wichtig. Das können die Browser durch ihren Standardzoom ausgleichen. Es wäre eben schön zu wissen, ob das Display 30cm bin, die ich auch unbedingt nutzen sollte.
Ich muss dazu keine Rechnung aufstellen, oder Pixel zählen, die dann aber unterschiedlich gross sind. Es wäre ja schön gewesen, wenn einfach cm nutzbar wären.
Da die Entwicklung ist wie sie ist, nämlich dass Pixel per def. mit ~100dpi angenommen werden, nutze ich sie eben.
Der Versuch mit den em eine pixelunabhängige Skala zu nutzen, hat sich ja nicht durchgesetzt. Dafür war es zu dem Zeitpunkt zu sichtbar, wenn zwei Elemente nur 1px gegeneinander versetzt waren.
Jetzt werden eben die Pixel eine pixelunabhängige Einheit. Auch gut.