Allgemein, HTML / CSS

Frontend Frameworks für Webdesigner und Entwickler

WordPress Entwickler und Webdesigner

Frontend Frameworks für Webdesigner und Entwickler

Seit geraumer Zeit geistern in Bezug auf Frontend Frameworks vor allem zwei Namen durchs Netz: Bootstrap und Foundation. Doch was sind eigentlich Frontend Frameworks und worum handelt es sich bei den genannten Namen? In diesem Artikel möchte ich euch Frontend Frameworks etwas näher bringen und erklären, wann sie Sinn machen oder eher Unsinn sind.

Anzeige:




Was ist ein Frontend Framework?

Frontend Frameworks sind, wie bei Frameworks üblich, eine Sammlung an verschiedenen vordefinierten Funktionen oder in diesem Fall Stilen. Sie sind beliebt bei Entwicklern und Webdesignern, weil sie die Entwicklung von modernen und ansprechenden Webseiten erleichtern. Denn dank der Frameworks sind viele Bereiche, die sonst immer wieder neu für jede Seite angepasst und definiert werden müssten, standardisiert worden.

Dazu gehören typische Grid-Systeme, mit denen man die Struktur der Webseite aufzubauen kann sowie grundlegende Stile für Buttons, Meldungen, Boxen, Tabellen, Dropdown-Navigationen, Breadcrumb-Navigationen, Slider, Off-Canvas-Navigationen, Lightboxen / Content- Overlay-Boxen oder Dialoge sowie Texte, Überschriften und vieles mehr.

Also alles Bereiche, die für fast jede Webseite ohnehin definiert werden müssten. Mithilfe von responsiven Frontend Frameworks lassen sich ebenfalls relativ einfach „Mobile First“ Webseiten aufbauen und strukturieren. Neben den genannten Funktionen und vordefinierten Stilen bietet jedes Frontend Framework noch seine eigenen kleinen Goodies, Möglichkeiten oder Erweiterungen.

Da es also durchaus Unterscheide zwischen den Frameworks gibt, muss jeder Webdesigner genau das Framework finden, das zu seinem Stil, seiner Arbeitsweise und seinem ganz persönlichem Geschmack passt. Ein grundlegendes „dieses ist besser als jenes“ gibt es daher nicht wirklich, dazu aber später mehr.

Foundation - Schlank und sehr beliebt für Mobile First Responsive Websites
Foundation – Schlank und sehr beliebt für Mobile First Responsive Websites

Warum sind Frontend Frameworks sinnvoll?

Frontend Frameworks sind vor allem bei großen Webseiten, der Arbeit im Team und auch als generelle Vorlage für neue Webseiten jeglicher Größe sinnvoll. Durch die vielen Funktionen der Frameworks wird dem Entwickler oder Frontend-Designer ein großes Stück Arbeit abgenommen, das in der Regel bei jeder Webseite aufs Neue anfällt.

Da sich bei den meisten Frameworks die enthaltenen Komponenten über Download-Konfiguratoren einstellen lassen, kann sich jeder Entwickler genau die Komponenten zusammenstellen, die er für das aktuelle Projekt benötigt, nicht mehr und nicht weniger.

Bei der Arbeit im Team oder Übergabe eines Projekts von einem an einen anderen Entwickler können Frontend Frameworks auch eine hilfreiche Rolle spielen. In der Regel hat jeder Entwickler seinen eigenen Schreibstil und eine eigene Vorliebe für die Benennung von bestimmten Klassen, IDs oder Elementen. Durch ein Frontend Framework werden viele Bereiche standardisiert und vereinheitlicht.

Unterm Strich kann also jeder Nutzer von Twitters Frontend Framework Bootstrap auch relativ schnell den Code einer anderen Webseite überschauen, die ebenfalls auf Bootstrap basiert. Da sich viele Klassennamen und Funktionen in den unterschiedlichen Frameworks auch einfach sehr ähnlich sind, ist dies teilweise auch frameworkübergreifend möglich.

Ein weitere Situation in der entsprechende Frameworks eine große Hilfe sein können, sind z.B. WordPress-Themes oder auch Themes bzw. Vorlagen für jedes andere Content-Management-System. Stellt euch vor, ihr könntet jetzt auf Anhieb ein Theme für WordPress kaufen oder irgendwo herunterladen und, insofern dieses auf Bootstrap oder Foundation basiert, hättet ihr sofort die entsprechenden Klassen im Kopf, mit denen das Theme an eure Bedürfnisse angepasst werden kann, und zwar ohne euch vorher den vielleicht eigenwilligen Code des Entwicklers anschauen zu müssen.

Ein weiterer und in dieser Liste letzter Vorteil, den ich nennen möchte, ist die browser- und betriebssystem- übergreifende Kompatibilität der Frameworks. In der Regel sind alle Funktionen, die aus den Frameworks kommen, Cross-Browser-kompatibel und funktionieren auf allen gängigen Systemen und Browsern.

Es ist also relativ unwahrscheinlich, dass ihr große Fehlerbehebungen durchführen müsst, wenn eure Seite auf einem der Frameworks basiert.

Bootstrap - eines der meistgenutzten Frontend Frameworks aus dem Hause Twitter
Bootstrap – eines der meistgenutzten Frontend Frameworks aus dem Hause Twitter

Welche Nachteile hat die Nutzung von Frontend Frameworks?

Die Frage, die mir im Zusammenhang mit Frontend Frameworks am häufigsten gestellt wird, bzw. der Grund, warum Entwickler nicht darauf setzen wollen, ist in der Regel: „Ich nutze keines der Frontend Frameworks, weil die Seiten alle gleich aussehen und man sofort erkennt, dass sie auf irgendeinem Framework basieren“. An dieser Stelle kann ich euch beruhigen, denn dieser Zweifel ist kein Nachteil. Alle gängigen Frameworks lassen sich sehr gut anpassen, und wenn Webseiten der Grundstruktur bzw. dem Basis-Design des Frameworks sehr ähnlich sehen, dann kann dies verschiedene Gründe haben,

Diesen Artikel erschien exklusiv für das Commag von PSD-Tutorials.de, wenn du ihn gerne bis zum Ende lesen möchtest, kannst du dir das Commag kostenlos und ohne Registrierung auf PSD-Tutorials.de herunterladen. Du findest den Artikel ab Seite 13 ff.

Ich wünsche dir viel Spaß mit dem kompletten Artikel „Frontend Frameworks für Webdesigner und Entwickler“ und den weiteren großartigen Artikeln im Commag.

Commag jetzt kostenlos und ohne Registrierung auf PSD-Tutorials.de herunterladen!
Commag jetzt kostenlos und ohne Registrierung auf PSD-Tutorials.de herunterladen!

Schlagworte zu diesem Artikel: , , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

4 Antworten zu “Frontend Frameworks für Webdesigner und Entwickler”

  1. „Die Frage, die mir im Zusammenhang mit Frontend Frameworks am häufigsten gestellt wird, bzw. der Grund, warum Entwickler nicht darauf setzen wollen, ist in der Regel“ […]
    Mein Hauptgrund gegen Frameworks ist, dass 50% des Codes eh nicht verwendet werden und bei Bootstrap die JavaScript Parts ziemlich bescheiden gescriptet sind.

    • Ja, da triffst du auf jeden Fall einen Negativpunkt, der in dem Artikel auch noch aufgeführt wird, allerdings in dem weiterführenden Teil im Commag.

      Wäre quasi einer der nächsten Sätze nach dem „Cut“.

  2. Hallo Pascal ich schaue mir gerade Foundation an, da man sehr viel Seiten mit Bootstrap erkennt.

    Bei Foundation/Bootstrap nutze ich Sass/SCSS Variante und zum Schluss nutze ich noch grunt

    • HALLO Stephan,
      ich interessiere ich für SASS und Grunt, habe aber noch keinen Durchblick,
      kennst du hilfreiche Quellen, Videotuts oder Bücher die du benutzt hast?

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.