Flexibles Webdesign mit CSS3 Media Queries

Es gibt viele Möglichkeiten sein Angebot ins mobile Web zu bringen: native Apps, HTML5 Web Apps oder eine mobile Version der eigenen Website. Alle drei Möglichkeiten verursachen einen enormen zusätzlichen Aufwand.

Hinter den Bezeichnungen Responsive Design, Adaptive Layout oder Responsive Layout verbirgt sich ein anderer Ansatz: Die Website wird gleich von vornherein mit einem fließenden Layout versehen, das sich der Bildschirmgröße des Betrachters dynamisch anpasst.

Das ist zwar prinzipiell nichts Neues, jedoch haben sich mit CSS3 ganz neue Möglichkeiten aufgetan. So können Elemente je nach Anzeigegerät komplett anders positioniert und dargestellt werden. Das hört sich im ersten Augenblick wie die Lösung aller Probleme an, allerdings darf auch hier der Aufwand nicht unterschätzt werden.

Schließlich muss man mehrere Seitenlayouts für die unterschiedlichen Geräte wie Smartphones oder Tablets erstellen - Größen- und Formatänderungen wirken sich immer auf die Optik aus. Speziell Hoch- und Querformat sind für den Nutzer ein großer Unterschied. Außerdem gibt es einige Tücken bei der Darstellung von multimedialen Inhalten.

Formatierung mit CSS3 Media Queries

Mit Hilfe von CSS3 Media Queries kann man auf einfache Art und Weise - ganz ohne Javascript - die Größe des Displays des Betrachters abfragen und zugleich entsprechende Formatierungsregeln bereitstellen. Somit bekommt beispielsweise der Besucher mit einem iPhone ein anderes Layout zu Gesicht als mit einem Desktop PC.

Die Schwierigkeit dabei ist, dass man größtenteils nicht mit festen Pixelwerten arbeiten kann, sondern mit relativen Werten in Prozent des Elternelements rechnen muss. Hier ein einfaches Beispiel: Die Seite besteht aus zwei nebeneinander floatenden div-Containern, einem für das Menü, dem anderen für den Inhalt.

Dazu erstellen wir das passende Stylesheet. Zuerst entsteht zentral die Schriftformatierung. Das Element #page enthält den Container mit einer maximalen Breite und zentriert in der Seite. Die maximale Breite zählt auch später noch, wenn die Informationen zum responsive Design integriert sind. Sie beschränkt die Seite bei größeren Auflösungen.

Das Layout ist dementsprechend an einem Computermonitor nicht komplett flexibel. Das macht es einfacher, wenn man speziell kleinere Auflösungen auf mobilen Endgeräten adressieren möchte.

Würde man nämlich bis zur HD-Auflösung (1.900 Pixel in der Breite) flexibel bleiben, würden sich im Inhaltsbereich sehr lange, kaum mehr lesbare Zeilen ergeben. Hier wäre dann ein noch einmal abgewandeltes Layout notwendig.

Das Menü wird klassisch mit float:left angeordnet. Die Breitenangabe erfolgt für die Flexibilität in Prozent. Die Schriftgröße ist relativ von der im body definierten Schriftgröße:

Die nächsten Formatierungen betreffen die Navigationseinträge. Hier wird der Listenstil entfernt und die Listenelemente werden als Blockelemente definiert:

Der Inhaltsbereich richtet sich rechtsbündig aus und erhält eine Breite von 70 Prozent. Auch hier wird die Schriftgröße relativ angepasst.

Hier ist der Code noch einmal in der Komplettansicht:

Wie man sieht, hat der umschließende Container eine maximale Breite von 960 Pixeln und ist mittig ausgerichtet. Das Menü nimmt 30 Prozent der Breite des Elternelements ein (960 x 0,3 = 288 Pixel), der Inhaltsbereich hingegen 70 Prozent (960 x 0,7 = 672 Pixel). Grafiken (img) geben wir immer eine Breite von 100 Prozent, damit orientieren sich diese auch an ihren Elternelementen und skalieren automatisch mit.

Das Skalieren von Grafiken ist in der Praxis bei detaillreichen Bildern nicht ganz optimal, denn der Browser ist beim Skalieren deutlich schlechter als ein Bildbearbeitungsprogramm. Allerdings funktioniert es generell nicht schlecht, wenn das Ausgangsbild groß genug gewählt ist.

Responsives Layout erstellen

Nun fügen wir unterhalb den CSS3-Code für das responsive Layout hinzu:

Alle zwischen @media (max-width: 650px) {...} eingeschlossenen CSS-Regeln gelten nur für Displays, die maximal 650 Pixel breit sind. Wir heben das Floaten der beiden Container für diese Ansicht auf und geben ihnen beiden eine Breite von 90 Prozent. Außerdem lassen wir die Aufzählungspunkte des Menüs nebeneinander erscheinen, statt untereinander. Dazu wird das Floating dafür aufgehoben.

Breakpoints festlegen

Sie können in Ihrem Stylesheet mehrere Media Queries für unterschiedliche Displays einbauen, etwa für 800 Pixel und 450 Pixel, diese bezeichnet man als Breakpoints, sprich Punkte, an denen das Layout umbricht.

Natürlich stellt sich nun die Frage, für welche Größen man sich entscheidet. Webstatistiken sagen uns, dass die meisten Besucher von Apple-Geräten wie dem iPhone und dem iPad kommen. Daher bieten die Auflösungen dieser beiden Geräte eine gute Grundlage.

Die Auflösung des iPad 2 beträgt im Hochformat 768 mal 1024 Pixel, das Umgekehrte gilt für das Querformat. Das iPhone 4 hat eine Auflösung von 640 mal 960 Pixel im Hochformat. Natürlich gibt es auf dem Smartphone- und Tablet-Markt sehr viele Geräte mit ganz anderen Auflösungen.

Ein Ansatz von Joshua Johnson besagt: "Lassen Sie das Design entscheiden". Johnson ist der Auffassung, dass jedes Design seine eigenen, speziellen Breakpoints braucht, damit es gut aussieht. Sie können ganz einfach herausfinden, ab wann Ihr Design nicht mehr schön aussieht, wenn Sie das Browserfenster langsam mit der Maus kleiner ziehen. Mit dem Firefox Add-on "Measureit" lassen sich dann bequem die Pixel ausmessen, wie zum Beispiel auf der Web Designer Wall (www.webdesignerwall.com ).

Einen kleinen Trick müssen wir noch anwenden, um das automatische Zoomen der Smartphones beziehungsweise Tablets zu deaktivieren. Dazu packen wir einfach folgenden Metatag in den Head-Bereich der HTML-Seite:

Der Metatag sagt dem Browser, dass er die Breite des Endgeräts verwenden soll und die Standardskalierstufe 1 ist, was wiederum 100 Prozent entspricht.

Responsives Layout testen

Wie können wir unser responsives Layout nun testen? Natürlich könnte man die Website einfach mit einem entsprechenden mobilen Gerät aufrufen und sich das Ergebnis ansehen, aber meistens arbeitet man ja erst einmal auf einem lokalen System.

An dieser Stelle hilft uns das Firefox Add-on "Web Developer Toolbar". Dieses bietet eine Funktion zu Anpassung der Fenstergröße. Nach erfolgreicher Installation steht die Werkzeugleiste zur Verfügung. Durch einen Klick auf Größe/Fenstergröße bearbeiten gelangt man zu den Einstellungen, in welchen man verschiedene Fenstergrößen frei definieren kann.

Am besten legen Sie ein paar gängige Displaygrößen, wie etwa 640 mal 960 Pixel für das iPhone 4 im Hochformat, an. Anschließend kann man die gewünschte Fenstergröße aus der Werkzeugleiste auswählen. Sogleich verkleinert sich das Browserfenster und Sie sehen unser angepasstes Layout. Natürlich war das ein sehr simples Beispiel. Bei komplexeren Layouts mit vielen Elementen muss man sehr vorsichtig vorgehen, damit kein Durcheinander entsteht.

Beispiel: Wordpress-Theme "Twenty Eleven"

Ein sehr schönes Beispiel für ein responsives Layout in einer komplexeren Anwendung ist das aktuelle Wordpress-Standard-Theme "Twenty Eleven". Ein Blick in dessen Stylesheet (style.css) lässt erahnen, wie viel Aufwand hier in das Design gesteckt wurde. Bei etwa 2.600 Zeilen Code wurden sämtliche technischen Möglichkeiten ausgereizt.

Die Struktur folgt allerdings einer klaren Logik: Nach dem CSS-Reset folgen erst globale Einstellungen, danach kommen Regeln für spezifischere Inhalte, dann folgen drei Media Queries für 800, 650 und 480 Pixel und zu guter Letzt folgen Anweisungen für die Druckansicht der Seite @media print {...} - und das alles in einem einzigen Stylesheet. Dieses wird der Reihe nach von oben nach unten interpretiert. Somit können Regeln von oben weiter unten in den Media Queries wieder aufgehoben werden.

Bei einer Ansicht von 1024 Pixel - auf die die meisten Websites optimiert sind - stellt sich Wordpress in einem zweispaltigen Layout dar. Auf der rechten Seite befindet sich die berühmte Sidebar. Wenn man sich die Seite nun mit 640 Pixel Fensterbreite ansieht, verschwindet die Sidebar rechts und rutscht an das Seitenende.

Ladezeit von Grafiken beachten

Noch ein paar Worte zur Performance: Natürlich ist es für die Ladezeit der Seite nicht optimal, wenn auf einem mobilen Gerät, möglicherweise über eine langsame Mobilfunkverbindung, Grafiken erst in voller Größe geladen werden, um sie dann wieder herunterzuskalieren.

Dieser Problematik kann man am besten bereits serverseitig entgegensteuern und beispielsweise die Grafiken über das CMS gleich in der richtigen Größe ausliefern. Dies erfordert allerdings eine serverseitige Unterscheidung der Endgeräte. Ebenso verhält es sich mit verborgenen Elementen. Unter Umständen setzt man ein Element in einer kleinen Ansicht einfach auf display:none, um es auszublenden und Platz zu sparen. Geladen wird es allerdings trotzdem, nur nicht angezeigt.

Viele Designer vertreten die Meinung, man sollte bei der Entwicklung eines responsiven Layouts den Mobile-first-Ansatz verfolgen und die mobile Version der Website vor der Desktop-Variante entwickeln um genau solchen Performance-Problemen von vornherein entgegenzuwirken.

Es gibt auch noch eine Reihe von Javascript-Bibliotheken, beziehungsweise jQuery-Plug-ins, die einem mit dem responsiven Design zum Beispiel bei einer Slideshow helfen, oder die Schriftgröße beeinflussen.

Fazit

Responsive Layouts mit CSS3 Media Queries könnten in vielen Bereichen die Lösung der Zukunft werden. Allerdings ist es unter Umständen schwierig, weniger webaffine Kunden oder Designer davon zu überzeugen, dass es in Ordnung ist, wenn Websites nicht überall gleich aussehen, sondern sich ihrem Ausgabemedium anpassen.

Gerade für eine konsistente Corporate Identity sind hier Kompromisse unabdingbar. Denn schließlich ist es natürlich ein Bruch in der Optik, wenn eine Navigationsleiste bei der einen Auflösung links erscheint, bei der anderen aber über dem Inhalt. Außerdem ist es ein nicht zu unterschätzender Aufwand, ein responsives Design zu erstellen. Alleine für die Tests ist mit deutlich erhöhtem Aufwand zu rechnen.