Responsive Webdesign galt schon als der Trend des Jahres 2012, aber 2013 wird man als Webdesigner und –Coder nicht mehr darum herum kom­men. Zu stark steigt Monat für Monat, Jahr für Jahr die Nutzung von Webseiten auf mobi­len Endgeräten wie Handys und Tablets an, um das Thema »One site fits all« noch igno­rie­ren zu kön­nen.
Natürlich hält sich hart­nä­ckig die Ansicht, man müsse immer eine eigene Mobil-Version der Webseite erstel­len, wel­che exakt auf die Bedürfnisse des klei­nen Gerätes abge­stimmt ist, aber mit den neu­es­ten Frameworks steigt die Zahl an rea­li­sier­ba­ren Szenarien rapide an. Hier wird nicht nur ein schnell erlern­ba­res CSS/HTML-Gerüst gelie­fert, son­dern meist auch gleich pas­sende 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 dyna­mi­scher Stylesheet-Sprache zu arbei­ten, run­den das eh schon stim­mige Bild der Responsive Webdesign Frameworks ab.

Alle vor­ge­stell­ten Frameworks errei­chen die opti­mierte Darstellungen auf ver­schie­de­nen Bildschirmgrößen über eine Technik names Media Queries. Hier wird die Bildschirmgröße als Maßeinheit für den auf­zu­ru­fen­den Code-Teil her­an­ge­zo­gen und so kön­nen über ein ein­fa­ches @media only screen and (max-width: 479px) {} CSS-Definitionen nur für Telefone hin­ter­legt wer­den. Dadurch kön­nen dann z.B. Menü-Leisten umge­schach­telt, Elemente aus­ge­blen­det, ver­klei­nert oder ver­gös­sert, oder gänz­lich neue Element ein­ge­blen­det wer­den, wel­che auf Desktops nicht erschei­nen sol­len. Durch die Kombination mit frei ska­lier­ba­ren Bildern, Über­schrif­ten, Spaltenbreiten, Text, etc. wird dann eine opti­mierte Darstellungen für jedes Endgerät erreicht.

Hier liegt aller­dings auch ein klei­ner Nachteil die­ser Herangehensweise: Bilder wer­den immer in der maxi­mals­ten Größe aus­ge­lie­fert und dann in der Darstellung ver­klei­nert. Dies geht natür­lich zu Lasten der Bandbreite des Nutzers und ist bei schma­len Volumentarifen eher von Nachteil. Allerdings gibt es erste Ansätze auch die­ses Manko zu besei­ti­gen, das Projekt Adaptive Images geht hier den Weg über PHP und den Apache-Webserver.

Hier eine kleine Zusammenstellung der gän­gigs­ten und aktivs­ten Responsive Frameworks für den all­täg­li­chen Einsatz.

BASE

SKELETON

FOUNDATION

BOOTSTRAP

Von eini­gen der vor­ge­stell­ten Frameworks exis­tie­ren auch fer­tige Themes und Templates für WordPress oder Joomla. Rund um Twitters Boostrap hat sich dar­über­hin­aus ein regel­rech­tes Öko­sys­tem an Erweiterungen her­aus gebil­det. Hier bekommt man schö­nere Buttons, fer­tige Facebook Themes für die App-Entwicklung, Zeit– & Datums-Picker und vie­les mehr. Eine kleine Auflistung fin­det sich hier.

Stephan Kochs