Vor- und Nachteile von Responsive Design und wann der Einsatz wirklich Sinn macht
Kurz zur Vorgeschichte: Der Begriff „Responsive Design“ wurde erstmals 2010 in einem Artikel vom Webdesigner und Developer Ethan Marcotte erwähnt. Er umschreibt damit eine Technik zur Erstellung von flexiblen Websitelayouts. “Flexibel” bezieht sich in diesem Zusammenhang auf die Höhe und Breite der Website, sowie deren Inhalte wie z.B. Schrift, Bilder oder Videos. Der Content wird auf diese Weise automatisch skaliert und passt sich relativ der Bildschirmauflösung an. Diese Technik ist eine Erweiterung des „Liquid“ bzw. “Fluid” Layouts, das mit prozentualen Grössenangaben arbeitet und schon Jahre vorher im Einsatz war.
Ziel dieser Arbeitsweise ist die optimale Darstellung von Websites für verschiedene Bildschirmgrössen – vom Desktop bis zu mobilen Endgeräten wie dem iPhone oder dem iPad. Die Notwendigkeit für diese Arbeitsweise erklärt sich nahezu von selbst: als Webdesigner musste man sich noch vor ein paar Jahren lediglich für eine optimierte Darstellung zwischen 15 oder 17 Zoll entscheiden und allenfalls zusätzlich eine Mobileversion erstellen. Mittlerweile ist aber durch die Tendenz zu immer grösseren Desktopmonitoren und einer stetig wachsenden Anzahl an mobilen Endgeräten die Überschaubarkeit längst nicht mehr gegeben. Smartphones, Netbooks, Tablets – was kommt als nächstes? Es ist nicht nur ineffizient, sondern annähernd unmöglich für jedes Endgerät eine eigene Version der Website zu produzieren. Responsive Design wird als alternative Option gehandelt, dieser Situation mit einfachen Mitteln und nur gering erhöhtem Arbeitsaufwand zu begegnen.
A movie demonstrating the Responsive Web Design principles described by Ethan Marcotten
Wie funktioniert Responsive Design?
Responsive Design besteht aus drei Grundpfeilern:
-
Fluid Layouts
Sie sind meistens mit Hilfe eines Rasters aufgebaut und werden deshalb auch “Fluid Grids” genannt
-
media queries
Die media queries sind Bestandteil der CSS3-Spezifikation und stellen eine erweiterte Funktion des bekannten media=“screen“ aus CSS2 dar. Zusätzlich zur Abfrage der Bildschirm- bzw. Viewportgrösse kann auch die Auflösung abgefragt werden, so dass sich je nach gestellter Bedingung verschiedene Styleanweisungen zuordnen lassen. Ein Beispiel für eine Breite bis 480px und einer Auflösung von 163dpi entsprechend dem iPhone 3:
-
flexible images
Bilder werden in div-Container eingebunden und mit einer maximalen Grösse von 100% versehen:
img { max-width: 100% }
Dies bewirkt ein automatisches Resizen analog zur Containergrösse, sprich die Bildgrösse passt sich dem Verkleinern oder Vergrössern des Layouts an.
Vor-und Nachteile
Die Vorteile sind offensichtlich, doch welche Nachteile gibt es?
Grundsätzlich ist Responsive Design nur in Browsern darstellbar, die CSS3 interpretieren können. Die korrekte Darstellung im Internet Explorer gestaltet sich auch in diesem Fall wie gewöhnlich komplizierter und ist ohne zusätzliche Workarounds – wie etwa mit Hilfe des Einsatzes von Javascript – nicht realisierbar. Erst ab dem IE9 werden beispielsweise die entsprechenden media queries unterstützt.
Ein weiterer Nachteil ist aber vor Allem im Mobilebereich relevant, wo eine niedrige Ladezeit die wichtigste Rolle spielen sollte. Mehr Code, Bilder, die nur zu einem Bruchteil ihrer Originalgrösse angezeigt, aber komplett heruntergeladen werden, sowie geringere CPU-Leistung und Speicherkapazität der Endgeräte, können schnell die Performance der Site negativ beeinflussen und die Geduld des Besuchers herausfordern. Nicht zu vergessen sind natürlich auch die Kosten, die bei einer Datenübertragung via 3G-Netz entstehen können.
Fazit
Meiner Meinung nach sollte diese Arbeitsweise wohl abgestimmt auf Zielgruppe und Endgeräte eingesetzt werden. Sicher ist Responsive Design nicht die “All-in-One”-Lösung wie oftmals euphorisch angepriesen, kann allerdings bei passenden Rahmenbedingungen einen äusserst effizienten Lösungsansatz darstellen.
Ihre Meinung
Haben Sie Responsive Design bereits im Einsatz und würden Sie diese Technik uneingeschränkt weiterempfehlen?
Links:
Kommentare
Es gibt noch keine Kommentare für diesen Artikel.