Nachlese Responsive Images

Mit der Nachlese vom letzten Treffen bin ich ziemlich spät dran, ich weiß. Aber mir kam das WordCamp in Köln dazwischen. Dort habe ich nette Kollegen getroffen, viel gelernt und ich habe etwas über Information Architecture erzählt. 

Beim letzten WPMeetUp hat Matthias Schwindt einen Vortrag über Responsive Images gehalten. Er hat sich mit dem Thema ausführlich bei seinem neuen Blog GPS Radler beschäftigt.
Der Vortrag war entsprechend spannend und aufschlussreich. Matthias hat sich mit einer Reihe von Plugins auseinandergesetzt, die dabei helfen, mit dem komplexen Thema Responsive Bilder umzugehen. Er hat sie auf Mark und Bein getestet und seine Erfahrungen mit uns geteilt. 

RICG Responsive Images

Das PlugIn, das einem als erstes in den Sinn kommt, ist das Plugin RICG Responsive Images. Bei mir stand es auch auf der Favoritenliste. Dieses Plugin wird von einigen „Bigshots“ aus der Branche gemacht, darunter große Namen wie Chris Coyier und  Andrew Nacin.

Für Matthias‘ Blog war RICG Responsive Images allerdings nicht das Richtige, weil sich das Plugin bei der Auswahl der Bildgrößen an der Breite des Browserfensters orientiert. Das Browserfenster ist eine gute Referenz, wenn es um einspaltige Layouts geht. Aber bei mehrspaltigen Layouts ist die Breite des Fensters keine wirklich sinnvolle Information.
Das Theme, das Matthias in seinem Blog einsetzt, arbeitet nicht nur mit vielen Bildgrößen, sondern auch mit verschiedenen Layoutelementen. Die Artikel werden zum Beispiel als Teaser in mehreren Spalten nebeneinander präsentiert.

Screenshot gpsradler.de
Screenshot gpsradler.de

Responsify WP

Matthias hat sich schließlich für das Plugin Responsify WP entschieden. Der Vorteil: Das Plugin orientiert sich nicht an äußeren Faktoren wie der Breite des Browserfensters, sondern an den konkreten Bildgrößen/CSS-Klassen der Bilder im Layout. Ein weiterer Vorteil: Das Plugin „kann auch Retina“, das heisst, man kann auch die Ausgabe von Bildern in hoher Auflösung darüber steuern.

Das Plugin Responsify WP gibt allen Bildern eine zusätzliche Information mit – scrset (= Screenset) – und erreicht dadurch, dass man die Bilder mit verschiedenen Bildschirmgrößen verknüpfen kann.

teaser
In einem Layout werden verschiedenen Artikel angerissen und in so genannten „Teasern“ angezeigt. Klick man auf „weiterlesen“, kommt man zur Einzelansicht des Artikels. In der Desktopansicht ist das Layout so gestaltet, dass diese Teaser in Spalten nebeneinander angeordnet sind. Auf kleineren Bildschirmen ist das Layout anders: Hier stehen die Teaser in einer Spalte untereinander.

 

Das Plugin Responsify WP sorgt nun dafür, dass für jede Bildschirmgröße das richtige Bild in der richtigen Größe ausgegeben wird. In der Desktopansicht braucht man beispielsweise ein kleineres Bild als in der Smartphoneansicht.

Es braucht etwas Zeit bis alles so eingerichtet ist, dass auch wirklich die passenden Bilder ausgegeben werden. Aber die Mühe lohnt sich.

Komprimierung und Retina-Support

Matthias hat uns noch drei weitere Plugins empfohlen:

Das erste Plugin übernimmt die Aufgabe, Bilder vor/während dem Hochladen zu komprimieren. Das zweite ist ein sehr leicht bedienbares Plugin um eine Seite „retinafähig“ zu machen, also hoch aufgelöste Bilder an Geräte mit hochauflösenden Bildschirmen auszuliefern. Mit Simple Image Sizes kann man schnell und einfach die Bildgrößen im Theme ändern.

Vielen Dank, Matthias!


Beitrag veröffentlicht

in

von

Schlagwörter: