Responsive Web Design – Pro Frontend Frameworks

In unserem letzten Teil der Responsive Webdesign-Serie verweise ich auf die Vorteile, die sich Entwicklern bieten, wenn sie auf Frameworks zurückgreifen.

Mit dem Siegeszug mobiler Geräte wurden Entwickler vor die Herausforderung gestellt, Websites für Bildschirme verschiedenster Formate zu entwickeln. In den vorhergehenden Teilen dieser Serie wurden Lösungsansätze und die richtige Herangehensweise besprochen, doch nun ist es an der Zeit, einen Blick auf die Umsetzung aus technischer Sicht sich zu gewähren.

Wie so oft, ist man als Entwickler hier vor die Wahl gestellt, allein auf die vom W3C bereitgestellten Tools (HTML, CSS3 & Media Queries) zurückzugreifen, oder – wie auch in anderen Bereichen der Webentwicklung üblich – auf raffinierte Tools der Open Source-Community – sogenannte Frontend Frameworks – zurückzugreifen. Ich werde hier einen kurzen Überblick auf die Vorzüge dieser letzten Option gewähren.

Warum Frameworks?

2011 war das Jahr der RWD-Frameworks. Twitter veröffentlichte sein Framework „Bootstrap“ in der ersten Version und auch „Zurb stellte sein „Foundation“ Framework zur Verfügung. Funktionell haben sich beide in den letzten Jahren bis auf kleine Unterschiede inzwischen angeglichen: Beide verfolgen eine Mobile-First Strategie und liefern standardmäßig ein 12-Column Gridsystem mit stufenweise definierbaren Breakpoints für verschiedene Bildschirmgrößen. Auch bieten beide häufig verwendete Elemente wie Buttons, Navigation und Carousel, teilweise bereits mit den nötigen JavaScript Plugins. Beim Download bieten beide diverse Anpassungsoptionen und die Option, nur benötigte Module zu inkludieren. So lassen sich die sonst recht umfangreichen Frameworks einfach auf das Notwendigste reduzieren.

Während andere Frameworks teils noch minimalistischer sind oder den Fokus auf andere Anwendungsbereiche legen, bieten Bootstrap und Foundation das breiteste Spektrum und die größte Userbasis – So war Bootstrap im Juni 2014 das größte Projekt auf der bekannten Open Source-Plattform „GitHub.

Bootstrap

Mit über 9000 Commits, 560 Contributors und über 25.000 „Forks“ zählt Bootstrap zu den aktivsten Projekten auf der Open Source-Plattform „GitHub“.

Doch welche Vorteile bieten sich Entwicklern, wenn sie auf eines dieser Frameworks zurückgreifen?

Schnelles Prototyping

Durch das simple Gridsystem und vorgefertigte Elemente wie Buttons und Navigationen lassen sich schnell simple Prototypen entwickeln. Diese Prototypen können so schnell der finalen Website strukturell angeglichen werden, ohne viel Zeit in das Schreiben von Styles, die sich meist bei selbst auf den ersten Blick komplett unterschiedlichen Strukturen wiederholen, zu stecken.

Anpassbar und Erweiterbar

Sowohl mit dem „Builder“ als auch anschließend in den Stylesheets im SASS-Format (eine Stylesheet-Sprache, die CSS-Dateien um einige Funktionen erweitert und zu solchen kompiliert werden kann) – für Bootstrap das funktionell ähnliche LESS – lässt sich das Aussehen der Grundelemente auch nachträglich noch ändern. So kann man schnell den Prototyp an das eigentliche Design anpassen. Eigene Styles können unabhängig definiert werden, auch hat man mit SASS und LESS die Möglichkeit, im Framework definierte Variablen wie Farben und Breakpoints zu verwenden, um eine konsistente Struktur aufzubauen, die nachträglich noch durch das Setzen von Variablen global verändert werden kann. So stellt man sicher, dass auch wirklich alle Elemente zur selben Zeit umbrechen, auftauchen oder sich verändern.

Sauber strukturiert, wiedererkennbar und regelmäßig gewartet

Diese Frameworks wurden über die Jahre weiterentwickelt und verbessert. So ist man also sicher, stets aktuellsten Standards und „best practises“ in dieser sich stets im Wandel befundbaren Branche zu erfüllen. Durch die vorgegebene Struktur des Grid Layouts und anderer Elemente wird gesichert, dass sich diese Standards durch das ganze Projekt ziehen und somit auch von Entwicklern, die mit diesen Frameworks vertraut sind, schnell nachvollzogen und weitergeführt werden können.

Bootstrap2

Responsive Web Design leicht gemacht: Bootstrap liefert die gängigen „Breakpoints“ als simple Klassen – Plug & Play.

Moderne Standards wie ein „Mobile First“-Ansatz sind von Haus aus vorgegeben, umgebungsspezifische Probleme können so verhindert werden oder sind gut dokumentiert und mit einer Vielzahl an Lösungsvorschlägen aus der Community einfach lösbar.

Kompatible Komponenten

Ein Großteil der Frameworks belässt es nicht nur bei den grundlegenden strukturellen Elementen, sondern liefert optional weitere Komponenten mit, die in einer Vielzahl von Projekten Verwendung finden. Sie sind einfach kombinierbar, um neue Komponenten zu kreieren. So lassen sich z.B. bei Bootstrap schnell ein Modal und ein Carousel zu einer Lightbox verbinden. Diese Komponenten kommen von Haus aus bereits mit einem Styling, können nach Abschließen des Prototypen jedoch noch beliebig angepasst werden.

Gut Dokumentiert

Generell kommen die Frameworks meist mit einer ausführlichen Dokumentation. Dank einer aktiven Community sind zu den häufigsten Problemen zahlreiche Lösungsvorschläge verfügbar. Das Lesen dieser Dokumentation hilft nicht nur zum Verständnis der Frameworks und deren Funktionalität, sondern bietet auch ein tief gehendes Verständnis der Prozesse und Strukturen im Hintergrund. So wird ein Entwickler, dem Frameworks wie Bootstrap geläufig sind, auch problemlos ohne deren Hilfe Responsive Websites entwickeln können.

Fazit

Als Entwickler streben wir stets danach, Redundanzen zu vermeiden. Potentielle Fehlerquellen durch repetitive Prozesse, die in der Umsetzung von responsiven Webseiten häufig auftreten können, lassen sich mit dem Einsatz eines Frameworks einfach vermeiden – so bleibt mehr Zeit fürs Detail.

Newsletter abonnieren

    Du willst mit uns moshen, jammen, rocken? Get in touch: Schieb uns deine Challenge in den Briefkasten und wir melden uns mit einer Lösung!

    Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

    Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

    Danke für deine Nachricht

    Wir freuen uns und melden uns asap. Bis bald.

      Du willst moshen, jammen, rocken? Bist du Pulpie, oder was? Schieb uns deine Mappe durch den Türschlitz!

      Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

      Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

      Danke für deine Bewerbung

      Wir melden uns asap. Vielleicht sogar mit einer Einladung zum Kennenlernen. Frisier dich schon mal. Irokese, wallende Mähne oder Seiten auf null – alles Wurscht. Hauptsache die Chemie stimmt.

        Hallo Brieffreund:in!

        Du möchtest gerne mehr von uns lesen? Melde dich für unseren Newsletter an und schon hast du unser Wort!

        Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

        Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

        Danke für deine Anmeldung

        Um die Anmeldung abzuschließen, klicke bitte auf den Link in der E-Mail, die wir soeben an dich gesendet haben.