Pimp your blog – #1: Responsive Design

Der Start einer Serie!! Folge eins: Wie man seinen Blog für alle Geräte – vom Handy bis zum 30-Zoll-Bildschirm – optimiert.

Das Stichwort lautet Responsive Design. Damit sorgt man dafür, dass eine Website von sämtlichen Ausgabemedien übersichtlich und hübsch angezeigt wird (und darüber hinaus auch schnell geladen werden kann). Auch ein WordPress-Blog will beispielsweise für Mobiltelefone und Tablets hergerichtet werden. Denn die Desktop-Ansicht der meisten Themes, mit Sidebars und vielen großen Grafiken, sieht auf mobilen Geräten alles andere als optimal aus.

Wie kannst du nun deinen eigenen Blog mit Responsive Design ausstatten?

Möglichkeit 1: Wähle das richtige Theme! Es gibt eine Vielzahl an WordPress-Themes, die bereits für die Darstellung auf unterschiedlichen Bildschirmen ausgelegt sind. Hier und hier findet man eine Liste von kostenlosen Themes, die für PC, Tablet und Handy bereits optimiert sind.

Möglichkeit 2: Installiere das richtige Plugin! All jene, die viele Stunden damit zugebracht haben, ein hübsches Theme auszusuchen und dieses dann in vielen weiteren Stunden liebevoll verändert und erweitert haben (so wie ich), müssen jetzt nicht zwangsweise die ganze Arbeit über den Haufen werfen und ein neues Theme übernehmen, falls das alte nicht responsive ist. WPtouch ist ein Plugin, das deinen Blog auf den meisten mobilen Geräten (iPod und iPhone, ein paar andere, sowie sämtliche Android Geräte) mobile-user-friendly anzeigen lässt.

Das Theme meines Blogs heißt Esplanade und ist bereits responsive. Um zu testen, wie mein Blog auf verschiedenen Geräten wirklich angezeigt wird, habe ich Screenfly benutzt – ein Online-Tool, das die Darstellung einer Seite auf verschiedenen Bildschirmen simuliert. Und so sieht’s aus:

Mein Blog auf einen 24-Zoll Desktop-Bildschirm

Mein Blog auf einen 24-Zoll Desktop-Bildschirm

Mein Blog auf einem iPad

Mein Blog auf einem iPad

Mein Blog auf dem iPhone4

Mein Blog auf dem iPhone4

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>