Frameworks für Responsive Webdesign

responsive Webdesign
Responsive Webdesign ist in einer professionellen Webdesign-Agentur nicht mehr wegzudenken. In den aktuellen Zugriffsstatistiken der meisten Websites dominieren inzwischen die mobilen Besucher. Für die Entwicklung von mobilen Websites empfiehlt es sich daher ein Framework zu verwenden. Doch welches?

Für alle jene, die bei der Entwicklung von mobilen oder responsive Website auf Frameworks vertrauen, möchten wir einen Überblick geben, welche Frameworks aktuell am Markt sind und welche Vor- bzw. Nachteile diese aufweisen:

  1. 320 and Up

    Wie der Name des Frameworks bereits vermuten lässt, wird hier der "Mobile First" Ansatz verfolgt. Das bedeutet man kümmert sich zuerst um die Darstellung der Website auf mobilen Clients und erweitert erst im zweiten Schritt die Formatierungen für größere Bildschirme. Dabei stehen einem fünf Stylesheets zur Verfügung. Im Download ist bereits eine HTML-Datei als Vorlage enthalten. Ebenfalls integriert in diese Vorlage-Datei sind besondere Formatierungen für einzelne IE-Versionen.

    Nützlich für Responsive Webdesign-Entwicklung ist außerdem die Datei "responsive.html". Diese Datei zeigt vor, wie eine ausgewählte Datei in unterschiedlichen Display-Größen aussieht. Eine zweite Datei, names "responsive.php" unterstützt beim Testen der Schriftgröße. 320 and Up ist daher eine gute Projektvorlage und enthält Komponenten aus Bootstrap und Mobile Boilerplate, ohne jedoch vollständige vorgefertigte Layouts zu präsentieren.

    (Link: http://stuffandnonsense.co.uk/projects/320andup)

  2. Boostrap

    Bootstrap ist eines der beliebtesten Frontend-Frameworks. Es stammt ursprünglich vom Twitter-Team und ist besonders für seine vielen Komponenten für schöne Benutzeroberflächen bekannt. Standardmäßig ist Bootstrap nicht für responsive Webdesign bereit. Dies muss erst aktiviert werden, indem in der eigenen HTML-Datei eine Meta-Angabe und ein Verweis auf das entsprechende Stylesheet ergänzt werden muss.

    Nützlich sind auch die beiden Rasterlayout-Versionen, die zum einen auf feste Pixelwerte und zum anderen auf flüssige Rasterlayouts setzen.

    (Link: http://twitter.github.com/bootstrap)

  3. Foundation

    Als Ausgangsbasis verwendet man hier die Datei "index.html". Von den zwei CSS-Dateien ist "foundation.css" das CSS-Herzstück, "app.css" ist hingegen für die eigenen Formatierungen vorgesehen. Zur Anordnung der Inahlte gibt es ein Raster-Framework, das eine Aufteilung in Spalten ermöglicht und wie üblich mit Klassennamen wie column oder eight arbeitet. Foundation sett dabei auf flüssige Angaben, das heißt Werte in Prozent. Wie Bootstrap stellt auch Foundation Klassen zur Verfügung, um Inhalte nur bei bestimmten Viewportgrößen sichtbar zu machen oder zu verbergen.

    (Link: http://foundation.zurb.com)

  4. Skeleton

    Skeleton ist ein weiteres responsive Framework, das neben der Typographie weiters ein fast schon klassisch anmutendes responsives Rasterlayout mitbringt.

    (Link: http://www.getskeleton.com)

  5. Less

    Less hat nichts mit dem gelichnamigen LESS-Präprozessor zu tun. Es ist allerdings kein Framework mit vorgefertigten Datenein, sondern beschreibt eine Idee, wie sich dadaptives Layouts erstellen lassen, die über die verschiedenen Gerätegrenzen hinweg konsistent wirken. Flüssige Angaben sind hier nicht angesagt, vielmehr bleiben die Spaltenelemente bei den verschiedenen Viewports in einheitlicher Größe.

    (Link: http://lessframework.com)

  6. Frameless (Weiterentwicklung von Less)

    Eine Weiterentwicklung von Less stellt Frameless dar, das ebenfalls auf Spalten in einer festen Breite setzt. Die Media Queries orientieren sich hier nciht mehr an gängigen Breiten von Ausgabegeräten (was sie sowieso nicht tun sollten), sondern orientieren sich an den Spalten. Dann kann man beispielsweise überlegen, welche Anpassungen durchgeführt werden sollen, wenn nur X Spalten Platz ist.

    (Link: http://framelessgrid.com)

  7. Pattern-Galerie

    Eindeutig kein Framework, aber von nicht minder großem Nutzen, ist die responsive Pattern-Galerie von Brad Frost, ein Teil seines Projekts "This is responsive": Hier sind Möglichkeiten aufgelistet, gängige Layoutkomponenten responsive zu realisieren.

    (Link: http://bradfrost.github.com/this-is-responsive/patterns.html)