Ergänzungen zur Session „Mobile First & WordPress-Themes“

Während und nach meiner Session gab es eine Reihe von interessanten Fragen und Anregungen, die ich gerne wiedergeben möchte.

Mobile Browser per WordPress-Funktion identifizieren

Seit der Version 3.4 gibt es im WordPress-Core eine Funktion, mit der man abfragen kann, ob ein mobiler Browser anfragt: wp_is_mobile
Bei der Funktion ist eine Liste mit user agents (mobilen Browsern) hinterlegt. Wenn also einer von diesen Browsern anfragt, tritt die Funktion in Aktion:

• Mobile
• Android
• Silk
• Kindle
• Blackberry
• Opera Mini

Man könnte damit eine Abfrage direkt in ein Template einbauen und festlegen, ob ein bestimmter Bereich im mobilen Browser angezeigt werden soll oder nicht. Möchte man beispielsweise den Bereich „Newsletter“ nur auf dem Desktop-Rechner zeigen, sähe das irgendwie so aus:

if ( !wp_is_mobile() ) {
  //display newsletter-stuff
} else {
 //display nothing
}

wp_is_mobile ist eine interessante Funktion und ich bin gespannt, wie es an der Stelle weitergeht. Momentant deckt die Funktion nur einen Faktor in dem komplexen Spiel Browser/Monitorbreite/Bandbreite ab. Man kann damit Browser identifizieren, aber keine Bildschirmbreiten oder andere Kriterien abfragen.
Praktisch ist, dass ein Element, das per Funktion wp_is_mobile „ausgeblendet“ wird, auch nicht geladen wird. Ganz im Gegensatz zur CSS-Anweisung display:none, die zwar ein Element unsichtbar macht, das aber zuvor trotzdem geladen werden muss.

Styles Mobile First

Eine kleine Ergänzung zum Einbetten der style.css möchte ich noch gern loswerden.
Bei WordPress-Themes ist es üblich – und sinnvoll – alle CSS-Angaben in eine einzige Datei style.css zu packen. Wenn alle Styles in einer Datei versammelt sind, muss nur eine CSS-Datei aufgerufen werden, der Browser hat also nur eine Anfrage auszuführen.

Es ist aber durchaus sinnvoll, die Angaben für Smartphone & Co. von den Informationen für größere Bildschirme zu trennen. Damit vermeidet man, dass das mobile Gerät Daten laden muss, die es gar nicht nutzen kann.
Man muss dazu allerdings eine weitere, zusätzliche HTTP-Request in Kauf nehmen und zwei statt einem Stylesheet in der header.php einbinden. Das erste enthält nur die styles für die Mobile Ansicht und das zweite enthält die Angaben für alle Ansichten darüber hinaus.

href="style.css" media="screen, handheld" 
href="enhanced.css" media="screen  and (min-width: 40.5em)

Quelle und weitere Infos: Creating a Mobile First Responsive Web Design

Viele mobile Browser laden das zweite Stylesheet mit der Media Query nicht. Das spart Ladezeit, die beim Responsive Design immer ein schwieriges Thema ist.
Gerade mobile Geräte, die nur die „abgespeckte“ Variante einer Website sehen, müssen jede Menge Ballast mitladen. Auch die Mobile-First-Methode löst das Problem nicht automatisch.

Per Button zur Desktop-Ansicht wechseln

Während der Session kam die Frage auf, wie man es denn macht, dass die Nutzer einen Button sehen, mit dem sie zur Desktop-Ansicht wechseln können. Gibt es eine separate mobile Seite (mdot), ist das einfach zu lösen, man setzt einfach einen Link auf die URL. Aber innerhalt eines Responsive Design passiert ja alles innerhalb der CSS-Datei. Einfach so einen Link setzen klappt also nicht.

Wenn man mit zwei Stylesheets arbeitet, kann man per Javascript und Cookie einen Button generieren, mit dem man von der mobilen Ansicht zur Desktop-Ansicht wechseln kann: Hier ein Beispiel von sundoginteractive.com.