Täglich erscheinen neue Smartphones und Tablets mit einem auffälligen Merkmal: Alle weisen sie verschiedene Auflösungen auf. Eine pure Herausforderung für alle Webentwickler. Denn „klassische“ Websites sind üblicherweise auf Auflösungen herkömmlicher Endgeräte wie Desktop-PCs und Laptops ausgelegt. Auf Smartphone, Tablet & Co sind solche Seiten oftmals nur sehr schwer und mit vielen Wischgesten und hohen Zoom-Aufwand surfbar. Oftmals geht das Layout sogar komplett verloren.
Wie funktioniert Responsive Webdesign? Ein kurzer Überblick!
Im Grunde wird die Anpassung an diverse Auflösungen lediglich via CSS erreicht, allerdings aber erst ab CSS3. Dieser Standard existiert zwar schon seit einigen Jahren, wird aber erst jetzt von allen gängigen Browsern weitgehend unterstützt.
Die Grundlage bildet ein flexibles Seitenlayout. Alle Content-Bereiche der Site werden so angeordnet, dass sie an diverse Auflösungen angepasst werden können: 3-spaltige Texte in großen Auflösungen werden zu 1-spaltigen Texten bei den kleinsten Auflösungen, horizontal nebeneinanderliegende Menüleisten werden zu horizontal aufgelisteten Menüpunkten, kleine Fontgrößen werden bei niedrig-auflösenden Endgeräten größer dargestellt, usw.
Erreicht wird dies im Wesentlichen durch sogenannte „Media Queries“, hier nur ein Beispiel:
@media screen and (orientation:portrait) and (max-width:480px) {
// alle Styles für typische Tablets Auflösungen (z.B 800 x 480) ...
}
Solche Media Queries werden dann üblicherweise für 3 bis 4 Auflösungsgruppen (Desktop, Tablet, Smartphone, Television) implementiert. Eine wirklich gute Einführung zum Thema Responsive Webdesign habe ich im Blog von Sladana Punzenberger gefunden.
Responsive Webdesign sollte meiner Meinung nach nicht nur für neue Websiten eingesetzt werden. Mit überschaubarem Aufwand können so auch bestehende Web-Auftritte für alle moderenen Endgeräte fit gemacht werden.
Ist doch wirklich cool, oder?
