Responsive Webdesign galt schon als der Trend des Jahres 2012, aber 2013 wird man als Webdesigner und -Coder nicht mehr darum herum kommen. Zu stark steigt Monat für Monat, Jahr für Jahr die Nutzung von Webseiten auf mobilen Endgeräten wie Handys und Tablets an, um das Thema "One site fits all" noch ignorieren zu können.
Natürlich hält sich hartnäckig die Ansicht, man müsse immer eine eigene Mobil-Version der Webseite erstellen, welche exakt auf die Bedürfnisse des kleinen Gerätes abgestimmt ist, aber mit den neuesten Frameworks steigt die Zahl an realisierbaren Szenarien rapide an. Hier wird nicht nur ein schnell erlernbares CSS/HTML-Gerüst geliefert, sondern meist auch gleich passende Javascript-Erweiterungen für oft benötigte Funktionalitäten wie Tabs, Tooltips, Modal Windows, Accordion, Slider, etc. Eigene Icon-Fonts oder die Möglichkeit mit SASS oder LESS als dynamischer Stylesheet-Sprache zu arbeiten, runden das eh schon stimmige Bild der Responsive Webdesign Frameworks ab.
Alle vorgestellten Frameworks erreichen die optimierte Darstellungen auf verschiedenen Bildschirmgrößen über eine Technik names Media Queries. Hier wird die Bildschirmgröße als Maßeinheit für den aufzurufenden Code-Teil herangezogen und so können über ein einfaches @media only screen and (max-width: 479px) {} CSS-Definitionen nur für Telefone hinterlegt werden. Dadurch können dann z.B. Menü-Leisten umgeschachtelt, Elemente ausgeblendet, verkleinert oder vergössert, oder gänzlich neue Element eingeblendet werden, welche auf Desktops nicht erscheinen sollen. Durch die Kombination mit frei skalierbaren Bildern, Überschriften, Spaltenbreiten, Text, etc. wird dann eine optimierte Darstellungen für jedes Endgerät erreicht.
Hier liegt allerdings auch ein kleiner Nachteil dieser Herangehensweise: Bilder werden immer in der maximalsten Größe ausgeliefert und dann in der Darstellung verkleinert. Dies geht natürlich zu Lasten der Bandbreite des Nutzers und ist bei schmalen Volumentarifen eher von Nachteil. Allerdings gibt es erste Ansätze auch dieses Manko zu beseitigen, das Projekt Adaptive Images geht hier den Weg über PHP und den Apache-Webserver.
Hier eine kleine Zusammenstellung der gängigsten und aktivsten Responsive Frameworks für den alltäglichen Einsatz.
BASE
FOUNDATION
SKELETON
BOOTSTRAP
Dieser Artikel ist schon über 2 Jahre alt. Unter Umständen kann das, worüber wir geschrieben haben durchaus veraltet sein! 😉
montagsSMAC | Projektmanagement und Webdesign
Projekte umsetzen und planen. Das leben wir in unserem Agenturalltag jeden Tag. Und wie immer, wenn verschiedene Menschen dabei zusammenwirken, ist detaillierte Planung das A und O. Nur so können Kreativität voll ausgeschöpft und Ziele erfolgreich erreicht…
Social ABC 2014 | R wie Responsive Webdesign
Responsive Webdesign, was ist das überhaupt? Wie der Name schon sagt, ist das Design dieser Webseiten responsive, also reaktionsfähig: Es verändert sich entsprechend der Eigenschaften des Endgerätes, wie beispielsweise der Bildschirmgröße. Statt mehrerer…
Update: 10 gute Beispiele für Responsive Webdesign
Wir leben in einer Zeit, in der wir nicht mehr nur mit dem Computer surfen, sondern auch mit dem Handy, Tablet oder Notebook mobil unterwegs sind. Die Produktpalette mobiler Devices wächst von Jahr zu Jahr an. Gerade deshalb ist das sogenannte Responsive…
montagsSMAC | Der Webdesign-Trend: Flat Design – Form Follows Function oder ‚Weniger ist mehr’
Wer sich auch am Rande einmal mit der Entstehung von Trends auseinander gesetzt hat, wird schnell fest stellen: Alles folgt einer Wellenbewegung. Oder besser: einer Pendelbewegung. Nach den Karotten-Jeans und Spandex-Hosen kamen die Baggy-Pants und heute…