Entscheidungskriterien für Responsive Front-End Frameworks aus Sicht von Front-End Entwicklern PHILIPP RICHTER Hochschule für angewandte Wissenschaften Würzburg-Schweinfurt, Würzburg Der steigende Marktanteil von mobilen Endgeräten und der damit einhergehende Wandel des Nutzungsverhaltens erzwingt das Umdenken von einer statischen hin zu einer responsiven Websitegestaltung. Aufgrund der Komplexität der noch jungen Technologie des Responsive Webdesigns sowie mangelnder Kenntnisse der Front-End Entwickler bietet sich der Einsatz eines Responsive Front-End Frameworks an. Aufbauend auf eine Übersicht aktuell empfohlener Frameworks aus Entwicklersicht, werden Kriterien eruiert, anhand derer Front-End Entwickler eine bewusste und reflektierte Entscheidung für ein Framework treffen können. Zusätzliche Schlüsselwörter: Front-End Entwicklung, mobile-friendly, Responsive Webdesign, Mobile First, Desktop First, CSS-Front-End Frameworks (Bootstrap Framework, Foundation Framework, Skeleton Framework, UIKit Framework, Startup Framework), Entscheidungskriterien (Features, Support, Verbreitung, Community, Dokumentation, Customizing, Preis, Lizenz)
1 AUSGANGSSITUATION Mobile Endgeräte nehmen einen immer größer werdenden Stellenwert in unserem Alltag ein. Die Zahl der Nutzer steigt ebenso rasant an, wie die Zahl der unterschiedlichen Geräteklassen und Bildschirmgrößen. Die Menge der Personen, die das Internet auf mobilen Endgeräten wie Smartphones oder Tablets nutzt, betrug bereits im Jahr 2013 1,91 Milliarden und nimmt seither stetig zu [eMarketer 2015]. Allein in Deutschland gingen im Jahr 2014 bereits 63% aller Internetnutzer mobil ins Netz. Im Jahr 2013 waren es noch 51% [Statistisches Bundesamt 2014]. Ein Großteil der bestehenden Internetauftritte ist für die mobile Internetnutzung allerdings nicht optimiert und kann folglich dem rasanten Nutzeranstieg nicht gerecht werden. Durch Unleserlichkeit und unnötiges Scrollen leidet die Benutzerfreundlichkeit ebenso, wie das Benutzererlebnis. Die Webentwickler stehen folglich vor neuen Herausforderungen und zugleich auch Problemen. Das Layout einer Website muss ein reaktionsfähiges Design besitzen und der Inhalt sollte so aufbereitet sein, dass er sich möglichst ansprechend präsentiert und frei zugänglich ist. Diesen Anforderungen kann man mittels responsivem Webdesign gerecht werden. So empfiehlt auch der Suchmaschinenriese Google Webseitenbetreibern, ihre Websites zügig auf Responsive Webdesign umzugestalten und für mobile Endgeräte zu optimieren. Seit dem 21. April 2015 gilt der Faktor „mobile-friendly“ als Ranking-Signal [Makino und Phan 2015]. Das bedeutet, dass Websites, die kein optimiertes Webdesign für Mobilgeräte aufweisen, im Ranking verlieren und deren Inhalte in den Suchergebnissen schlechter positioniert werden. Selbst das Wirtschaftsmagazin Forbes weist Unternehmen auf die Dringlichkeit hin, ihre Internetauftritte reaktionsfähig zu gestalten und somit für die Zukunft zu rüsten [Gunelius 2013].
Adresse des Autors: Philipp Richter Hochschule für angewandte Wissenschaften Würzburg-Schweinfurt Würzburg, Deutschland Die Erlaubnis zur Kopie in digitaler Form oder Papierform eines Teils oder aller dieser Arbeit für persönlichen oder pädagogischen Gebrauch wird ohne Gebühr zur Verfügung gestellt. Voraussetzung ist, dass die Kopien nicht zum Profit oder kommerziellen Vorteil gemacht werden und diese Mitteilung auf der ersten Seite oder dem Einstiegsbild als vollständiges Zitat erscheint. Copyrights für Komponenten dieser Arbeit durch Andere als FHWS müssen beachtet werden. Die Wiederverwendung unter Namensnennung ist gestattet. Es andererseits zu kopieren, zu veröffentlichen, auf anderen Servern zu verteilen oder eine Komponente dieser Arbeit in anderen Werken zu verwenden, bedarf der vorherigen ausdrücklichen Erlaubnis.
Seminararbeit, SS 2015
Seite 2
Philipp Richter
Um auf diese aktuellen Forderungen zu reagieren, bedarf es einer handhabbaren und zügigen Umsetzungsmöglichkeit. Es empfiehlt sich für Front-End Entwickler der Einsatz eines Responsive Front-End Frameworks. Aufbauend auf ein grundlegendes Verständnis des Responsive Webdesigns wird der Begriff des Frameworks erklärt. Im ersten Teil einer Umfrage werden aktuell empfohlene Frameworks aus Entwicklersicht ermittelt und in dieser Arbeit vorgestellt. In einem zweiten Teil sollen diese Empfehlungen begründet werden. Hierfür bietet sich der Gebrauch von Kriterien an, anhand derer Entwickler eine bewusste und reflektierte Entscheidung für ein Framework treffen können. 2 RESPONSIVE WEBDESIGN Der Begriff Responsive Webdesign kommt aus dem Englischen und bedeutet frei übersetzt “reaktionsfähiges Webdesign”. Dies bedeutet, dass sich Inhalt und Struktur einer Website an die Bildschirmauflösung des jeweiligen mobilen Endgerätes eines Benutzers anpassen. Geprägt wurde der Ausdruck durch den amerikanischen Webdesigner Ethan Marcotte, welcher diesen erstmals im Jahr 2010 in einem bei “A List Apart” erschienenen Artikel erwähnte [Marcotte 2010]. Inspiriert wurde er dazu durch einen Teilbereich der Architektur namens “Responsive Architecture”. Dieser setzt sich zum Ziel, reaktionsfähige Gebäude zu kreieren, welche in der Lage sind auf äußere Einflüsse zu reagieren. Marcotte übertrug diese Denkweise auf das Webdesign und etablierte damit einen festen Begriff ([Zillgens 2013] S.7-8). Im Folgenden soll geklärt werden, wozu Responsive Webdesign gebraucht wird, welche zentralen Elemente es ausmachen und in welche beiden Denkansätze es zu unterteilen ist. 2.1
Wozu Responsive Webdesign?
Mit Hilfe des responsiven Designansatzes kann eine bisher statische Website um reaktionsfähige und flexible Funktionalitäten erweitert werden. Sie gerät dadurch in die Lage, auf die zunehmende Anzahl der verschiedenen webfähigen Endgeräte und den damit einhergehenden unterschiedlichen Bildschirmgrößen adäquat zu reagieren (siehe Abbildung 1). Layout, Bilder, Navigationselemente, eingebundene Medien et cetera passen sich flexibel an die Auflösung der Endgeräte an, was die Benutzerfreundlichkeit sowie das Benutzererlebnis nachhaltig positiv beeinflussen und die Nutzergruppen optimal bedient. Eine einmalig gestaltete Website passt sich also optimal an alle Endgeräte an.
Ethan Marcotte nennt drei grundlegende Elemente, die ein reaktionsfähiges Webdesign ausmachen [Marcotte 2011]: • • •
ein flexibles Gestaltungsraster flexible Bilder und Medien Media Queries, ein Modul aus der CSS3-Spezifikation
Das Gestaltungsraster, auch Grid-System genannt, stellt die Grundlage einer Webseite dar. Es besteht aus mehreren flexiblen Spalten. Diese bestehen wiederum aus Boxen, welche mit unterschiedlichen Inhalten befüllt werden können. Ein reaktionsfähiges Gestaltungsraster zeichnet sich dadurch aus, dass es eigenständig auf seine Umgebung reagiert und seine Inhalte dementsprechend anpasst. Bei den Inhalten kann es sich um Texte, Bilder, Videos und andere Medien handeln. Sie befinden sich innerhalb des Grid-Systems und müssen flexibel auf dieses reagieren, sowie ihre Eigenschaften der Situation entsprechend anpassen. Man sollte sich vorher grundlegend überlegen, ob und welche Elemente man ausblenden, aus dem Dokument entfernen, temporär verstecken oder mitskalieren möchte. Bei den Media Queries handelt es sich um ein Modul der CSS3 Spezifikation des W3C. Dieses liegt aktuell in Version 4 vor. Mit dessen Hilfe lassen sich diverse User Agents und Endgeräte identifizieren. Dank vordefinierter Stellen, sogenannter Breakpoints, kann das Layout der Website auf Veränderungen reagieren und sich automatisch an die Umgebung anpassen [Rivoal und Atkins Jr. 2015]. 2.3
Ansätze
Responsive Webdesign lässt sich grundlegend in zwei Ansätze unterteilen, nämlich in Mobile First und Desktop First. Der Begriff Mobile First, zum Teil auch Content First genannt, wurde durch den Webdesigner Luke Wroblewski geprägt [Wroblewski 2011]. Bei diesem Denkansatz wird der Fokus, zu Beginn der Entwicklung, auf mobile Endgeräte gelegt. Eine Website wird somit zuerst für mobile Geräte mit überwiegend kleinen Bildschirmen entwickelt und im Laufe des Entwicklungsprozesses für stationäre Geräte mit größeren Bildschirmen optimiert. Der Schwerpunkt wird auf die Inhalte und weniger auf das Design gelegt ([Zillgens 2013] S.81). Im Gegensatz dazu steht der designorientierte Ansatz Desktop First. Hierbei stehen im Mittelpunkt der Entwicklung die großen Bildschirme. Erst im weiteren Verlauf werden Anpassungen für kleinere Bildschirmgrößen vorgenommen. Dieser Ansatz ist eher dafür geeignet, bereits bestehende und statische Websites hinsichtlich ihrer Reaktionsfähigkeit und Flexibilität zu erweitern. Der aktuelle Trend geht in Richtung des Mobile First Ansatzes [Zaglov 2014]. Als Entwickler müsste man, um all diesen Anforderungen des Responsive Webdesign gerecht zu werden, eine eigene Lösung programmieren. Dies stellt eine enorme Hürde dar, welche der Einsatz eines Frameworks nehmen soll. 3 FRAMEWORKS 3.1
Was ist ein Framework?
Ein Framework ist, per Definition des Awwwards-Team, „a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature” [Awwwards-Team
Seminararbeit, SS 2015
Seite 4
Philipp Richter
2015]. Das bedeutet frei übersetzt: Ein standardisierter Satz von Praktiken, Konzepten und Kriterien, der gemeinsame Probleme lösen soll und aufkommende ähnliche Schwierigkeiten für den Anwender begreifbar macht. Da sich diese Arbeit ausschließlich mit Webtechnologien beschäftigt, muss der Begriff Framework spezifiziert werden. Ein Front-End Framework, auch CSS-Framework genannt, ist ein Paket, welches aus Ordnern und Dateien besteht und den Entwickler bei der Front-End Entwicklung unterstützt. Üblicherweise handelt es sich bei den Dateien um HTML-, CSS- und Javascript-Dateien, welche standardisierten Code beinhalten. Folgende Bestandteile charakterisieren ein Front-End Framework: • • • •
ein CSS-basiertes Gestaltungsraster, bestehend aus frei justierbaren Spalten vordefinierte typographische Eigenschaften für HTML-Elemente Cross-Browser-Kompatibilität und Fallback-Lösungen vordefinierte CSS-Klassen, welche überschrieben und erweitert werden können [Awwwards-Team 2015]
Darauf aufbauend werden Responsive Front-End Frameworks um responsive Eigenschaften und Fähigkeiten erweitert, um Design, Funktion und Inhalt einer Website an die Bildschirmauflösung des jeweiligen mobilen Endgeräts anzupassen. 3.2
Wozu ein Framework?
Immer mehr Webseitenbetreiber erkennen die Notwendigkeit des Responsive Webdesign für die Reichweite, die Benutzerfreundlichkeit und den Umsatz ihres Internetauftrittes. Die Umwandlung einer bestehenden Website in eine responsive Website gestaltet sich allerdings komplizierter als angenommen. Die Technologie ist noch jung und für Neueinsteiger komplex. Abhilfe schafft hier ein Framework. Je nach gewünschtem Leistungsumfang unterscheidet man grundsätzlich zwischen “einfachen” und “kompletten” Frameworks. Welches Framework gewählt wird, hängt vom Einsatzzweck und dem entsprechenden Business Case ab. Die Frage nach dem “Wozu” eines Frameworks lässt sich pauschal damit beantworten, dass Webseitenbetreibern die Hürde genommen werden soll, ihre bestehende Website in eine responsive Website umzuwandeln. Das Fundament hierfür stellt das Framework dar. Im Folgenden sollen wesentliche Vorteile in aller Kürze benannt werden: Die bereitgestellte Codebasis zeichnet sich durch eine klare Strukturierung, Cross-Browser-Kompatibilität und Wiederverwendbarkeit aus. Diese basiert auf Best-Practices und richtet sich nach modernen Webstandards. Dank standardisierten Konzepten wird die Kollaboration zwischen Entwicklern erleichtert und damit der Entwicklungsprozess beschleunigt [Awwwards-Team 2015]. Zusammenfassend lässt sich sagen, dass der Einsatz eines Frameworks zur Erschaffung responsiver Websites „kein Trend [ist,] sondern Zukunft“ [Wahab 2014]. 3.3
Empfohlene Front-End Frameworks
Derzeit findet sich eine Vielzahl an Frameworks auf dem Markt. Welche Frameworks aus Entwicklersicht allerdings geeignet sind, lässt sich bisher keiner repräsentativen Studie entnehmen. Auch Diskussionen in Entwicklerforen und –blogs lassen keine eindeutige Empfehlung zu. Daher wurde eine Umfrage über soziale Medien, telefonische und persönliche Gespräche gestartet, in der sechs Front-End Entwickler aus Berlin, Nürnberg und Würzburg hinsichtlich ihres Nutzungsverhaltens befragt wurden. Die Entwickler sind als Freelancer oder Front-End Entwickler in Start-Ups, kleinen mittelständlischen Unternehmen oder Großunternehmen tätig. Die Umfrage basiert auf zwei Schwerpunkten, der Empfehlung und der Auswahlkriterien. Die Auswahlkriterien werden in Kapitel 4 betrachtet. An dieser Stelle soll der
Seminararbeit, SS 2015
Seite 5
Philipp Richter
erste Schwerpunkt mit der Frage “Welche von dir getesteten Responsive Front-End Frameworks würdest du weiterempfehlen?” beleuchtet werden. Die Befragten sollten sich auf maximal drei Frameworks beschränken und sie hinsichtlich der Priorität ordnen. Die rückgemeldeten Antworten sind der folgenden Tabelle überblicksartig zu entnehmen. Sie soll dem Interessierten einen ersten Überblick über aktuell gefragte und für Entwickler relevante Front-End Frameworks geben.
Entwickler
Priorität 1
Priorität 2
Priorität 3
1
Bootstrap
Foundation
YAML
2
HTML5 Boilerplate
Skeleton
Eigene Lösung
3
UIKit
Bootstrap
Skeleton
4
Bootstrap
Startup Framework
Foundation
5
Foundation
Bootstrap
UIKit
6
Bootstrap
Ionic
Startup Framework
Die fünf am häufigsten empfohlenen Frameworks werden im Folgenden kurz vorgestellt. 3.3.1
Bootstrap
Bootstrap wurde Mitte 2010 bei Twitter von dem Designer Mark Otto und dem Entwickler Jacob Thornton erfunden. Bis zu seiner Veröffentlichung im August 2011 wurde es vor allem als firmeninterner Style-Guide für die interdisziplinäre Zusammenarbeit bei der Entwicklung von Anwendungen verwendet. Bootstrap verfolgt den Mobile First Ansatz und besteht im Kern aus modular aufgebauten HTML-, LESS/CSS - und Javascript-Dateien. Es bringt eine Vielzahl an vordefinierten Klassen, wiederverwendbaren Komponenten und ausgewählten jQuery Plugins mit. SASS wird ebenfalls unterstützt. Bootstrap stellt wesentliche Templates zur Verfügung, mit deren Hilfe rasch Prototypen für Projekte aufgesetzt werden können. Es liegt aktuell in Version 3 vor, wird über GitHub bereitgestellt und aktiv weiterentwickelt [Twitter, Inc 2015]. 3.3.2
Foundation
Das Foundation Framework wurde im Oktober 2011 vom Unternehmen ZURB zum Leben erweckt. Dieses Unternehmen wurde im Jahr 1998 vom Produktdesigner Bryan Zmijewski unter dem Namen ZB Design gegründet. Seither ist fest am Markt etabliert und bietet umfangreiche Dienstleistungen im Bereich des Produktdesigns an. Außerdem wurden diverse nützliche und hilfreiche Tools und Plattformen für Unternehmen, wie beispielsweise “Notable”, “Ink” oder auch das erweiterte Framework “Foundation for Apps”, von ZURB entwickelt. Foundation ist “mobilefriendly” und folgt dem Mobile First Ansatz. Im Kern besteht es aus modular aufgebauten HTML-, SASS/CSS - und Javascript-Dateien. LESS wird bewusst nicht unterstützt. Dank vordefinierer Styles, Komponenten, Plugins und vorgefertigter Templates können Websites und Web-Apps innerhalb kürzester Zeit erstellt werden. Foundation liegt aktuell in Version 5 vor und wird aktiv weiterentwickelt. Es unterliegt der Open-Source MIT-Lizenz [Zurb Inc. 2015].
Seminararbeit, SS 2015
Seite 6
3.3.3
Philipp Richter
UIkit
UIkit wurde im Jahr 2013 veröffentlicht und stammt vom Hamburger Unternehmen YOOtheme. Es ist leichtgewichtig, modular aufgebaut und folgt ebenfalls dem Mobile First Ansatz. Das Framework ist sehr umfangreich und umfasst mehrere nützliche und durchdachte CSS- und Javascript-Komponenten. Durch spezielle Attribute können HTML-Elemente mit JavascriptFunktionalität ausgestattet werden. Die Benutzerdokumentation ist übersichtlich und klar strukturiert. Mit Hilfe des Theme-Generators lassen sich eigene CSS-Themes nach Belieben erstellen und direkt herunterladen. Die CSS-Präprozessoren LESS und SASS werden unterstützt. UIKit liegt derzeit in Version 2 vor und wird aktiv weiterentwickelt. Es unterliegt der Open-Source MIT-Lizenz [Yootheme GmbH 2015]. 3.3.4
Skeleton
Das responsive Skeleton Framework wurde von Dave Gamache entwickelt. Dabei handelt es sich, seiner Aussage nach, eher um ein responsives Boilerplate als ein UI-Framework. Es ist sehr schlank und leichtgewichtig und umfasst lediglich drei primäre Dateien: eine vorstrukturierte HTML-Datei für den Start sowie zwei CSS-Dateien. Diese setzen bestehende Browservorgaben zurück und bringen vordefinierte CSS-Klassen für ein minimales Design sowie UI-Elemente mit. Skeleton unterstützt eine Vielzahl von modernen und älteren Browsern und kann, dank Erweiterungen der Community, mit LESS und SASS verwendet werden. Es liegt derzeit in Version 2 vor und wird nur sporadisch weiterentwickelt. Skeleton unterliegt der Open-Source MITLizenz [Gamache 2014]. 3.3.5
Startup Framework
Hinter dem Startup Framework stecken die kreativen Köpfe der New Yorker Designschmiede Designmodo. Im Mittelpunkt steht das Design. Fokussiert werden junge Unternehmen, die ohne viel Aufwand und Zeitverlust perfekte Websites erstellen wollen. Das Besondere an diesem Framework ist, dass sich mit Hilfe eines Baukastens verschiedene Komponenten und vorgefertigte Blöcke per Drag und Drop nach Belieben positionieren lassen. Das Ergebnis kann direkt mit Kunden oder Mitarbeitern geteilt werden. Zudem kann der Quellcode per Knopfdruck generiert und anschließend sofort weiterverarbeitet werden. Zudem stehen bereits vorgefertigte Templates zur Verfügung. Die kostenlose und im Funktionsumfang eingeschränkte Basisversion wird über GitHub vertrieben und steht unter der CC-BY-4.0-Lizenz. Die Vollversion kostet 249 Dollar und enthält neben einer Vielzahl an Komponenten und Blöcken auch eine umfangreiche Dokumentation [Designmodo Inc. 2015]. Wie der Übersichtstabelle eingangs des Kapitels zu entnehmen ist, wird Bootstrap favorisiert und am häufigsten weiterempfohlen. Laut Nachfrage hat kein Entwickler die Frameworks anhand von Kriterien gegenübergestellt, sondern eher nach individueller Wahrnehmung beurteilt. In diesem zweiten Schwerpunkt sollen diese unbewussten Kriterien in bewusste Kriterien umgewandelt und klar formuliert werden, um einen objektiven Vergleich zu ermöglichen. Mittels solcher Kriterien soll Entwicklern die nach eigenen Aussagen schwere Entscheidung für oder gegen ein Framework erleichert werden.
Seminararbeit, SS 2015
Seite 7
Philipp Richter
4 ENTSCHEIDUNGSKRITERIEN ZUR WAHL EINES FRAMEWORKS Um die Empfehlung zu spezifizieren, schließt sich nun der zweite Schwerpunkt der Umfrage an, nämlich die Frage nach den Kriterien, nach welchen ein Framework ausgewählt wird. Hierfür wurden die unter 3.3 genannten Entwickler hinsichtlich ihrer Kriterien befragt, nach denen sie die Frameworks evaluiert haben. Nach Antwort aller wurden die Aussagen kategorisiert und den Befragten mit der Bitte um eine Priorisierung erneut zugesandt. Bei der Benennung der Kriterien wiesen die Befragten große Übereinstimmung auf und führten neben Features, Customizing und Dokumentation auch Support, Verbreitung, Community, Preis und Lizenz an. Einzelne Kriterien wurden zu einem zusammengefasst. Den letztlich fünf festgesetzten Kriterien sprachen die Entwickler im zweiten Durchgang völlig unterschiedliche Gewichte zu, weswegen auf eine wertende Reihenfolge verzichtet wird. Bei jedem Kriterium wird an eine knappe Begriffsklärung die Bedeutsamkeit des jeweiligen Kriteriums aus Entwicklersicht angeschlossen. Hierbei werden die Ergebnisse der Umfrage einbezogen. Im kursiven Text wird das eher theoretische Wissen in die Praxis anhand des Frameworks Bootstrap transferiert. 4.1
Features
„Features aggregieren gewöhnlich zusammengehörige Anforderungen zu einem sinnvollen Ganzen“ [Oestereich 2010]. Da sich dieses sinnvolle Ganze mit jedem Business Case ändert, ist der Funktionsumfang laut der befragten Entwickler entscheidend. Der zugrunde liegende Business Case bestimmt den Bedarf an Features. Bei einem stetig wechselnden Einsatzzweck erleichert ein Framework mit großem Feature-Level den gesamten Entwicklungsprozess. Aus Sicht des Front-End Entwicklers stellen sich folgende Fragen: Gibt es ein reaktionsfähiges CSSbasiertes Gestaltungsraster welches die responsiven Ansätze unterstützt? Gibt es genügend einsetzbare UI-Komponenten, die über unterschiedliche Browser hinweg dieselbe Qualität und Stabilität gewährleisten? Werden Features eventuell durch Drittanbieter bereitgestellt [Burtscher 2013]? Bootstrap bietet eine Vielzahl von Cross-Browser kompatiblen Komponenten und Plugins an. Dank vordefinierter CSS-Klassen lassen sich HTML-Elemente einfach gestalten und die Eigenschaften beliebig anpassen und erweitern. Es verfügt über ein integriertes reaktionsfähiges und fortschrittliches Gestaltungsraster. Des Weiteren stellt es über ein Dutzend von wiederverwendbaren UI-Komponenten bereit, welche durch enthaltene jQuery-Plugins zum Leben erweckt werden [Twitter, Inc 2015]. Zusammenfassend lässt sich sagen, dass Bootstrap über einen breiten Funktionsumfang verfügt. 4.2
Verbreitung, Community und Support
Die Verbreitung, die Community und der Support entscheiden aus Sicht der befragten Entwickler auch in nicht unerheblichem Maße über die Wahl des jeweiligen Frameworks. Je stärker ein Framework verbreitet ist, desto gößer ist die Community und umso umfangreicher ist der Support. Ist die Community groß, steigt die Wahrscheinlichkeit der raschen Problemfindung und -lösung. In manchen Fällen liefert die Dokumentation des Herstellers nur unzureichende Ergebnisse. Dann dient die Community als wertvolle Quelle, um zugeschnittene Lösungen und Anregungen zu erhalten. Bootstrap ist sehr gefragt und stark verbreitet. Die große Community arbeitet aktiv und engagiert. Der Hersteller selbst bietet viele hilfreiche Ressourcen sowie Unterstützung auf unterschiedlichen Plattformen an. Zahlreiche Entwicklerforen und –blogs liefern zudem nützliche Beiträge, Erweiterungen und Unterstützung [Twitter, Inc 2015].
Seminararbeit, SS 2015
Seite 8
4.3
Philipp Richter
Dokumentation
Die Dokumentation ist Voraussetzung und elementarer Bestandteil eines Frameworks. Es liefert grundlegende Informationen zur Integration, Nutzung und Anpassung des jeweiligen Frameworks. Ist Software nicht sachgerecht dokumentiert, kann sie nicht umfassend genutzt werden. Nur wenn der Entwickler einen Überblick über den gesamten Funktionsumfang hat, kann er alle Möglichkeiten eines Frameworks gänzlich nutzen. Aus Entwicklersicht spart eine klare Dokumentation Zeit, da sie einen schnellen Zugriff auf notwendige Informationen gewährleistet. Die Dokumentation von Bootstrap ist klar strukturiert und nachvollziehbar. Dank der übersichtlichen Informationsarchitektur wird eine verlässliche Orientierung gewährleistet. Auf einer speziellen Einstiegsseite werden die wichtigsten Grundlagen zur Verwendung des Frameworks und hilfreiche Ressourcen bereitgestellt. Zudem gibt es eigene Seiten für die Komponenten und Plugins, auf denen umfangreiche Anleitungen und Informationen zu deren Nutzung aufgeführt sind. Die offiziele Dokumentation wird in englischer Sprache bereitgestellt. Durch die Community wurde sie auch in weitere Sprachen übersetzt und steht somit auch in Deutsch zur Verfügung. Sie unterliegt der Creative Commons BY 3.0Lizenz [Twitter, Inc 2015]. 4.4
Customizing
Das ideale Framework sollte mit den grundlegenden Features ausgestattet sein, sich im Spezialfall aber auch anpassen lassen. Hat ein Anwender konkrete Anforderungen an ein Framework, sollte sich dieses individuell abstimmen lassen. All die Maßnahmen, welche zur Anpassung durchgeführt werden, fasst man unter dem Begriff Customizing zusammen [Lanninger und Wendt 2012]. Ein Framework sollte also den präzisen Ansprüchen des Anwenders hinsichtlich des Funktionsumfanges gerecht werden und ihn somit nicht in seiner Kreativität einschränken. Kann ein Framework dies nicht, bewerten es die Befragten als veraltet und uninteressant. Um zu vermeiden, dass jede Website gleich aussieht, lassen sich die bereits vordefinierten Styles der Komponenten und Plugins von Bootstrap, dank unterschiedlicher Vorgehensweisen, beliebig an die eigenen Bedürfnisse und Wünsche anpassen. Der einfachste Weg führt über die kompilierten CSS-Dateien, indem CSS-Regeln direkt in der originalen Datei oder durch Überschreibungen in einer separaten Datei ausgeführt werden. Eine andere und sauberere Möglichkeit besteht in der Anpassung der 21 LESS-Dateien des modular aufgebauten und unkompilierten Kerns. Des Weiteren stellt Bootstrap einen offizielen Generator zur Verfügung, der es dem Anwender auf einfache Weise ermöglicht, sich sein eigenes Bootstrap zu konfigurien. Hierfür klickt man Komponenten selbst zusammen und weist anschließend den Variablen gewünschte Werte zu. Darüber hinaus gibt es diverse nützliche Drittanbieter-Lösungen ([Twitter, Inc 2015], [Rahman 2014]). 4.5
Lizenz und Preis
Die Lizenz eines Frameworks bestimmt den Umfang der legalen Nutzung. Sie informiert darüber, welche Bedingungen und Einschränkungen es bei der Verwendung gibt. So muss grundgelegt sein, ob das Framework ausschließlich für private oder auch kommerzielle Projekte genutzt werden darf und ob die Bearbeitung und die Wiederverwendung gestattet ist. Neben einer großen Zahl an kostenlos zur Verfügung gestellten Frameworks, gibt es auch Frameworks mit einer variablen Preisspanne. Bezüglich der Preisfrage waren die Befragten grundlegend der Meinung, dass ein Framework heutzutage nichts kosten muss, da es eine Vielzahl an hochwertigen Open-Source-Lösungen am Markt gibt. Ein Teil wäre aber auch gewillt, für den
Seminararbeit, SS 2015
Seite 9
Philipp Richter
Gebrauch eines Frameworks zu zahlen, falls dieses innovative Lösungen bietet und sich somit von der Konkurenz abhebt. Bootstrap ist kostenlos. Es steht unter dem Copyright der Twitter, Inc und ist Open-Source. Der Quellcode unterliegt der MIT-Lizenz [Twitter, Inc 2015]. 5 FAZIT UND AUSBLICK Um der Gestaltung einer responsiven Website die Komplexität zu nehmen, empfiehlt es sich Responsive Front-End Frameworks zu verwenden. Sie beschleunigen den Entwicklungsprozess, ohne den Entwickler einzuschränken. Die Lernkurve des Front-End Entwicklers ist zwar gering, dennoch innoviert der Einsatz eines Frameworks den Workflow und revolutioniert damit die FrontEnd Entwicklung. Da es eine Vielzahl an Frameworks gibt, war es Ziel der Arbeit, Entwicklern Hilfen in Form von Kriterien anzubieten, anhand derer sie eine bewusste Entscheidung für ein Framework treffen können. Denn die Wahl eines Frameworks soll nicht einmalig sein, sondern stetig aufgrund der wechselnden Bedürfnisse, der Arbeitsweise und dem vorliegenden Anwendungsfall des Entwicklers überdacht werden. Vorgefertigte Kriterien sollen eine regelmäßige Reflexion der Entwickler über das verwendete Framework erleichtern. Sind diese Kriterien klar definiert und auf eine überschaubare Zahl beschränkt, so wird die Rückbesinnung und Arbeit mit diesen Entscheidungskriterien nachhaltig. Aufgrund des ansteigenden Leistungsumfanges der Webtechnologien sowie der Nutzungszunahme mobiler Endgeräte bedarf es ein Umdenken der Front-End Entwickler, um diesem zukunftsweisenden Trend gerecht zu werden.
Seminararbeit, SS 2015
Seite 10
Philipp Richter
REFERENZEN AWWWARDS-TEAM (2015): What are Frameworks? 22 Best Responsive CSS Frameworks for Web Design, http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html, Aufgerufen am 03. Juli 2015 BURTSCHER, M. (2013): Bootstrap vs. Foundation or “Choosing the right framework”, http://www.fusonic.net/en/blog/2013/04/10/bootstrap-vs-foundation/, Aufgerufen am 18. Juli 2015 DESIGNMODO INC. (2015): http://designmodo.com/startup/, Aufgerufen am 05. Juli 2015 EMARKETER (2015): Anzahl
der Personen weltweit, die das Internet über ihr mobiles Endgerät nutzen im Jahr 2013 und Prognose bis 2017 (in Milliarden). Stand: Dezember 2013, http://de.statista.com/statistik/daten/studie/172505/umfrage/anzahl-der-personen-weltweit-die-mobil-das-internetnutzen/, Aufgerufen am 28. Mai 2015
GAMACHE, D. (2014): https://github.com/dhg/Skeleton, Aufgerufen am 05. Juli 2015 GUNELIUS, S. (2013): Why You Need to Prioritize Responsive Design Right Now, http://www.forbes.com/sites/work-inprogress/2013/03/26/why-you-need-to-prioritize-responsive-design-right-now/, Aufgerufen am 02. Juli 2015 LANNINGER, V. UND WENDT, O. (2012): Customizing von Standardsoftware, http://www.enzyklopaedie-derwirtschaftsinformatik.de/wi-enzyklopaedie/lexikon/is-management/Einsatz-vonStandardanwendungssoftware/Customizing-von-Standardsoftware, Aufgerufen am 19. Juli 2015 MAKINO, T. UND PHAN, D. (2015): Rolling out the mobile-friendly update, http://googlewebmastercentral.blogspot.de/2015/04/rolling-out-mobile-friendly-update.html?m=1, Aufgerufen am 28. Mai 2015 MARCOTTE, E. (2011): Responsive Webdesign, New York, A Book Apart, S. 9 MARCOTTE, E. (2010): Responsive Web Design, http://alistapart.com/article/responsive-web-design, Aufgerufen am 29. Mai 2015 OESTEREICH, B. (2010): Was ist eigentlich ein Feature?, http://www.oose.de/blogpost/was-ist-eigentlich-ein-feature/, Aufgerufen am 18. Juli 2015 RAHMAN, S. (2014): Jump Start Bootstrap, Collingwood, SitePoint Pty. Ltd., S. 139 ff. RIVOAL, F. UND ATKINS JR., T. (2015): Media Queries Level 4, http://dev.w3.org/csswg/mediaqueries-4/, Aufgerufen am 30. Mai 2015 STATISTISCHES BUNDESAMT (2014): 63 % der Internetnutzer/-innen surfen auch mobil, https://www.destatis.de/DE/PresseService/Presse/Pressemitteilungen/2014/12/PD14_457_63931.html, Aufgerufen am 02. Juli 2015 TWITTER, INC (2015): http://getbootstrap.com/, Aufgerufen am 05. Juli 2015 WAHAB, L. (2014): Responsive Web Design: Kein Trend sondern Zukunft, https://www.lecturio.de/magazin/gastbeitragresponsive-web-design-kein-trend-sondern-zukunft-von-laith-wahab/, Aufgerufen am 03. Juli 2015 WROBLEWSKI, L. (2011): Mobile First, New York, A Book Apart, S. 1 YOOTHEME GMBH (2015): http://getuikit.com/, Aufgerufen am 05. Juli 2015 ZAGLOV, I. (2014): Webdesign-Trends 2014 - Das erwartet Webworker im neuen Jahr, http://t3n.de/news/webdesigntrends-2014-518425/, Aufgerufen am 30. Mai 2015 ZILLGENS, C. (2013): Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen, München, Carl Hanser Verlag ZURB INC. (2015): http://foundation.zurb.com/, Aufgerufen am 05. Juli 2015
Seminararbeit, SS 2015
Comments
Report "Entscheidungskriterien für Responsive Front-End Frameworks aus Sicht von Front-End Entwicklern "