Bilder für Responsive Designs effizient komprimieren

Gestern bin ich auf einen interessanten Artikel auf filamentgroup.com gestoßen, in dem es um das Problem der Bildgrößen im Responsive Design geht. Hier war ausnahmsweise nicht von Javascript- und PHP-Tricks die Rede, mit denen man Bilder in unterschiedlichen Größen ausliefern kann. Im Artikel geht es – ganz altmodisch – um Bildkompression.
Eigentlich ein alter Hut, aber einer, der es unbedingt verdient hat, aus der Mottenkiste geholt zu werden.

Bei Webseiten, die für möglichst viele Geräte und unterschiedliche Nutzungsszenarios funktionieren sollen, ist die Performance ein entscheidender Faktor. Eine Seite, die nur schleppend oder gar nicht lädt, macht den Besuchern keinen Spaß. Auch Suchmaschinen mögen lange Ladezeiten nicht. Gute Performance ist also ein essentieller Faktor für der Erfolg einer Seite. Weiterlesen Bilder für Responsive Designs effizient komprimieren

Media Queries: device-width & width – wo ist der Unterschied?

Über Media Queries kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen. Wobei in der Praxis meist nicht zwischen diesen beiden Werten unterschieden wird, sie werden in einen Topf geworfen.
Dazu trägt man im Viewport-Metatag im head der Seite folgendes ein:

meta name="viewport" content="width=device-with"

Diese Anweisung ist weit verbreitet, auch wir schreiben das so in unsere Themes. Aber genau genommen ist das ein Workaround: Nur wenn width=device-with dasteht, können Android-Geräte die Anweisung device-width überhaupt verstehen. Aber diese Methode hat auch ihre Nachteile. Weiterlesen Media Queries: device-width & width – wo ist der Unterschied?

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.

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

WPCamp Berlin 2012: „Mobile First & WordPress-Themes“

Hier wie versprochen die Slides zu meiner Session „Mobile First & WordPress-Themes“ beim WPCamp in Berlin.

Diesen Artikel werde ich in den nächsten Tagen noch etwas ergänzen. Ich werde eine Auswahl an interessanten Links zu Artikeln & Tools zum Thema zusammenstellen (siehe unten) und ich werde auch auf die eine oder andere Frage eingehen, über die wir bei der Session diskutiert haben.

Weiterlesen WPCamp Berlin 2012: „Mobile First & WordPress-Themes“