Flexibles Design und die Leistung von Medienabfragen nutzen

Donnerstag, 14. Juni 2012

Wir haben ein Faible für Daten und analysieren unsere Websites intensiv. Jeder Webentwickler mit ähnlichen Interessen hat sicherlich den neuen Trend zu mehr Zugriffen über Mobilgeräte erkannt. Im letzten Jahr stiegen die Seitenaufrufe vieler großer Websites über Smartphones und Tablets erheblich an. Viele Besucher nutzen hochentwickelte Browser, die die neuesten Versionen von HTML, CSS und JavaScript unterstützen. Allerdings sind die Bildschirme der verwendeten Geräte recht klein und bieten manchmal nur eine Breite von 320 Pixel.

Im Sinne unseres Engagements für Accessiblity (Zugänglichkeit) bemühen wir uns darum, allen unseren Nutzern ein angenehmes Surfen im Web zu ermöglichen. Wir standen vor einer schwierigen Entscheidung: Sollten wir neue, eigens auf Mobilgeräte ausgerichtete Websites erstellen oder bestehende Websites und neue Produkte so anpassen, dass sie problemlos sowohl auf einem Desktop als auch auf einem Mobilgerät dargestellt werden können. Wenn wir zwei getrennte Websites erstellen, können wir sie besser auf spezifische Hardware ausrichten. Andererseits kann für eine einzige, gemeinsam genutzte Website eine kanonische URL verwendet werden, die komplizierte Weiterleitungen vermeidet und die gemeinsame Nutzung von Webadressen vereinfacht. Da wir stets um eine einfache Verwaltung bemüht sind, tendierten wir dazu, für beide Gerätearten die gleiche Seite zu verwenden. Die nächste Überlegung war, wie die folgenden Richtlinien erfüllt werden konnten:

1. Die Inhalte unserer Seiten sollten in jeder Bildschirmauflösung leserlich sein.
2. Wir versehen eine Gruppe von Inhalten mit Markups, damit sie auf jedem Gerät angesehen werden können.
3. Unabhängig von der Fenstergröße sollte unter keinen Umständen eine horizontale Bildlaufleiste verwendet werden.


Übereinander angeordnete Inhalte, angepasste Navigation und skalierte Bilder - Chromebooks


Implementierung

Zunächst erhalten wir über einfache semantische Markups Seiten, die flexibler und leichter anzupassen sind, falls das Layout geändert werden muss. Wir sorgen dafür, dass das Stylesheet ein flüssiges Layout (auf Englisch) unterstützt. Damit haben wir bei der benutzerfreundlichen Anpassung für Mobilgeräte schon den ersten Schritt in die richtige Richtung getan. Anstatt width für Containerelemente festzulegen, verwenden wir max-width. Anstelle von height setzen wir min-height, damit größere Schriftarten oder mehrzeiliger Text die Containergrenzen nicht überschreiten. Wir verwenden die CSS-Regel img {max-width: 100%;}, damit Bilder mit fester Breite Spalten in flüssigen Layouts nicht “aufbrechen”. 

img {
  max-width: 100%;
}

Das flüssige Layout ist ein guter Ansatzpunkt, lässt aber einen gewissen Grad an Feinsteuerung vermissen. Glücklicherweise werden Medienabfragen (auf Englisch) von modernen Browsern (auf Englisch), darunter IE9 und höher und Browser auf den meisten Mobilgeräten, gut unterstützt. Das kann den Unterschied zwischen einer Website mit gutem Ausblendeffekt auf einem mobilen Browser und einer Website ausmachen, die für die optimierte Benutzeroberfläche angepasst wurde. Als erstes müssen wir jedoch berücksichtigen, wie Smartphones von Webservern gesehen werden.

Darstellungsbereiche

Wann ist Pixel nicht gleich Pixel? Wenn es um Smartphones geht. Browser für Smartphones sind standardmäßig so ausgelegt, dass sie wie hochauflösende Desktop-Browser erscheinen und eine Seite wie auf einem Desktop-Bildschirm darstellen. Daraus resultiert der “Übersichtsmodus”, bei dem die extrem kleine Schrift erst durch Heranzoomen lesbar wird. Die Standardbreite des Darstellungsbereichs (auf Englisch) beträgt 800 Pixel für den Android-Standardbrowser und 980 Pixel für iOS. Dabei spielt die Anzahl an tatsächlichen physischen Pixeln (auf Englisch) auf dem Bildschirm keine Rolle.

Damit der Browser die Schriftgröße so skalieren kann, dass eure Seite besser lesbar ist, müsst ihr dieses Meta-Element für den Darstellungsbereich verwenden: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Die Bildschirmauflösung ist von Gerät zu Gerät sehr unterschiedlich, aber die meisten modernen Smartphone-Browser bieten derzeit eine standardmäßige Bildschirmbreite von ungefähr 320 Pixeln. Wenn euer Mobilgerät eine Breite von 640 physischen Pixeln hat, wird ein 320 Pixel breites Bild an die volle Bildschirmgröße angepasst. Dabei wird die doppelte Anzahl an Pixeln verwendet. Übrigens ist dies auch der Grund dafür, dass Text auf einem kleinen Bildschirm gestochen scharf ist: Er hat die doppelte Pixeldichte im Vergleich zu einem herkömmlichen Desktop-Bildschirm.

Die Breite über das Meta-Tag des Darstellungsbereichs an den Gerätebildschirm anzupassen ist deshalb besonders nützlich, weil die Breite aktualisiert wird, sobald der Nutzer das Smartphone oder das Tablet anders hält. Wenn ihr dies mit Medienabfragen kombiniert, könnt ihr das Layout so anpassen, dass es auch beim Drehen des Geräts optimal augerichtet ist: 


@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}


Je nach dem, wie gut eure Website funktioniert und auf den verschiedenen Geräten angezeigt wird, müsst ihr in der Praxis möglicherweise verschiedene Breakpoints verwenden. Ihr könnt über die Medienabfrage für die Ausrichtung auch gezielt bestimmte Ausrichtungen angeben, ohne dabei exakte Pixelwerte zu verwenden, sofern dies unterstützt wird (auf Englisch) 


@media all and (orientation: landscape) {
  /* Target device in landscape mode */
}

@media all and (orientation: portrait) {
  /* Target device in portrait mode */
}


Übereinander angeordnete Inhalte, kleinere Bilder - Cultural Institute

Beispiel einer Medienabfrage

Vor Kurzem haben wir die Seite Über Google (auf Englisch) überarbeitet ins Netz gestellt. Neben dem neuen flüssigen Layout haben wir auch einige Medienabfragen hinzugefügt, die für ein besseres Nutzererlebnis auf kleineren Bildschirmen beispielsweise von Tablets oder Smartphones sorgen.

Wir haben uns nicht auf gerätespezifische Auflösungen konzentriert, sondern für relativ viele Breakpoints entschieden. Bei einer Bildschirmauflösung mit einer Breite von mehr als 1024 Pixeln rendern wir die Seite so, wie sie ursprünglich nach unserem Raster mit 12 Spalten ausgelegt wurde. Bei einer Breite von 801 bis 1024 Pixeln wird durch das flüssige Layout eine leicht gedrängte Version angezeigt.

Erst bei einer Bildschirmauflösung von 800 Pixeln werden Inhalte, die nicht als Kerninhalte angesehen werden, in den unteren Bereich der Seite verschoben:

@media screen and (max-width: 800px) { /* specific CSS */ }

Die letzte Medienabfrage bringt uns schließlich zum Smartphone: 

@media screen and (max-width: 479px) {
  /* specific CSS */
}

Hier wird das große Bild nicht mehr geladen und die Inhaltsblöcke werden gestapelt. Darüber hinaus haben wir einen größeren Leerraum zwischen den Inhalten eingefügt, damit einzelne Abschnitte besser erkennbar sind.

Durch diese einfachen Maßnahmen haben wir erreicht, dass die Website auf vielen verschiedenen Geräten angesehen werden kann.


Übereinander angeordnete Inhalte, großes Bild entfernt - Über Google


Fazit

Man darf nicht vergessen, wie schwierig es ist, Websites für den Zugriff über Mobilgeräte mit kleinen Darstellungsbereichen zu optimieren. Flüssige Layouts sind ein guter Ansatzpunkt, aber beim Design müssen möglicherweise Abstriche gemacht werden. Medienabfragen sind sehr nützlich, um die Darstellung auf vielen Geräten zu verbessern. Allerdings muss berücksichtigt werden, dass 25 % der Website-Aufrufe (auf Englisch) über Desktop-Browser erfolgen, die diese Technologie derzeit nicht unterstützen, und dass dieses Vorgehen Auswirkungen auf die Leistung (auf Englisch) hat. Ein tolles Widget auf eurer Website mag zum Beispiel hervorragend mit einer Maus funktionieren, auf einem Gerät mit Touchscreen kann dies jedoch ganz anders aussehen, da dort die Feinsteuerung komplizierter ist.

Der Schlüssel zum Erfolg ist frühzeitiges und häufiges Testen. Jeder Moment, in dem ihr auf einem Smartphone oder Tablet auf eurer eigenen Website surft, lohnt sich. Wenn ihr nicht die Möglichkeit habt, auf echten Geräten zu surfen, nutzt das Android SDK (auf Englisch) oder den iOS Simulator (auf Englisch). Bittet Freunde und Kollegen, eure Websites auf ihren Geräten anzusehen, und verfolgt, wie sie damit interagieren.

Mobile Browser sorgen für viele neue Zugriffe. Sich damit auseinanderzusetzen, wie man diese Browser am besten unterstützt, ist ein spannendes Weiterbildungsfeld.

Hier findet ihr weitere Beispiele für flexible Designs bei Google: