Mit diesem Thema, das der Webmaster Friday in dieser Woche aufgeworfen hat, muss sich jeder Blogger irgendwann einmal beschäftigen. Noch vor gar nicht allzu langer Zeit war man immer auf der sicheren Seite, wenn man seine Projekte an Bildschirmauflösungen von 800 x 600 Pixel oder 1024 x 768 Pixel angepasst bzw. optimiert hat. Im Zeitalter der HD Bildschirme, Smartphones und Tablets reicht das aber nicht mehr aus.
Was ist Responsive Webdesign?
Kurz gesagt ist Responsive Webdesign eine Optimierung der Webseite auf unterschiedliche Bildschirmformate. Das umfasst nicht nur den Textbereich, der ohnehin automatisch umbrochen wird, sondern alle Elemente und die Anordnung einer kompletten Webseite. geht man von Standardgrößen wie 800 x 600, 1024 x 768 oder 1920 x 1080 Pixel aus, dann ist das noch recht einfach. Hier bedarf es keiner allzu großen Änderungen im Layout. Rechnet man jetzt aber die Smartphones, Tablets und Netbooks hinzu, dann muss man sich auch um Größen wie 240 x 320, 320 x 480, 480 x 800, 960 x 640, 1024 x 600 und viele weitere kümmern. Hier sieht man sofort, das man für die kleinsten Displays ein ganz neues Konzept benötigt und nicht nur das Layout umstellen muss. Besonders die Bilder müssen an die kleinen Displays angepasst werden.
Nun muss man sich aber auch fragen, ob der nicht ganz unerhebliche Aufwand sich auch lohnt. Gerade im Bereich der Bilder ist es nicht ganz so leicht, diese an viele unterschiedliche Display anzupassen. Oftmals ist ein Skalieren gar nicht möglich und es müssen Ausschnitte angezeigt werden. Während die Skalierung problemlos von PHP übernommen werden kann, ist es bei Beschneidungen schon deutlich schwerer. Natürlich hat PHP auch hiermit kein Problem, sofern es denn weiß, welcher Ausschnitt des Bildes aussagekräftig ist und erhalten bleiben muss. Das bedeutet im Klartext, hier ist Handarbeit angesagt. Hat das Projekt reichlich Bildmaterial, dann ist das ein nicht ganz unerheblicher Aufwand.
Wie halte ich es mit meinen eigenen Projekten?
Bei einigen Projekten setze ich aber dennoch auf separate Versionen für kleine Bildschirme. Hier kommt dann das Plugin WP Touch zum Einsatz, das komplett eigenständige Templates für Smartphones und Tablets zur Verfügung stellt. Diese lassen sich ebenso einfach anpassen. wie man es auch vom Theme des normalen Blogs gewohnt ist.
Fazit:
Mein Responsive Webdesign beschränkt sich darauf, das ich meine eigenen Seiten natürlich in mobilen Endgeräten betrachte und die eine oder andere Seite leicht modifizieren, wenn etwas gar nicht auf den kleinen Bildschirm passen sollte. Ansonsten setze ich aber lieber auf “echte” Mobilseiten, die mithilfe eines Plugins erstellt werden und dementsprechend auch an das Handling eines Smartphones angepasst werden können.
