Die 10 besten responsive Frameworks

Mobile Endgeräte wie Smartphones und Tablets werden immer wichtiger in unserem Alltag. Große 22″ oder 24″ Monitore sind auf unseren Schreibtischen inzwischen auch die Norm. Dieser technologische Fortschritt hinterlässt seine Spuren auch bei der Entwicklung von Webseiten. Im Bereich der Web Designs Trends ist das responsive Webdesign seit 2012 ganz klar dem Vormarsch.

Bei dieser speziellen Umsetzung passt sich eine Webseite flexibel an die Größe des jeweiligen Endgeräts an. Dadurch muss nur eine Version der Webseite erstellt werden. Erfahrungsgemäß entsteht dadurch zwar ein Mehraufwand bei der Konzeption und Gestaltung, der bei technischen Umsetzung aber wieder eingespart wird. Repsonsive Webdesigns basiert typischerweise auf der modernen Kombination von HTML5, CSS3 und jQuery.

Was ist ein Framework?

Ein Framework ist ein standardisierter Satz von Konzepten, Praktiken und Kriterien für den Umgang mit einer gewissen Art von Problem. Dieses Framework soll dann helfen ähnliche Probleme zu schneller zu lösen. In Bezug auf Webdesign ist ein responsive Web Framework ein Baukasten mit vorgefertigten, dynamischen Gestaltungselementen.

Typische Komponenten eines Frameworks:

  • Gridsystem mit mehreren Spalten auf Basis von CSS
  • Definierte Typography für alle HTML Elemente
  • Browser-Kompatibilität und Fallback-Lösungen für ältere Browser und den Internet Explorer
  • Standard CSS-Klassen auf die weiterführende Klassen aufgebaut werden können
  • javaScript-Bibliotheken und hier speziell jQuery für die Animation von Elementen

Das Framework stellt somit das Fundament für die Entwicklung und Konzeption eurer Webseite dar. Bei der Entwicklung eines neuen Projekts muss damit nicht jedes Mal von vorne begonnen werden. Generell überwiegen die Vorteile beim Einsatz eines Framework im Vergleich zum kompletten Neuanfang.

Vorteile durch den Einsatz eines Frameworks:

  • Regelmäßige Updates verfügbar
  • Erfahrungsaustausch und Hilfe in Foren und Communities
  • Best practices werden umgesetzt
  • Standard-Konzepte erleichtern die Zusammenarbeit mit anderen Entwicklern
  • Wiederverwertbar für zukünftige Webseiten
  • Schnellere Mock-Up Prozesse
  • Verzicht aber auch Kombination mit CMS (WordPress, Drupal, Joomla, Tumblr…) möglich

Nachteile durch den Einsatz eines Frameworks:

  • Flachere Lernkurve, da nicht alles selbst von Anfang an gelernt werden muss
  • Vermischung von Inhalt und Code – meistens

Die besten responsive Frameworks

Ich habe vor etlichen Jahren zum ersten mal ein CSS-Gridsystem eingesetzt. Das 960 Grid System war damals eins der ersten CSS-Gridsysteme und noch weit entfernt von den jetzigen Frameworks. Bei meiner Recherche für den Artikel bin ich auf etwa 60 verschiedene Frameworks und Gridsysteme gestossen.

Ich habe mir alle Frameworks angesehen aber ein umfangreicher Test war zeitlich nicht möglich. Auf der Basis meiner Erfahrung, Aktivität der Community, Tutorials und weitere Indikatoren habe ich schließlich die besten 10 Frameworks herausgefiltert.

Ich beschränke mich bei der Vorstellung auf Frameworks die zur Erstellung eines Front-End-User-Interface geeignet sind und sich aus CSS, Javascript und HTML-Dateien zusammensetzen. Ich stelle auch nur komplette Web Frameworks vor und verzichte auf reine CSS-Grid-Systeme.

1. Startup Design Framework von Designmodo

Das Startup Design Framework von designmodo ist sicherlich die kompletteste Lösung unter den hier vorgestellten Frameworks. Es wurde speziell für Designer und Entwickler gemacht, um moderne Websites aufzusetzen. Der Name Startup wurde deshalb gewählt, weil Start-Up’s in den USA sehr moderne One-Page Websites haben und sich dieses Framework daran orientiert. Es eignet sich daher bestens um kleine und mittlere Websites aufzusetzen.

In der kostenlosen Version sind 11 Komponenten und 2 Beispiele enthalten. Die Vollversion ist mit 100 Komponenten, 25 Beispielen und 14 Bildern wesentlich umfangreicher. Mit dem integrierten Generator kannst du deine eigene Seite in wenigen Minuten selbst bauen.

Zum Framework

2. Twitter Bootstrap – Web Application Framework

Das responsive Framework Bootstrap wurde von den Leuten bei Twitter entwickelt und ist erst seit August 2011 auf Github. Bootstrap basiert auf einem 12-spaltigem CSS mit einer Breite von 940px. Der Kern des Web Frameworks sind LESS-CSS, HTML sowie jQuery Komponenten. Bootstrap ist sehr umfangreich und enthält sehr viele Oberflächenelemente, Navigationselemente, Labels und Hinweisnachrichten. Weitere UI-Elemente wie, Dialogfenster, Tooltips oder Carousels werden durch das integrierte jQuery animiert.

Für Bootstrap gibt es sehr viele gute Tutorials die den Einstieg enorm erleichtern. Ebenso lassen sich WordPress Themes, Admin Templates oder openCart Themes auf Basis von Bootstrap erstellen. Wer nicht selbst designen kann auch ein fertiges, schönes Skin und Template verwenden.

Zum Framework

3. Foundation 4 – Responsive Framework

Foundation ist inzwischen in der 4. Version und zählt neben Bootstrap zu den am weitesten entwickelten Web Frameworks. Foundation ist genauso wie Bootstrap ein Open-Source Projekt und wird von der digitalen Agentur ZURB entwickelt und updated. Das Web Application Framework basiert auf einem 940 px breitem CSS-Grid, und umfasst SASS-CSS Dateien und Zepto-Javascript (ähnlich wie jQuery).

Für Foundation sind auch eine Reihe von Addons wie z.B. fertiger Templates, Icon Fonts, Social Icons oder responsive Tables verfügbar. Das responsive Framework ist sehr einsteigerfreundlich und ausführlich dokumentiert.

Zum Framework

4. YAML 4 – Modulares CSS Framework

Yaml ist ein kostenpflichtiges CSS-Framework und ist ab 59 Euro inklusive Steuer für ein Projekt zu haben. Das Web Framework wurde von dem deutschen Webentwickler Dirk Jesse entwickelt. Yaml basiert auf einem CSS-Grid, HTML und jQuery. Im responsive Framework sind viele Web-Elemente wie Formulare, Buttons, Icons und Navigationen bereits definiert.

Der große Vorteil bei YAML ist die einfach Integration in über 30 Content Management Systeme wie WordPress, Typo3, Joomla oder Drupal. Ein weiteres Highlight sind die vorhandenen Development Tools, die speziell für die schnelle Frontend-Entwicklung konzipiert sind.

Zum Framework

5. Gumby 2 – Responsive CSS Framework

Gumby 2 ist ein neues responsive Web Framework und existiert erst seit Ende Februar 2013 auf Github. Gumby 2 ist dennoch bereits sehr weit entwickelt und basiert auf SASS-CSS, HTML, jQuery-Daten und Modernizr. Bei Gumby sind extrem viele UI-Elemente vorhanden, und bereits im modernen Flat Design gestaltet. Das eingebaute jQuery erweitert das Web Framework um zahlreiche Effekte und Events. Dieses Newcomer-Framework sollte man sich merken. Ich werde es bei einem meiner nächsten Projekte verwenden und testen.

Zum Framework

6. Kube – Professionelles CSS Framework

Das Open-Source CSS Framework Kube ist sehr minimalistisch. Kube basiert auf LESS-CSS, HTML und Javascript Dateien. Die Anzahl an vordefinierten Web-Elementen ist groß, und diese sind komplett neutral in schwarz und weiß gestaltet. Die Entwickler von Imperavi bieten mit Redactor auch einen genialen WYSIWYG-Editor an.

Zum Framework

7. GroundworkCSS – Einfaches Web CSS Framework

Das responsive CSS Framework GroundworkCSS wurde erst Ende Januar 2013 auf Github veröffentlicht. GroundworkCSS basiert auf SASS-CSS, HTML, jQuery und Modernizr. Das CSSFramework ist extrem umfangreich und liefert unter anderm responsive Text, massig UI-Elemente und jQuery-Slider. Die vorgefertigten Templates und Dokumentation erleichtern den Einstieg bei Groundwork.

Zum Framework

8. BASE – Simple Responsive Framework

Das responsive Framework Base ist Open Source und wird seit August 2012 auf Github veröffentlicht und entwickelt. Die Grundlage von Base ist ein 960 px breiter CSS-Grid. Das Web Framework umfasst PSD-Templates, LESS-CSS, HTML und jQuery Dateien. Im Vergleich zu den anderen Web Frameworks stehen relativ wenig vordefinierte UI-Elemente zur Verfügung.

Zum Framework

Weitere responsive Frameworks

Neben den hier vorgestellten 7 responsive Frameworks möchte ich 3 weitere Web Frameworks erwähnen. Die beiden Frameworks Wirefy und tuktuk sind etwas mit Vorsicht zu geniessen. Beide Web Application Frameworks sind kostenpflichtig und haben etwas merkwürdige Copyright-Bestimmungen.

  • 9. Wirefy – kein Open Source Web Framework. Wird unter der CC BY 3.0 lizensiert und wird aktuell auf Github gepflegt.
  • 10. tuktuk – kein Open Source Web Framework. Wird unter der GPLv3 und einer kommerziellen Lizenz auf Github veröffentlicht.
  • 11. Skeleton – Eines der ersten responsive Boilerplates. Wird zur Zeit leider nicht mehr gepflegt.

Welches ist das richtige Framework für mich?

Jetzt gilt es nur noch das richtige Web Framework für sich selbst zu finden. Alle Frameworks sind im Grundumfang und Funktionalität sehr ähnlich und unterscheiden sich nicht dort kaum. Ich habe eine kurze Checkliste zusammengestellt, die euch helfen soll das richtige Framework für euch zu finden.

1. persönliche Vorlieben

Das Framework sollte euch persönlich ansprechen. Gefällt euch ein Framework auf den 1. und auch 2. Blick nicht, lasst am besten gleich die Finger davon. Manche Frameworks verwenden SASS-CSS andere wiederum LESS-CSS. Wählt ein Web Framework bei dem ihr euch wohl fühlt und schnelle Fortschritte macht.

2. Anpassungsfähigkeit

Wenn ihr viele Änderungen an der Gestaltung vornehmen müsst, solltet ihr euch für ein möglichst flexibles Web Framework entscheiden. Hier würde ich Bootstrap, Gumby oder Groundwork empfehlen. Wer gerne fertige Templates verwendet kann auf Bootstrap, Foundation oder Yaml zurückgreifen.

3. Aktualität & Pflege

Die technologische Entwicklung schreitet schnell voran. Sollte eine Web Framework bereits seit mehr als 3 Monaten nicht mehr gepflegt werden, würde ich nicht mehr darauf zurückgreifen.  Bei den Web Application Frameworks auf Github sieht man wann zuletzt Änderungen an den Dateien vorgenommen wurden.

4. Community & Support

Eine große, aktive Community ist das beste Aushängeschild für ein Web Framework. Eine lebendige Community stellt kostenlose Tutorials, Templates und Hilfe für euch bereit. Es ist auch der beste Indikator dafür, dass dieses Framework langfristig überleben wird. Hier sind Bootstrap und Foundation die Vorreiter.

5. Wiederverwertbarkeit

Euer Ziel sollte es sein, dass Framework auch bei zukünftigen Projekten einzusetzen. Daher rate ich euch ein Framework zu wählen, dass auch für zukünftige Projekte geeignet ist.

6. Integrations in andere Systeme

Viele Web Frameworks lassen sich mit CMS-Systemen wie WordPress oder Joomla kombinieren. Die beiden responsive Frameworks YAML und Bootstrap wurden bereits erfolgreich mit diversen CMS kombiniert und sind besonders dafür geeignet.

Bevor ihr euch für ein Web Framework endgültig entscheidet und in einem größeren Projekt verwendet, ist es sinnvoll ein kleineres Dummy-Projekt umzusetzen. In dem Projekt zeigt sich dann, ob das Framework endgültig für euch geeignet ist.

Meine persönlichen Favoriten aus den vorgestellten Web Application Frameworks sind Bootstrap, GroundworkCSS und Gumby. An Bootstrap gefällt mir, dass es sich sehr gut mit WordPress kombinieren lässt und viele fertigte Templates verfügbar sind. GroundworkCSS und Gumby sind beide in modernem Flat Design und gut für kleine Projekte geeignet.

Titelbild: foundation.zurb.com

Related Articles

  • Pingback: Die 10 besten responsive Frameworks | JavaScrip...()

  • Tayfun

    Hallo Tobias,

    erst einmal vielen Dank dür deine zahlreichen Tipps und Hilfestellungen.
    Ich würde gerne einen der genannten Frameworks installieren. Nur klappt das nicht so recht. Bin halt sehr Frsich in diesen Themen.
    Kannst du mir einige Tipps zum umsetzen der Installation geben?

    Würde mich sehr freuen.

    Gruß,
    Tayfun!

    • Hallo Tayfun,

      Welche Framework möchtest du denn verwenden? Und hast du schon Erfahrungen mit Programmierung und Webseiten?

      Gruß Tobias

  • Thomas Fischer

    Hallo Tobias, ich beschäftige mich seit einigen Wochen mit dem Thema responsives Webdesign, da ich gerne unser Webprojekt neu gestalten lassen möchte. Bis jetzt hatte ich überlegt ein fertiges Theme zu benutzen. Da gibt es ja wirklich tolle Layouts bei den verschiedensten Anbietern. Aber so richtig glücklich bin ich mit den auf cms basierten Lösungen nicht. Kann man so ein Responsives Layout nachbauen, sprich ohne cms und an unsere Bedürfnisse anpassen/erweitern? Bietest du so etwas an, oder kannst Du mir jemanden empfehlen an den ich mich wenden kann.

  • chrissie

    danke für die tollen tipps. hat mir extrem weiter geholfen. 🙂

  • Danke für deinen Überblick und eine kleine Ergänzung: YAML kann mit einem Backlink kostenlos genutzt und für 119 Euro gibt es eine „General Licence“ für beliebig viele Projekte: http://www.yaml.de/license.html

  • Hallo,

    wie erstellt man ein responsive design (rd) E-Mail Newsletter?

    Am besten sollten auch noch embedded Images möglich sein.

    Wir verschicken unsere E-Mail Newsletter aus unserer eigenen Inhouse Software heraus direkt an unsere Provider.

    Gibt es für E-Mails auch ein passendes rd Framework?

    Kann man die hier besprochenen Frameworks auch für E-Mail Newsletter verwenden?
    So wie ich das verstehe, benutzen diese alle JavaScript.
    Ich denke die meisten E-Mail Programme akzeptieren kein JavaScript, oder?

    E-Mails müssen soweit ich weiß leider rudimentärer mit HTML und CSS umgehen.

    Kennt sich jemand damit aus und kann mir gute Tipps und Links für den Einstieg geben?

    Besten Dank.

    Rene

    • Hallo Rene,

      Google einfach mal nach „responsive newsletter“. Da findest du paar gute Informationen, wie z.B. den Artikel von der t3n. Ich selbst habe jetzt noch keinen Newsletter responsive aufgebaut.

      Gruß Tobias

  • Philipp

    Hallo Tobias,

    bitte bitte bitte: bei der nächsten Liste die ihr erstellt guckt bitte, dass die Bilder der besprochenen Tools auf die entsprechenden Seiten verlinken und nicht auf eine größere Version des Bildes. Thx

  • wolf

    Hallo Tobias,
    warum ist YUI nicht unter den genannten CSS-Frameworks? Es scheint – aus meiner Sicht – allen gestellten Anforderungen zu genügen.

    Viele Grüße
    Wolf