schaffrath medien

App-Entwicklung, Web, Produktkonzeption 10.01.12

Mit Responsive Design Webseiten automatisch an verschiedene Endgeräte anpassen.

Von: Ulrich Radespiel

Unter Responsive Webdesign beziehungsweise Responsive Layouts versteht man die Fähigkeit einer Webseite, sich automatisch an den Bildschirm des abrufenden Geräts anzupassen. In der Vergangenheit hat man einen Webauftritt an den größten gemeinsamen Nenner, beispielsweise einer Auflösung von 1024 X 768 Pixel angepasst und der Webauftritt war optimal ins Bild gesetzt.

Heute hat man eine Unmenge an Geräten wie Smartphones mit verschiedenen Bildschirmgrößen und Auflösungen. Dazu kommen unterschiedliche Tablet-Computer und demnächst werden auch TV-Geräte verstärkt fürs Surfen genutzt.

Anstelle für viele verschiedene Auftritte und Endgeräte aufwändig eine eigene Präsenz zu programmieren, ist Responsive Design nun die Antwort darauf, einen Auftritt zu schaffen bei dem die Spaltenanzahl, Anordnung von Bildern, Textboxen und Schriftgröße; also das ganze Layout automatisch auf das ankommende Gerät reagiert. 
Dies geschieht auf Basis von HTML5 mittels Media Queries, die in der CSS integriert sind und entsprechend das ankommende Gerät abfragen. Das Layout reagiert dann mit prozentualen Anteilen, die einer darstellenden Webseite zugewiesen werden.
Bei einem Neuaufbau einer Seite ist das verhältnismäßig einfach, anstelle von festen Pixelbreiten prozentuale Angaben zu verwenden. Bei bestehenden Auftritten wird es zu einer ungleich anspruchsvolleren Aufgabe. 

In Deutschland gibt es bislang noch wenige Agenturen, die diese Technologie bereits für größere Kundenprojekte umgesetzt haben.
Schöne Beispiele für Responsive Layouts findet man jedoch unter Mediaqueri.es aufgelistet. Wobei wir die Sparkbox und Golden Grid System hervorheben möchten.

zurück