Responsive Layout – eine neue Webdesign-Technik setzt sich durch

Auch im Jahr 2011 ist es manchmal noch schwierig, weniger Web-affine Kunden davon zu überzeugen, dass es völlig OK ist, wenn Webseiten nicht überall gleich aussehen sondern sich ihrem Ausgabe-Medium anpassen. Heute haben wir eine extreme Bandbreite von sehr schmalen Geräten wie Smartphones hin zu Wide-Screen-Monitoren. Optimierungen für Bildschirmgrößen sind damit endgültig obsolet geworden.

Die Antwort ist Response Layout, ein Konzept des Webdesigners Jon Hicks. Der wesentliche Inhalt wird immer angezeigt und je nach Breite des Ausgabemediums um weitere Spalten ergänzt. Die folgende animierte Grafik zeigt, wie Responsive Layouts funktionieren:

Hierbei handelt es sich immer um ein und dieselbe Webseite. Ein Responsive Layout arbeitet mit einer Mischung aus Prozentwerten bei Größenangaben für Layoutboxen und Bildern sowie einem CSS-Selector, der dafür sorgt, dass bei unterschiedlichen Bildschirmgrößen unterschiedliche Styles Anwendung finden (hier als vereinfachtes Beispiel):

@media screen and (max-width: 500px) {
	nav ul{font-size: 0.75em;}}

@media screen and (max-width: 800px) {
	body { font-size: 95%; }}

@media screen and (min-width: 1024px) {
	body { font-size: 105%; }}

Damit hat der Webentwickler schon alle Nötigen Zutaten für ein Responsive Layout. Und weil keiner das Rad neu erfinden will, gibt es für WordPress seit kurzem mit Yoko ein freies Responsive Theme, welches man als Grundlage für eigene Experimente verwenden kann.