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! đŸ˜‰