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.
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.
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.
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.
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.
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.
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.
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.
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
11 Kommentare. Hinterlasse eine Antwort
[…] Responsive Frameworks beschleunigen die Entwicklung einer responsive Webseite ungemein. Hier sind die besten 10 Frameworks für euch! […]
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
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.
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
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
Hallo Philipp,
Danke für den Tipp :).
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