Media Queries — Website für das Handy aufbereiten

Lange habe ich mir die Entwicklung und den Einsatz von soge­nann­ten (CSS3) Media Queries im Wörld Weid Wäb ange­schaut, denn ich war die­ser Technik gegen­über sehr skep­tisch. Doch in den letz­ten Monaten schei­nen diese Media Queries doch immer popu­lä­rer zu wer­den. Ein Grund mehr für mich, hier eine kleine Einführung zu schreiben.

Die Nachteile vorweg

Wie oben schon neben­bei erwähnt, sind Media Queries Bestandteil des CSS3. Aber halt … was sind Media Queries??

Media Queries — was ist das? Wozu die­nen sie? Wann macht der Einsatz Sinn?

Media Queries sind logi­sche Ausdrücke, die einem Webdesigner die Möglichkeit bie­ten, mehr Kontrolle über das Rendering-Verhalten eines bestimm­ten (mobi­len) Gerätes zu “erlan­gen” (ähnlich den Conditional Comments / Browserweichen für bestimmte IE-Versionen). Logischer Ausdruck bedeu­tet, dass es nur wahr oder falsch als Ergebnis haben kann: trifft zu, oder nicht.

Damit ist mög­lich abzu­fra­gen, wel­che Eigenschaften bzw. Fähigkeiten ein (mobi­les) Gerät besitzt. Beispielsweise ist hier die Bildschirmauflösung oder die Ausrichtung (Hoch– bzw. Querformat) gemeint.

Also haben wir hier die Möglichkeit kon­ven­tio­nelle Internetseiten auf mobile Geräte wie Handy, Smartphone oder Tablet-Computer anzu­pas­sen. Auch hier­bei ist wohl zu über­le­gen, ob sich die­ser Aufwand gene­rell lohnt. Die Zielgruppe ist entscheidend.

Wie geht’s denn über­haupt los?

Jeder der schon mal mit CSS gear­bei­tet hat, weiß wie man eine sol­che nor­male CSS-Datei ein­bin­den kann:

<link rel="stylesheet" media="all" href="style.css" />

Somit wäre eine CSS-Datei namens style.css ein­ge­bun­den, wel­che auf sämt­li­che Ausgabegeräte ange­wandt wird — media=“all”. Nun wol­len wir zum Beispiel ein Stylesheet defi­nie­ren, wel­ches unsere Website für Smartphones auf­be­rei­tet bzw. abän­dert. Dazu defi­nie­ren im:

<link rel="stylesheet" media="only screen and (min-device-width: 320px)
   and (max-device-width: 480px )" href="smartphone.css" />

Damit hät­ten wir ein Konstrukt, wel­ches nur für Bildschirmanzeigen (screen) UND eine (Gerät-)Mindestbreite von 320 px UND eine (Gerät-)Maximalbreite von 480 px bestimmt ist. Wir rufen uns hier in Erinnerung: jeder die­ser Ausdrücke muss wahr sein, dass diese CSS-Datei auch wirk­lich ein­ge­bun­den wird. Sonst wird sie überg­an­gen. Damit hät­ten wir unsere Grundlage für Smartphones.

Hier sei noch ange­merkt, dass bei­des Ausrichtungen des Displays auf dem Smartphone dabei inbe­grif­fen sind (hori­zon­tal / ver­ti­kal bzw. Landscape / Portrait).

Und dann? What’s next?

Jetzt kann die Schinderei begin­nen. Wir haben unsere Grundlage, die CSS-Datei für die Smartphones gelegt.

Meiner Meinung nach sollte als ers­tes über­dacht wer­den, wie man die Seite jetzt grund­sätz­lich struk­tu­riert. Ist bis­her ein drei-Spalten-Layout ein­ge­setzt, sollte man sich über­le­gen, ob man das nicht abän­dert. Immer im Hinterkopf: wir prü­fen auf eine Auflösung zwi­schen 320 px und 480 px. Ein rela­tiv wich­ti­ger Punkt sind hier auch Menüs. Hier auf Guardian Online befin­det sich fol­gen­des hori­zon­ta­les Menü:

Da könnte man bei­spiels­weise ein schö­nes ver­ti­kal gerich­te­tes Menü draus bas­teln, und die ein­zel­nen Menüpunkt unter­ein­an­der setzen.

Der nächste Step soll­ten Bilder sein. Ist im Header ein schö­nes gro­ßes Bild von 980 px x 200 px (wie bei mir), dann geht es darum, die­ses Bild zu ver­klei­ner. Auch das Hintergrundbild muss even­tu­ell ange­passt wer­den. Das hängt aber von der jewei­li­gen Seite ab.

Das lei­dige Testen

… bleibt natür­lich auch hier nicht erspart. Den größ­ten Vorteil hat hier wohl der Multimedia-Junky, bzw. der, der sich glück­lich schät­zen darf und ein oder zwei Smartphones und ein iPad besitzt. Aber gibt auch Alternativen: online Tools, wel­che ver­su­chen sol­chen mobi­len Endgeräte zu simu­lie­ren. Leider kann man sich auf diese Ausgaben nicht 100% verlassen.

Hier eine kleine Auswahl an Seiten, die einem das Leben erleich­tern können:

• Der W3C Eintrag zu Media Queries
• der iPhone Safari Browser — Entwicklerecke mit Hinweisen zur Optimierung
• ProtoFluid — online Tool zum Testen der Media Queries für ver­schie­dene Geräte
• Hardboiled CSS3 — Media Queries für die gän­gis­ten mobi­len Geräte

Damit sollte die Grundlage für die Erstellung einer opti­mier­ten Internetseite für mobile Endgeräte gelegt sein. Auf Guardian Online befin­det sich bis­her noch keine mobile Version — aus Zeitgründen. Ich bitte das zu ent­schul­di­gen

In die­sem Sinne … happy coding