Die Bedeutung der mobilen Endgeräte, wie etwa die Tablets oder Smartphones, hat in unserem Alltagsleben in den letzten Jahren immer mehr zugenommen. Gleichzeitig gehören Monitore mit 22 “ oder 27“ Zoll Durchmesser auf unseren Schreibtischen längst zum normalen Bild. Daher ist es kein Wunder, dass auch die Entwicklung von Webseiten durch diesen technologischen Fortschritt beeinflusst wird. So zeigen sich z. B. seit 2012 im Bereich des Web Designs dieser Trend im Responsive Webdesign.
Durch diese spezielle Umsetzung ist es der Webseite möglich, sich perfekt auf die Größe des vorhandenen Endgerätes anzupassen. Auf diese Weise muss nicht erst extra für jedes mobile Endgerät eine eigene Webseite erstellt werden. Natürlich ist der Aufwand bei der Gestaltung und der Konzeption so um einiges größer, jedoch kann diese Zeit bei der technischen Umsetzung wieder eingespart werden. Dabei basieren die responsiven Webdesigns auf eine moderne Kombination von jQuery, HTML5 und CSS3.
Framework – was ist das?
Ein standardisierter Satz von Praktiken, Konzepten und Kriterien, welche beim Umgang mit Problemen zur Anwendung kommen, werden als Framework bezeichnet. Dabei sollen diese Frameworks helfen, beim nächsten Mal mit ähnlichen Problemen deutlich schneller umzugehen. Beim Webdesign findest du ein responsives Framework, wobei es sich hierbei um einen Baukasten handelt, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.
Typische Komponente beim Framework:
- Gridsystem auf CSS Basis mit mehreren Spalten
- Definierte Typography für sämtliche HTML-Elemente
- Fallback-Lösungen und Browser-Kompatibilität für Internet Explorer sowie älteren Browsern
- Standard CSS-Klassen, welche sich durch weiterführende Klassen ergänzen lassen
- javaScript-Bibliotheken sowie jQuery für die Elementen-Animation
Somit stellt das Framework ein Fundament zur Entwicklung und zur Konzeption von Webseiten dar. Auf diese Weise musst du nicht immer von vorne beginnen, wenn du ein neues Projekt entwickeln möchtest. Daher überwiegen beim Einsatz des Framework eindeutig die Vorteile gegenüber einem vollständigen Neuanfang.
Vorteile beim Framework- Einsatz:
- Verfügbarkeit regelmäßiger Updates
- Hilfe und Erfahrungsaustausch über Communities und Foren
- Umsetzung von Best practices
- Zusammenarbeit mit anderen Entwicklern werden dank Standard-Konzepte erleichtert
- Wiederverwertbarkeit für weitere Webseiten
- Mock-up Prozesse sind schneller
- Kombination oder Verzicht mit CMS (Joomla, WordPress, Drupal …) sind möglich
Nachteile beim Framework- Einsatz:
- Flachere Lernkurve, denn nicht alles musst du von Anfang an lernen
- Oftmals kommt es zur Vermischung von Code und Inhalt
Die Top responsive Frameworks
Als vor vielen Jahren das erste CSS-Gridsystem eingesetzt wurde, gehörte das 960 Grid System zu den ersten Systemen, die in diesem Bereich zur Anwendung kamen. Jedoch war dieses CSS-Gridsystem noch sehr weit entfernt von den Möglichkeiten der heutigen Frameworks, wobei es heute etwa 60 unterschiedliche Gridsysteme und Frameworks gibt. Aus dieser Masse an Möglichkeiten wurden nun anhand verschiedener Faktoren die 10 besten Frameworks herausgefiltert. Dabei waren neben der Aktivität der Community, auch der Bereich Tutorials, die persönliche Erfahrung sowie weitere Indikatoren ausschlaggebend für das Ergebnis.
Gleichzeitig werden hier nur Frameworks vorgestellt, welche zur Erstellung von Front-End-User-Interface eingesetzt werden können und aus einer Zusammensetzung von HTML-Dateien, CSS und Javascript bestehen. Somit werden hier nur komplette Frameworks und keine reinen CSS-Grid-Systeme angezeigt.
Twitter Bootstrap
Seit August 2011 befindet sich das Framework Bootstrap auf Github, wobei es von den Twitter-Leuten entwickelt wurde. Dieses System gründet auf einem 12-spaltigem CSS, welches eine Breite ab 750px besitzt. Als Kern für Bootstrap werden HTML, LESS-CSS und jQuery Komponenten eingesetzt. Das Framework Bootstrap enthält viele Oberflächenelemente, Labels, Navigationselemente und Hinweisnachrichten. Während weitere UI-Elemente wie z. B. Tooltips, Carousels oder Dialogfenster, durch ein integriertes jQuery animiert werden.
Des Weiteren stehen für Bootstrap einige sehr gute Tutorials zur Verfügung, umso den Einstieg zu erleichtern. Gleichzeitig kannst du hier WordPress Themes, openCart Themen oder Admin Templates auf Bootstrapbasis erstellen. Kannst du nicht selbst designen, stehen zusätzlich schöne und bereits fertige Template oder Skins zur Verfügung.
Foundation 4
Neben Bootstrap gehört Foundation zu den Frameworks, die am weitesten entwickelt wurden. Dabei ist Foundation ebenso ein Open-Source Projekt, welches durch die digitale Agentur ZURB entwickelt und updated wird. Zur Anwendung kommt hier ein 940px breites CSS-Grid, sowie SASS-CSS Dateien und das Zepto-Javascript (besitzt Ähnlichkeiten mit jQuery).
Zusätzlich sind für Foundation verschiedene Add-ons wie beispielsweise Icon Fonts, fertige Templates, responsive Tablets oder Social Icons verfügbar. Dabei ist dieses Framework ausführlich dokumentiert und so ziemlich einsteigerfreundlich.
YAML 4
Für einen Preis ab 59.50 Euro steht dir dieses kostenpflichtige CSS-Framework für ein Projekt zur Verfügung. Entwickelt wurde dieses Programm vom deutschen Webentwickler Dirk Jesse, wobei YAML auf den Grundlagen HTML, CSS-Grid und jQuery basiert. Während in diesem Framework verschiedene Web-Elemente, wie Buttons, Navigationen, Formulare und Icons mit integriert wurden.
Das Framework YAML 4 besitzt den Vorteil, dass hier in etwa 30 Content Management Systeme, wie z. B. Typo3, Drupal, WordPress oder Joomia einfach integriert werden kann. Ebenso sind spezielle Development Tools vorhanden, die sich besonders für die Frontend-Entwicklung eigenen.
Gumby 2
Dieses Framework ist auf Github erst seit Ende Februar 2013 verfügbar. Trotzdem ist Gumby 2 bereits sehr weit entwickelt, sodass als Basis die Faktoren HTML, SASS-CSS, Modernizr und jQuery-Dateien zum Einsatz kommen. Gleichzeitig findest du hier viele UI-Elemente, die bereits im Flat Design gestaltet wurden. Während dank jQuery sich Gumby über zahlreiche zusätzliche Events und Effekte freuen kann. Daher solltest du dir dieses Newcomer-Framework durchaus merken.
Zum Framework…
Kube
Dieses Open-Source Framework ist ziemlich minimalistisch, wobei bei Kuba HTML, LESS-CSS und Javascript Dateien als Basis zur Anwendung kommen. Vordefinierte Web-Elemente sind in großer Anzahl vorhanden, während diese vollständig in weiß oder schwarz gestaltet wurden. Gleichzeitig bieten die Entwickler von Imperavi durch Redactor einen ziemlich genialen WYSIWYG-Editor an.
GroundworkCSS
Erst Ende Januar 2013 wurde Base von Github als Open Source entwickelt und veröffentlicht, wobei hier ein 960px breiter CSS-Grid zur Anwendung kommt. Gleichzeitig umfasst dieses Framework HTML, LESS-CSS, PSD-Templates und jQuery Dateien. Jedoch sind im Gegensatz zu anderen Programmsystemen nur wenige vordefinierte UI-Elemente verfügbar.
Suche nach dem richtigen Framework
Nun musst du nur noch dein passendes Framework finden. Dabei solltest du wissen, dass sich die verschiedenen Frameworks in den Bereichen Grundumfang und Funktionalität ziemlich ähnlich sind. Du bist trotzdem noch unsicher? Kein Problem, denn diese Checkliste soll dir bei der Suche nach dem passenden Framework helfen.
1. Deine Vorlieben
Such dir ein Framework, welches sich ganz persönlich anspricht. Nimmt daher kein Modell, welches dir auf den 1. und 2. Blick nicht gefällt. Gleichzeitig nutzen einige Frameworks LESS-CSS und andere SASS-CSS. Wähle daher ein Framework, bei dem du dich wohlfühlst und daher auch viel schneller Fortschritte machst.
2. Pflege und Aktualität
Die Entwicklung der Technologie bleibt nicht stehen, daher lass von Frameworks, die bereits seit 3 Monaten nicht mehr gepflegt wurden lieber die Finger. Dank Github ist dies sehr gut zu erkennen, schließlich wird das Datum jeder Dateiänderung sichtbar angezeigt.
3. Wiederverwertbarkeit
Das Beste am Framework ist die Wiederverwertbarkeit für zukünftige Projekte. Daher sollte sich deine Frameworkwahl auch für weitere Projekte eignen.
4. Anpassungsfähigkeit
Du musst an der Gestaltung viele Änderungen vornehmen? Dann nutze gleich einen Framework, der möglichst flexibel ist. Besonders gut eignen sich hierbei Groundwork, Bootstrap oder Gumby. Legst du stattdessen eher Wert auf fertige Templates sind Yaml, Bootstrap oder Foundation eine sehr große Hilfe.
5. Support und Community
Ein besseres Aushängeschild als eine aktive und große Community gibt es für Frameworks nicht. Schließlich stellt eine lebendige Community nicht nur kostenlose Tutorials, sondern ebenso Hilfe und Templates bereit. Gleichzeitig dient dieser Bereich als wichtiger Indikator für die Überlebenschance des Framework, wobei gerade Foundation und Bootstrap hier sehr gut abschneiden.
6. Integration
Heute lassen sich bereits viele Frameworks mit CMS-Systemen, wie z. B. Joomia und WordPress kombinieren. Wie beispielsweise Bootstrap und YAML, die bereits erfolgreich mit verschiedenen CMS kombiniert wurden.
Doch egal, für welches Responsive Framework du dich entscheidest, es ist ratsam, vorab ein kleineres Dummy-Projekt umzusetzen. Schließlich erhältst du so wichtige Erkenntnisse über die Arbeitsweise vom Framework und kannst feststellen, ob sich dieses System für dein eigentliches Projekt eignet.
Besonders zu empfehlen sind z. B. GrundworkCSS, Bootstrap und Gumby. Schließlich lässt sich z. B. Bootstrap gut mit WordPress kombinieren und verfügt über zahlreiche Templates. Während sich Gumby und GrundworkCSS mit ihrem modernen Flat Design gerade für kleinere Projekte gut eignen.
Ein responsive Design muss aber professionell implementiert sein. Ohne Es kann unter Umständen auch zu hässlichen Abbildungen auf anderen Displaygrössen führen.
Hi,
ja da hast du Recht.
Gruß
Mika