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 */
}
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:
