Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

Rachel Andrew (Übersetzung Manuela Müller)

CSS 3 ist ein Thema, das Webdesigner und -ent­wick­ler nach wie vor begeis­tert und frus­triert. Wir sind begeis­tert von den Möglichkeiten, die CSS3 uns bie­tet und wel­che Probleme wir damit lösen kön­nen. Gleichzeitig sind wir frus­triert über die man­geln­de Unterstützung im Internet Explorer 8 – um älte­re Browser ein­mal ganz außen vor zu las­sen. Dieser Artikel demons­triert eben­falls eine Technik, die vom IE 8 nicht unter­stützt wird. Allerdings ist das auch völ­lig egal, da die vor­ge­stell­te Lösung am sinn­volls­ten dort ein­ge­setzt wird, wo es eine Menge Unterstützung gibt – näm­lich auf klei­nen mobi­len Geräten wie dem iPhone oder alles, was unter Android läuft.

Im fol­gen­den wer­de ich erklä­ren, wie Sie eine iPhone-Version Ihrer regu­lä­ren Website mit CSS 3 erstel­len kön­nen, die schon jetzt funk­tio­niert. Wir schau­en uns ein sehr ein­fa­ches Beispiel an und ich wer­de Schritt für Schritt erläu­tern, wie ich ein Stylesheet für Geräte mit klei­nem Display in mei­ne eige­ne Website ein­ge­fügt habe. An dem Beispiel kön­nen Sie nach­voll­zie­hen, wie ein­fach es ist, bestehen­de Websites um zusätz­li­che Stylesheets für mobi­le Geräte zu ergän­zen.

Media Queries

Wenn Sie jemals ein sepa­ra­tes Print Stylesheet erstellt haben, wer­den Sie mit dem Konzept ver­traut sein, wie ein bestimm­tes Stylesheet unter gege­be­nen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu blei­ben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch media types gere­gelt.

media types ermög­li­chen es Ihnen, die Ausgabe von Stylesheets einem bestimm­ten Medientyp zuzu­ord­nen.

Die Media Queries in CSS3 grei­fen die­ses Konzept auf und bau­en es wei­ter aus. Anstatt nach einem bestimm­ten Medium zu schau­en, kön­nen Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfra­gen. Sie kön­nen die­se Abfragen dazu ver­wen­den, um alles mög­li­che zu über­prü­fen, so zum Beispiel:

• Breite und Höhe (des Browser-Fensters)
• Breite und Höhe des Geräts
• Position – befin­det sich das Mobiltelefon im Querformat oder Hochformat?
• Bildschirmauflösung

Wenn der Anwender einen Browser ver­wen­det, der media queries unter­stützt, kön­nen wir den CSS-Code ganz gezielt für bestimm­te Situationen schrei­ben. So kön­nen Sie abfra­gen, ob ein Anwender ein klei­nes Gerät wie ein Smart Phone ver­wen­det und dann ein pas­sen­des Layout lie­fern. Wenn Sie ein ent­spre­chen­des Beispiel in Aktion sehen möch­ten, schau­en Sie sich ein­mal die jüngst frei geschal­te­te Website der UK Web Conference an. dConstruct setzt auf der neu­en Website für die Konferenz 2010 media queries sehr effekt­voll ein.

So sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.

dConstruct 2010 web­site auf einem iPhone

Wie Sie an den bei­den obi­gen Abbildungen sehen, wur­de die Website nicht ein­fach an die Größe des klei­ne­ren Displays ange­passt, son­dern das kom­plet­te Layout wur­de für den ein­fa­chen Zugriff mit einem klei­nen Ausgabemedien opti­miert.

Viele von Ihnen wer­den jetzt ver­mut­lich den­ken, dass dies ein iPhone-Layout ist. Ist es aber nicht. Das Layout wird exakt so auf mei­nem Android-Mobiltelefon ange­zeigt. Mit dem Einsatz von Media Queries und dem Abfragen der Geräte-Eigenschaften ver­sorgt die dConstruct-Site alle Arten von Geräten – sogar sol­che, an die die Entwickler mög­li­cher­wei­se noch gar nicht gedacht haben!

Media Queries zum Erstellen eines Stylesheet für Mobiltelefone verwenden

Wir legen los und schau­en uns zunächst ein sehr ein­fa­ches Beispiel an. Die fol­gen­de Abbildung zeigt ein schlich­tes Zweispalten-Layout.

Die Ausgangssituation

Um das Lesen auf einem Telefon zu erleich­tern, habe ich mich dazu ent­schlos­sen, das kom­plet­te Design zu ver­ein­fa­chen und die Inhalte in einer ein­zi­gen Spalte anzu­ord­nen. Weiterhin soll der Header wesent­lich klei­ner sein, damit die Anwender nicht lan­ge scrol­len müs­sen, bevor sie an die eigent­li­chen Inhalte gelan­gen.

Methode 1 – Alternative im Hauptstylesheet

Media Queries kön­nen Sie auf ver­schie­de­ne Weisen ver­wen­den. Eine Methode ist es, den alter­na­ti­ven CSS-Code direkt in das zen­tra­le Stylesheet ein­zu­bin­den. Um klei­ne Geräte anzu­spre­chen, ver­wen­den wir die fol­gen­de Syntax:

	@media only screen and (max-device-width: 480px) {

	}

Wir kön­nen die alter­na­ti­ven Werte für klei­ne Displays und Geräte mit gerin­ger Breite inner­halb der geschweif­ten Klammern ein­fü­gen. Indem wir die Kaskade ver­wen­den, kön­nen wir ganz ein­fach alle ande­ren Deklarationen über­schrei­ben, die wir vor­her in unse­rem CSS-Code für Desktop-Browser notiert haben. Solange die­ser Abschnitt an letz­ter Stelle im Stylesheet steht, wer­den alle vor­her­ge­hen­den Regelungen über­schrei­ben.

Um das Layout zu linea­ri­sie­ren und eine klei­ne­re Header-Grafik zu ver­wen­den, füge ich den fol­gen­den Code hin­zu:

	@media only screen and (max-device-width: 480px) {
		div#wrapper {
			width: 400px;
		}

		div#header {
			background-image: url(media-queries-phone.jpg);
			height: 93px;
			position: relative;
		}

		div#header h1 {
			font-size: 140%;
		}

		#content {
			float: none;
			width: 100%;
		}

		#navigation {
			float:none;
			width: auto;
		}
	}

Im vor­her­ge­hen­den Code ver­wen­de ich ein alter­na­ti­ves Hintergrundbild, redu­zie­re die Höhe des Headers, set­ze die zuvor für das zwei­spal­ti­ge Layout dekla­rier­ten Floats auf none und über­schrei­be die ursprüng­li­che Breite. Diese Vorgaben wer­den nur bei einem Gerät mit klei­nem Display ange­wen­det.

So sieht mein simp­les Beispiel auf einem iPhone aus.

Methode 2 – Link auf separates Stylesheet setzen

Den spe­zi­fi­schen Code für klei­ne Geräte inli­ne zu notie­ren, mag ganz gut sein, wenn Sie nur gerin­güfi­ge Änderungen vor­zu­neh­men haben. Wenn Sie jedoch grö­ße­re Änderungen vor­neh­men oder aus Gründen der Übersichtlichkeit die Stylesheets für Desktop-Browser und Browser klei­ner Geräte tren­nen möch­ten, emp­fiehlt sich ein Link auf ein sepa­ra­tes Stylesheet.

Um ein sepa­ra­tes Stylesheet für klei­ne Geräte nach Ihrem Hauptstylesheet ein­zu­fü­gen und das Kaskadieren zum Überschreiben der Deklarationen zu nut­zen, ver­wen­den Sie den fol­gen­den Code:

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

Media queries testen

Sofern Sie ein iPhone und/oder ein Android-Handy oder ein ande­res Gerät mit einem media-que­ries-unter­stüt­zen­den Browser besit­zen, kön­nen Sie den CSS-Code selbst tes­ten. Allerdings müs­sen Sie den Code irgend­wo hoch­la­den, um ihn anzei­gen zu kön­nen. Was tun Sie jedoch, wenn Sie die ent­spre­chen­den Geräte nicht besit­zen und lokal tes­ten möch­ten?

Online-Dienste nut­zen

Eine her­vor­ra­gen­de Website, die Sie beim Entwicklungsprozess unter­stützt ist ProtoFluid. Im Formular rechts oben kön­nen Sie Ihre URL ein­ge­ben (kann auch eine loka­le sein) und das Design anschlie­ßend in einer Vorschau anzei­gen, so wie es auf einem iPhone, iPad und einer Reihe ande­rer Geräte dar­ge­stellt wür­de. Das fol­gen­de Bildschirmfoto zeigt die bereits bekann­te dConstruct-Site in der iPhone-Vorschau von ProtoFluid.

Die dConstruct-2010-Website in ProtoFluid

Sie kön­nen auch Ihre eige­ne Fenstergröße ein­ge­ben, falls Sie die Darstellung Ihrer App oder Website für ein ganz bestimm­test Gerät tes­ten – vor­aus­ge­setzt Sie ken­nen die Abmessungen des Displays.

Unsere wei­ter oben ver­wen­de­te Media Query müs­sen Sie für das Testen mit ProtoFluid ein wenig ändern, um sowohl max-width als auch max-device-width ein­zu­bin­den. Damit kommt die Medienabfrage auch ins Spiel, wenn ein Anwender einen Desktop-Browser mit einem sehr klei­nen Fenster nutzt.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

	}

Nachdem Sie Ihren Code ent­spre­chend ange­passt und die Seite im Browser neu gela­den haben, zie­hen Sie doch ein­fach mal das Browserfenster klei­ner und schau­en Sie, was pas­siert. Die Regel Media Queries reagiert, sobald der Viewport Ihrem vor­ge­ge­be­nen Wert von 480 Pixeln ent­spricht.

Das wirk­lich Schöne an ProtoFluid ist, dass Sie beim Optimieren Ihres Designs auch Tools wie FireBug nut­zen kön­nen – etwas, wor­auf Sie ver­zich­ten müs­sen, sobald die Site oder Anwendung auf dem iPhone ist.

Natürlich soll­ten Sie Ihr Layout auf so vie­len ver­schie­de­nen Geräten wie mög­lich anzei­gen las­sen und aus­pro­bie­ren. Trotzdem macht ProtoFluid das Entwickeln und Testen wesent­lich ein­fa­cher.

Hinweis: Wenn Sie ver­mei­den möch­ten, dass das Layout Ihrer Website ver­än­dert wird, sobald ein Anwender die Größe des Browser-Fensters redu­ziert, kön­nen Sie die Vorgabe für die maxi­ma­le Breite aus Ihrer Media Query ent­fer­nen, bevor Sie die Website frei schal­ten. So stel­len Sie sicher, dass das alter­na­ti­ve Layout nur bei der Abfrage mit Browsern klei­ner Geräte gezeigt wird, nicht jedoch bei klei­nem Viewport von Desktop-Browsern.

Eine bestehende Seite umbauen

Das vor­her­ge­hen­de Beispiel ist sehr ein­fach gehal­ten, um die Technik zu demons­trie­ren. Sie kön­nen die­ses Beispiel aller­dings auch dafür ein­set­zen, um eine bestehen­de Website um eine zusätz­li­che Version für klei­ne Geräte zu ergän­zen. Eines der über­zeu­gends­ten Verkaufsargumente für CSS-Layouts war ja gera­de die Fähigkeit, alter­na­ti­ve Versionen eines Designs zu ermög­li­chen.

Es folgt ein klei­nes Experiment mit mei­ner Firmen-Website, deren Layout ich mit­hil­fe der beschrie­be­nen Technik umbau­en wer­de.

Das Desktop-Layout

Meine Firmen-Website hat zur Zeit ein mehr­spal­ti­ges Layout. Die Startseite ist etwas anders gestal­tet – ansons­ten han­delt es sich um drei Spalten mit fes­ter Breite. Das Design ist schon ein paar Jahre alt, so dass wir beim Erstellen Media Queries noch nicht berück­sich­tigt haben.

Meine Website in einem Desktop-Browser

Das neue Stylesheet einbinden

Da vie­le Änderungen erfor­der­lich sind, um das Layout zu ver­ein­fa­chen, wer­de ich ein sepa­ra­tes Stylesheet erstel­len und Media Queries dafür ver­wen­den, um das neue Stylesheet nach dem aktu­el­len Stylesheet zu laden – aber nur dann, wenn die abge­frag­te maxi­ma­le Breite weni­ger als 480 Pixel beträgt.

	<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />

Zunächst erstel­le ich eine Kopie des bestehen­den Stylesheets und spei­che­re sie unter dem Namen small-device.css. Anschließend über­schrei­be ich Schritt für Schritt bestimm­te Regeln und lösche alles, was ich nicht benö­ti­ge.

Den Header verkleinern

Meine ers­te Änderung: Das Logo soll auf einem klei­nen Display schön dar­ge­stellt wer­den. Da es als Hintergrundbild ein­ge­bun­den ist, kann ich in die­sem Stylesheet ohne Probleme eine ande­re Bildquelle für das Logo ange­ben. Zudem ver­wen­de ich ein wei­te­res Hintergrundbild mit einem kür­ze­ren obe­ren Bereich, über dem das Logo plat­ziert ist.

	body {
		background-image: url(/img/small-bg.png);
	}

	#wrapper {
		width: auto;
		margin: auto;
		text-align: left;
		background-image: url(/img/small-logo.png);
		background-position: left 5px;
		background-repeat: no-repeat;
		min-height: 400px;
	}

Das Layout linearisieren

Als nächs­te grö­ße­re Aufgabe ver­ein­fa­che ich das Layout und stel­le es ein­spal­tig dar. Das Layout für die Desktop-Version wird über floats rea­li­siert. Ich muss daher nur den Parameter der Eigenschaft float auf none set­zen und die Breite auf auto. Nun wer­den die Spalten ein­fach nach­ein­an­der statt neben­ein­an­der dar­ge­stellt.

	.article #aside {
		float: none;
		width: auto;
	}

Aufräumarbeiten

Danach kann es gleich an die Optimierung via ProtoFluid und Firebug gehen. Es sind ledig­lich klei­ne Änderungen erfor­der­lich, um Ränder und Innenabstände auf pas­sen­de Werte zu set­zen, da die ursprüng­li­chen Spalten nun unter­ein­an­der, nicht neben­ein­an­der, ange­ord­net sind.

Ich erle­di­ge das, indem ich inner­halb von ProtoFluid mit Firebug her­um­spie­le, und die Werte so lan­ge ände­re, bis ich mit dem Ergebnis zufrie­den bin. Anschließend kopie­re ich den CSS-Code in das Stylesheet.

Testen und Optimieren via ProtoFluid

Auf dem iPhone testen

Nachdem ich das sepa­ra­te Styhlesheet erstellt und auf den Server hoch­ge­la­den habe, möch­te ich es natür­lich auch auf einem real exis­tie­ren­den Zielgerät tes­ten. Ein Aufruf mit dem iPhone zeigt mir, dass die Website nach wie vor aus­ge­zoomt – über die vol­le Breite – ange­zeigt wird, anstatt auf mei­ne gute les­ba­re ein­zel­ne Spalte zu zoo­men.

Ein Blick in die Website für Safari-Entwickler gibt mir des Rätsels Lösung. Ein Meta-Tag im Header der Website, das die Breite des Viewports vor­gibt, schafft Abhilfe:

<meta name=“viewport” content=“width=device-width” />

Nach dem Einfügen des Metatags wird die Seite kor­rekt im ein­spal­ti­gen Layout auf dem iPhone ange­zeigt.

Dank Metatag sieht die Website nun auch auf dem iPhone gut aus.

An die­sem schlich­ten Umbau kön­nen Sie nach­voll­zie­hen, wie ein­fach es ist, Ihrer Website eine mobi­le Version zu spen­die­ren. Beim Erstellen einer ganz neu­en Webpräsenz mit Media Queries wür­de ich von vorn­her­ein etwas ande­res vor­ge­hen und auf die fol­gen­den Aspekte ach­ten:

• geeig­ne­te Reihenfolge der Spalten berück­sich­ti­gen,
• so oft wie mög­lich und wo sinn­voll Hintergrundbilder ver­wen­den, da sie leicht per CSS zu wech­seln sind,
• gege­be­nen­falls flu­id images ein­set­zen.

In unse­rem Desktop-Layout gibt es auf der Startseite einen Content Slider für Arbeitsproben. Auf einem Touch-Screen-Gerät ist die­ser Content Slider nicht ein­fach zu bedie­nen. Daher prüf­te ich mit­hil­fe von JavaScript, ob die Größe des Browser-Fensters sehr schmal ist und der Bildwechsler des­halb nicht gestar­tet wird. Das Script war ohne­hin schon so geschrie­ben, dass der Effekt – das Laden des Sliders zu stop­pen, immer dann aus­ge­löst wird, wenn eine Arbeitsprobe auf dem Bildschirm ange­zeigt wird. Das schien eine ganz pas­sa­ble Lösung für Anwender mit klei­nen Geräten zu sein. Mit etwas mehr Code konn­te ich eine alter­na­ti­ve Version des Image Sliders für die Anwender mobi­ler Geräte erstel­len, so dass die Art der Interaktion den Gegebenheiten eines Touch Screens bes­ser ange­passt ist.

Tutorials und Ressourcen

Obwohl die­se Technik noch rela­tiv neu ist, gibt es bereits zahl­rei­che her­vor­ra­gen­de Tutorials zum Einsatz von Media Queries. Wenn Sie wei­te­re gute Tutorials oder Referenzen ken­nen, pos­ten Sie die Links doch bit­te in den Kommentaren.

• A List Apart – Responsive Web Design
• Apple – Safari Web Content Guide
• Sitepoint CSS Reference – Media Queries
• Targeting the iPhone 4 Retine Display with CSS3 Media Queries
• Wordcamp-Session über CSS Media Queries von Michael Jendryschik

Weitere Inspirationen

Wenn es Sie inter­es­siert, was man mit Media Queries sont noch anstel­len kann, schau­en Sie sich doch ein­mal auf Hicksdesign um. John Hicks ver­schafft dank Media Queries nicht nur Anwendern mobi­ler Geräte eine bes­se­res Anwendererlebnis, son­dern auch den­je­ni­gen Zeitgenossen, die am Desktop PC mit klei­nen Browser-Fenstern arbei­ten.

Bei Simon Collison kann man wei­te­re inter­es­san­te Beispiele für den Einsatz die­ser Technik sehen.

Probieren Sie es selbst aus

Der Einsatz von Media Queries ist ein guter Ansatz, um CSS 3 in Ihrer täg­li­chen Arbeit zu ver­wen­den. Denken Sie dar­an, dass Media-Queries-fähi­ge Browser auch eine Reihe ande­rer CSS-3-Eigenschaften unter­stüt­zen. In Ihren zusätz­li­chen Stylesheets für klei­ne Geräte kön­nen Sie daher unbe­sorgt wei­te­re CSS-3-Eigenschaften ver­wen­den, um bei Ausgabe auf einem SmartPhone, iPad oder sons­ti­gem mobi­len Gerät ele­gan­te Effekte zu erzie­len.

Über Kommentare zu Ihren Erfahrungen mit Media Queries und ande­ren CSS-3-Techniken freu­en wir uns!

(mm), (tm)