Responsive Design – die Kraft von Media Queries nutzen

Dienstag, 01. Mai 2012

Wir lieben Daten und verbringen viel Zeit damit, die Analysen unserer Websites zu überwachen. Jeder Webentwickler, der dasselbe tut, wird in letzter Zeit den Anstieg des Traffics von Mobilgeräten bemerkt haben. Im vergangenen Jahr haben wir bei vielen wichtigen Websites einen signifikanten Prozentsatz an Seitenaufrufen von Smartphones und Tablets verzeichnet. Diese repräsentieren eine große Anzahl von Besuchern mit ausgefeilten Browsern, die das neueste HTML, CSS und JavaScript unterstützen, aber auch über begrenzten Bildschirmplatz mit Breiten von nur 320 Pixeln verfügen.

Unser Engagement für
Barrierefreiheit bedeutet, dass wir bestrebt sind, allen unseren Nutzern ein gutes Surferlebnis zu bieten. Wir standen vor der schwierigen Wahl, entweder mobil-spezifische Websites zu erstellen oder bestehende Websites und neue Projekte so anzupassen, dass sie sowohl auf dem Desktop als auch auf Mobilgeräten gut dargestellt werden. Die Erstellung von zwei Websites würde es uns ermöglichen, gezielter auf bestimmte Hardware einzugehen, aber die Pflege einer einzigen gemeinsamen Website bewahrt eine kanonische URL, vermeidet komplizierte Weiterleitungen und vereinfacht das Teilen von Webadressen. Im Hinblick auf die Wartbarkeit neigten wir dazu, dieselben Seiten für beide zu verwenden, und begannen darüber nachzudenken, wie wir die folgenden Richtlinien erfüllen könnten:

1. Unsere Seiten sollten bei jeder Bildschirmauflösung lesbar dargestellt werden
2. Wir zeichnen einen Satz von Inhalten aus, sodass er auf jedem Gerät angezeigt werden kann
3. Wir sollten niemals eine horizontale Bildlaufleiste anzeigen, unabhängig von der Fenstergröße

Implementierung

Als Ausgangspunkt bietet uns einfaches, semantisches Markup Seiten, die flexibler sind und einfacher umgebrochen werden können, wenn das Layout geändert werden muss. Indem wir sicherstellen, dass das Stylesheet ein
flüssiges Layoutermöglicht, sind wir bereits auf dem Weg zur Mobilfreundlichkeit. Anstatt Breite für Containerelemente anzugeben, begannen wir stattdessen maximale Breite zu verwenden. Anstelle von
Höhe verwendeten wir Mindesthöhe, damit größere Schriftarten oder mehrzeiliger Text die Grenzen des Containers nicht sprengen. Um zu verhindern, dass Bilder mit fester Breite flüssige Spalten “aufdrücken”, wenden wir die folgende CSS-Regel an:

Ein flüssiges Layout ist ein guter Anfang, kann aber eine gewisse Finesse vermissen lassen. Glücklicherweise werden
Media Queries jetzt
in modernen Browsern gut unterstützt
einschließlich IE9+ und den meisten Mobilgeräten. Diese können den Unterschied ausmachen zwischen einer Website, die auf einem mobilen Browser gut degradiert, und einer, die verbessert wurde, um die optimierte Benutzeroberfläche zu nutzen. Aber zuerst müssen wir berücksichtigen, wie sich Smartphones gegenüber Webservern darstellen.

Viewports

Wann ist ein Pixel kein Pixel? Wenn es auf einem Smartphone ist. Standardmäßig geben Smartphone-Browser vor, hochauflösende Desktop-Browser zu sein, und legen eine Seite so an, als würden Sie sie auf einem Desktop-Monitor betrachten. Deshalb erhalten Sie einen “Übersichtsmodus” mit winzigem Text, der unmöglich zu lesen ist, bevor Sie hineinzoomen. Die
Standard-Viewport-Breite
für den Standard-Android-Browser beträgt 800px und 980px für iOS, unabhängig von der Anzahl der
tatsächlichen physischen Pixel
auf dem Bildschirm.

Um den Browser dazu zu bringen, Ihre Seite in einem lesbareren Maßstab zu rendern, müssen Sie das Viewport-Meta-Element verwenden:

Mobilbildschirmauflösungen variieren stark, aber die meisten modernen Smartphone-Browser melden derzeit eine Standard- Gerätebreite im Bereich von 320px. Wenn Ihr Mobilgerät tatsächlich eine Breite von 640 physischen Pixeln hat, würde ein 320px breites Bild auf die volle Breite des Bildschirms skaliert werden, wobei dabei die doppelte Anzahl an Pixeln verwendet wird. Dies ist auch der Grund, warum Text auf dem kleinen Bildschirm so viel schärfer aussieht – doppelte Pixeldichte im Vergleich zu einem Standard-Desktop-Monitor.

Das Nützliche daran, die Breite im Viewport- Meta- Tag auf
Gerätebreite einzustellen, ist, dass sie aktualisiert wird, wenn der Benutzer die Ausrichtung seines Smartphones oder Tablets ändert. Die Kombination mit Media Queries ermöglicht es Ihnen, das Layout anzupassen, während der Benutzer sein Gerät dreht:

In der Realität werden Sie möglicherweise feststellen, dass Sie je nachdem, wie Ihre Website fließt und auf verschiedenen Geräten aussieht, unterschiedliche Haltepunkte verwenden müssen. Sie können auch die Ausrichtung Media Query verwenden, um auf bestimmte Ausrichtungen abzuzielen, ohne sich auf Pixelabmessungen zu beziehen,
wo unterstützt.

Ein Beispiel für Media Queries

Wir haben kürzlich die
Über Google Seite neu gestartet. Neben der Einrichtung eines flüssigen Layouts haben wir einige Media Queries hinzugefügt, um ein verbessertes Erlebnis auf kleineren Bildschirmen wie denen eines Tablets oder Smartphones zu bieten.

Anstatt auf bestimmte Geräteauflösungen abzuzielen, haben wir uns für eine relativ breite Reihe von Haltepunkten entschieden. Für eine Bildschirmauflösung von mehr als 1024 Pixeln rendern wir die Seite so, wie sie ursprünglich entworfen wurde, gemäß unserem 12-Spalten-Raster. Zwischen 801px und 1024px sehen Sie dank des flüssigen Layouts eine leicht gequetschte Version.

Nur wenn die Bildschirmauflösung auf 800 Pixel sinkt, werden Inhalte, die nicht als Kerninhalt betrachtet werden, an das Ende der Seite verschoben:

Mit einer letzten Media Query betreten wir das Smartphone-Territorium:

An diesem Punkt laden wir das große Bild nicht mehr und stapeln die Inhaltsblöcke. Wir haben auch zusätzlichen Leerraum zwischen den Inhaltselementen hinzugefügt, damit sie leichter als verschiedene Abschnitte identifiziert werden können.

Mit diesen einfachen Maßnahmen haben wir sichergestellt, dass die Website auf einer Vielzahl von Geräten nutzbar ist.

Fazit

Es ist erwähnenswert, dass es keine einfache Lösung gibt, um Websites auf Mobilgeräten und schmalen Viewports zugänglich zu machen. Flüssige Layouts sind ein großartiger Ausgangspunkt, aber einige Designkompromisse müssen möglicherweise eingegangen werden. Media Queries sind eine nützliche Möglichkeit, für viele Geräte den letzten Schliff zu verleihen, aber denken Sie daran, dass
25% der Besuche von Desktop-Browsern stammen, die die Technik derzeit nicht unterstützen, und es einige
Leistungsauswirkungengibt. Und wenn Sie ein schickes Widget auf Ihrer Website haben, funktioniert es vielleicht wunderbar mit einer Maus, aber nicht so gut auf einem Touch-Gerät, wo eine feine Steuerung schwieriger ist.

Der Schlüssel ist, früh und oft zu testen. Jede Zeit, die Sie damit verbringen, Ihre eigenen Websites mit einem Smartphone oder Tablet zu surfen, wird sich als unschätzbar erweisen. Wenn Sie nicht auf echten Geräten testen können, verwenden Sie das
Android SDK oder den
iOS Simulator. Bitten Sie Freunde und Kollegen, Ihre Websites auf ihren Geräten anzusehen, und beobachten Sie auch, wie sie interagieren.

Mobile Browser sind eine großartige Quelle für neuen Traffic, und zu lernen, wie man sie am besten unterstützt, ist ein spannender neuer Bereich der beruflichen Entwicklung.

Einige weitere Beispiele für Responsive Design bei Google:

• www.google.com/about/
• www.google.com/goodtoknow
• www.google.com/culturalinstitute
• www.google.com/events/sciencefair
• www.google.com/intl/en/chrome/devices
• picasa.google.com

Geschrieben von Rupert Breheny,
Edward Jung, und
Matt Zürrer, Google Webmaster Team