MontagsSMAC | Responsive Webdesign: Base, Bootstrap, Foundation & Skeleton » Social Media Aachen » Blog

MontagsSMAC | Responsive Webdesign: Base, Bootstrap, Foundation & Skeleton

Foundation
04. Februar 2013 | Blog | Social Media Aachen 0

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

Base

SKELETON

Base

FOUNDATION

Base

BOOTSTRAP

Base

Von einigen der vorgestellten Frameworks existieren auch fertige Themes und Templates für WordPress oder Joomla. Rund um Twitters Boostrap hat sich darüberhinaus ein regelrechtes Ökosystem an Erweiterungen heraus gebildet. Hier bekommt man schönere Buttons, fertige Facebook Themes für die App-Entwicklung, Zeit- & Datums-Picker und vieles mehr. Eine kleine Auflistung findet sich hier.

Stephan Kochs

Social Sharing

Leave a reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top
;