Responsive Webdesign
Die Zeit der fixen Bildschirm- bzw. Monitorgrößen, auf die sich Webdesigner beim Design von Webseiten verlassen konnten, ist spätestens mit dem sprunghaft gestiegenen Verkaufszahlen von iPhones, iPads und Co. endgültig vorbei. Daher stehen Webmaster und Webdesigner vor der Frage, wie man mit der Vielzahl der Ausgabeformate und Endgeräte umgehen soll.
Zunächst versuchte man, das Problem zu umgehen, indem man eine "Mobilversion" der eigentlichen Webseite erstellte. Doch auch diese Zwischenlösung reicht längst nicht mehr aus, denn die unterschiedlichen Geräte variieren mittlerweile so stark in Größe und Auflösung, dass zahlreiche Varianten von mobilen Seitenlayouts notwendig wären. Hinzu kommt, dass insbesondere mobile Nutzer hohe Anforderungen an leicht bedienbare und geräteoptimierte Webseiten und ein ästhetisches Design stellen.
Die Lösung heißt Responsive Design, welches Layout, Inhalt und Programmierung mit Hilfe von HTML5 und CSS3 strikt trennt und die Webseiten bei Aufruf an das jeweilige Ausgabegerät anpasst. Die Webseiten reagieren somit auf die Auflösung, Größe, Eingabemöglichkeiten (Tastatur oder Touchscreen) und Ausrichtung (Hoch- oder Querformat) des Endgerätes. Diese Daten über das Endgerät werden mit sogenannten Media Queries (einer CSS3-Funktion) abgefragt und die Seitenelemente wie Navigation, Spaltenbreite, Textgröße und Bilder entsprechend angepasst. So wird beispielsweise der Text einer Webseite beim Betrachten mit einem Android Phone einspaltig dargestellt, während der Text auf einem iPad in Querausrichtung in zwei Spalten ausgegeben wird.
Bei Bildern hat der Webdesigner die Möglichkeit, eine verkleinerte Kopie des Originalbildes einzusetzen oder mit Hilfe sogenannter "Adaptive Images" (eine Kombination von Javascript und PHP) zur Laufzeit ein optimiertes Bild zu erzeugen und so dem mobilen Nutzer Ladezeit und Datenvolumen zu sparen.
Es ist zwar initial aufwendiger, Webseiten mit Responsive Design zu erstellen, jedoch überwiegen die Vorteile: für den Webdesigner in der einfacheren Wartung und Anpassung der Inhalte und für den Endnutzer durch ein optimales Erlebnis beim (mobilen) Surfen.