Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

Media Queries sind ein Thema, das Webdesigner und -entwickler auch nach über einem Jahrzehnt ihrer Verbreitung in allen Browser begeistert und frustriert. Wir sind begeistert von den Möglichkeiten, die CSS3 uns bietet und welche Probleme wir damit lösen können. Die vorgestellte Lösung wird dort eingesetzt, wo es eine Menge Unterstützung gibt – nämlich auf kleinen mobilen Geräten wie dem iPhone oder alles, was unter Android läuft.

Im folgenden werde ich erklären, wie Sie eine iPhone-Version Ihrer regulären Website mit CSS erstellen können, die schon jetzt funktioniert. Wir schauen uns ein sehr einfaches Beispiel an und ich werde Schritt für Schritt erläutern, wie ich ein Stylesheet für Geräte mit kleinem Display in meine eigene Website eingefügt habe. An dem Beispiel können Sie nachvollziehen, wie einfach es ist, bestehende Websites um zusätzliche Stylesheets für mobile Geräte zu ergänzen.

Media Queries

Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird im CSS durch media types geregelt.

media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp zuzuordnen.

Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

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

Wenn der Anwender einen Browser verwendet, der media queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern. Wenn Sie ein entsprechendes Beispiel in Aktion sehen möchten, schauen Sie sich einmal die jüngst frei geschaltete Website der UK Web Conference an. dConstruct setzt auf der neuen Website für die Konferenz 2010 media queries sehr effektvoll ein.

Wie Sie an den beiden obigen Abbildungen sehen, wurde die Website nicht einfach an die Größe des kleineren Displays angepasst, sondern das komplette Layout wurde für den einfachen Zugriff mit einem kleinen Ausgabemedien optimiert.

Viele von Ihnen werden jetzt vermutlich denken, dass dies ein iPhone-Layout ist. Ist es aber nicht. Das Layout wird exakt so auf meinem Android-Mobiltelefon angezeigt. Mit dem Einsatz von Media Queries und dem Abfragen der Geräte-Eigenschaften versorgt die dConstruct-Site alle Arten von Geräten – sogar solche, an die die Entwickler möglicherweise noch gar nicht gedacht haben!

Media Queries zum Erstellen eines Stylesheet für Mobiltelefone verwenden

Wir legen los und schauen uns zunächst ein sehr einfaches Beispiel an. Die folgende Abbildung zeigt ein schlichtes Zweispalten-Layout.

Um das Lesen auf einem Telefon zu erleichtern, habe ich mich dazu entschlossen, das komplette Design zu vereinfachen und die Inhalte in einer einzigen Spalte anzuordnen. Weiterhin soll der Header wesentlich kleiner sein, damit die Anwender nicht lange scrollen müssen, bevor sie an die eigentlichen Inhalte gelangen.

Methode 1 – Alternative im Hauptstylesheet

Media Queries können Sie auf verschiedene Weisen verwenden. Eine Methode ist es, den alternativen CSS-Code direkt in das zentrale Stylesheet einzubinden. Um kleine Geräte anzusprechen, verwenden wir die folgende Syntax:

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

Wir können die alternativen Werte für kleine Displays und Geräte mit geringer Breite innerhalb der geschweiften Klammern einfügen. Indem wir die Kaskade verwenden, können wir ganz einfach alle anderen Deklarationen überschreiben, die wir vorher in unserem CSS-Code für Desktop-Browser notiert haben. Solange dieser Abschnitt an letzter Stelle im Stylesheet steht, werden alle vorhergehenden Regelungen überschreiben.

Um das Layout zu linearisieren und eine kleinere Header-Grafik zu verwenden, füge ich den folgenden Code hinzu:

@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 vorhergehenden Code verwende ich ein alternatives Hintergrundbild, reduziere die Höhe des Headers, setze die zuvor für das zweispaltige Layout deklarierten Floats auf none und überschreibe die ursprüngliche Breite. Diese Vorgaben werden nur bei einem Gerät mit kleinem Display angewendet.

Methode 2 – Link auf separates Stylesheet setzen

Den spezifischen Code für kleine Geräte inline zu notieren, mag ganz gut sein, wenn Sie nur geringüfige Änderungen vorzunehmen haben. Wenn Sie jedoch größere Änderungen vornehmen oder aus Gründen der Übersichtlichkeit die Stylesheets für Desktop-Browser und Browser kleiner Geräte trennen möchten, empfiehlt sich ein Link auf ein separates Stylesheet.

Um ein separates Stylesheet für kleine Geräte nach Ihrem Hauptstylesheet einzufügen und das Kaskadieren zum Überschreiben der Deklarationen zu nutzen, verwenden Sie den folgenden 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 anderes Gerät mit einem media-queries-unterstützenden Browser besitzen, können Sie den CSS-Code selbst testen. Allerdings müssen Sie den Code irgendwo hochladen, um ihn anzeigen zu können. Was tun Sie jedoch, wenn Sie die entsprechenden Geräte nicht besitzen und lokal testen möchten?

Online-Dienste nutzen
Eine hervorragende Website, die Sie beim Entwicklungsprozess unterstützt ist ProtoFluid. Im Formular rechts oben können Sie Ihre URL eingeben (kann auch eine lokale sein) und das Design anschließend in einer Vorschau anzeigen, so wie es auf einem iPhone, iPad und einer Reihe anderer Geräte dargestellt würde. Das folgende Bildschirmfoto zeigt die bereits bekannte dConstruct-Site in der iPhone-Vorschau von ProtoFluid.

Sie können auch Ihre eigene Fenstergröße eingeben, falls Sie die Darstellung Ihrer App oder Website für ein ganz bestimmtest Gerät testen – vorausgesetzt Sie kennen die Abmessungen des Displays.

Unsere weiter oben verwendete Media Query müssen Sie für das Testen mit ProtoFluid ein wenig ändern, um sowohl max-width als auch max-device-width einzubinden. Damit kommt die Medienabfrage auch ins Spiel, wenn ein Anwender einen Desktop-Browser mit einem sehr kleinen Fenster nutzt.

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

Nachdem Sie Ihren Code entsprechend angepasst und die Seite im Browser neu geladen haben, ziehen Sie doch einfach mal das Browserfenster kleiner und schauen Sie, was passiert. Die Regel Media Queries reagiert, sobald der Viewport Ihrem vorgegebenen Wert von 480 Pixeln entspricht.

Das wirklich Schöne an ProtoFluid ist, dass Sie beim Optimieren Ihres Designs auch Tools wie FireBug nutzen können – etwas, worauf Sie verzichten müssen, sobald die Site oder Anwendung auf dem iPhone ist.

Natürlich sollten Sie Ihr Layout auf so vielen verschiedenen Geräten wie möglich anzeigen lassen und ausprobieren. Trotzdem macht ProtoFluid das Entwickeln und Testen wesentlich einfacher.

Hinweis: Wenn Sie vermeiden möchten, dass das Layout Ihrer Website verändert wird, sobald ein Anwender die Größe des Browser-Fensters reduziert, können Sie die Vorgabe für die maximale Breite aus Ihrer Media Query entfernen, bevor Sie die Website frei schalten. So stellen Sie sicher, dass das alternative Layout nur bei der Abfrage mit Browsern kleiner Geräte gezeigt wird, nicht jedoch bei kleinem Viewport von Desktop-Browsern.

Eine bestehende Seite umbauen

Das vorhergehende Beispiel ist sehr einfach gehalten, um die Technik zu demonstrieren. Sie können dieses Beispiel allerdings auch dafür einsetzen, um eine bestehende Website um eine zusätzliche Version für kleine Geräte zu ergänzen. Eines der überzeugendsten Verkaufsargumente für CSS-Layouts war ja gerade die Fähigkeit, alternative Versionen eines Designs zu ermöglichen.

Es folgt ein kleines Experiment mit meiner Firmen-Website, deren Layout ich mithilfe der beschriebenen Technik umbauen werde.

Das Desktop-Layout

Meine Firmen-Website hat zur Zeit ein mehrspaltiges Layout. Die Startseite ist etwas anders gestaltet – ansonsten handelt es sich um drei Spalten mit fester Breite. Das Design ist schon ein paar Jahre alt, so dass wir beim Erstellen Media Queries noch nicht berücksichtigt haben.

Das neue Stylesheet einbinden

Da viele Änderungen erforderlich sind, um das Layout zu vereinfachen, werde ich ein separates Stylesheet erstellen und Media Queries dafür verwenden, um das neue Stylesheet nach dem aktuellen Stylesheet zu laden – aber nur dann, wenn die abgefragte maximale Breite weniger 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 erstelle ich eine Kopie des bestehenden Stylesheets und speichere sie unter dem Namen small-device.css. Anschließend überschreibe ich Schritt für Schritt bestimmte Regeln und lösche alles, was ich nicht benötige.

Den Header verkleinern

Meine erste Änderung: Das Logo soll auf einem kleinen Display schön dargestellt werden. Da es als Hintergrundbild eingebunden ist, kann ich in diesem Stylesheet ohne Probleme eine andere Bildquelle für das Logo angeben. Zudem verwende ich ein weiteres Hintergrundbild mit einem kürzeren oberen Bereich, über dem das Logo platziert 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ächste größere Aufgabe vereinfache ich das Layout und stelle es einspaltig dar. Das Layout für die Desktop-Version wird über floats realisiert. Ich muss daher nur den Parameter der Eigenschaft float auf none setzen und die Breite auf auto. Nun werden die Spalten einfach nacheinander statt nebeneinander dargestellt.

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

Aufräumarbeiten

Danach kann es gleich an die Optimierung via ProtoFluid und Firebug gehen. Es sind lediglich kleine Änderungen erforderlich, um Ränder und Innenabstände auf passende Werte zu setzen, da die ursprünglichen Spalten nun untereinander, nicht nebeneinander, angeordnet sind.

Ich erledige das, indem ich innerhalb von ProtoFluid mit Firebug herumspiele, und die Werte so lange ändere, bis ich mit dem Ergebnis zufrieden bin. Anschließend kopiere ich den CSS-Code in das Stylesheet.

Auf dem iPhone testen

Nachdem ich das separate Styhlesheet erstellt und auf den Server hochgeladen habe, möchte ich es natürlich auch auf einem real existierenden Zielgerät testen. Ein Aufruf mit dem iPhone zeigt mir, dass die Website nach wie vor ausgezoomt – über die volle Breite – angezeigt wird, anstatt auf meine gute lesbare einzelne Spalte zu zoomen.

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 vorgibt, schafft Abhilfe:

<meta name="viewport" content="width=device-width" />

Nach dem Einfügen des Metatags wird die Seite korrekt im einspaltigen Layout auf dem iPhone angezeigt.

An diesem schlichten Umbau können Sie nachvollziehen, wie einfach es ist, Ihrer Website eine mobile Version zu spendieren. Beim Erstellen einer ganz neuen Webpräsenz mit Media Queries würde ich von vornherein etwas anderes vorgehen und auf die folgenden Aspekte achten:

• geeignete Reihenfolge der Spalten berücksichtigen,
• so oft wie möglich und wo sinnvoll Hintergrundbilder verwenden, da sie leicht per CSS zu wechseln sind,
• gegebenenfalls fluid images einsetzen.

In unserem Desktop-Layout gibt es auf der Startseite einen Content Slider für Arbeitsproben. Auf einem Touch-Screen-Gerät ist dieser Content Slider nicht einfach zu bedienen. Daher prüfte ich mithilfe von JavaScript, ob die Größe des Browser-Fensters sehr schmal ist und der Bildwechsler deshalb nicht gestartet wird. Das Script war ohnehin schon so geschrieben, dass der Effekt – das Laden des Sliders zu stoppen, immer dann ausgelöst wird, wenn eine Arbeitsprobe auf dem Bildschirm angezeigt wird. Das schien eine ganz passable Lösung für Anwender mit kleinen Geräten zu sein. Mit etwas mehr Code konnte ich eine alternative Version des Image Sliders für die Anwender mobiler Geräte erstellen, so dass die Art der Interaktion den Gegebenheiten eines Touch Screens besser angepasst ist.

Tutorials und Ressourcen

Obwohl diese Technik noch relativ neu ist, gibt es bereits zahlreiche hervorragende Tutorials zum Einsatz von Media Queries. Wenn Sie weitere gute Tutorials oder Referenzen kennen, posten Sie die Links doch bitte in den Kommentaren.

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

Probieren Sie es selbst aus

Der Einsatz von Media Queries ist ein guter Ansatz, um CSS in Ihrer täglichen Arbeit zu verwenden. Denken Sie daran, dass Media-Queries-fähige Browser auch eine Reihe anderer CSS-Eigenschaften unterstützen. In Ihren zusätzlichen Stylesheets für kleine Geräte können Sie daher unbesorgt weitere CSS-Eigenschaften verwenden, um bei Ausgabe auf einem SmartPhone, iPad oder sonstigem mobilen Gerät elegante Effekte zu erzielen.