Samstag, 10. Mai 2014

Erfahrungsbericht: Zurb Foundation 5 - Front-End Framework

Diverse Projekte habe ich bereits mit dem Responsive Front-End Framework "Foundation 5" von Zurb umgesetzt, jedoch gibt es auch einige Einschränkungen, die mich dazu bewegen, dass ich bereits nach einer Alternative suche.

Foundation 5, ist wie schon erwähnt ein Responsive Framework für das Front-End (mobile-first) einer Webseite oder einer Webapplikation mit einer Vielzahl an implementierten Designelementen und Funktionen.

Eine Funktionsübersicht findet man auf der Foundation-Webseite.

Im Downloadbereich kann man sich sowohl das vollständige Framework mit allen Funktionen, eine abgespeckte und eine frei konfigurierbare Version herunterladen. Auch eine Sass Lösung ist implementiert.

Dadurch, dass ich alle meine Templates für die namenhaften Content Management Systeme von der Pieke auf selbst schreibe (noch immer), implementiere ich das Framework also in meine eigenen nackten Templates, die lediglich aus simplen HTML5-Code und der vom System benötigten Dateistruktur bestehen.

Man erhält bereits zu beginn eine komprimierte Version des Stylesheets sowie eine komprimierte Version des Javascripts, welches jQuery voraussetzt. Zusätzlich wird noch das modernizr.js geladen.

Sollte man sich also sein Foundation Framework selbst zusammengestellt haben, so hat man wahrscheinlich schon sein Grid, also auch die Breite und Abstandswerte sowie auch Farbwerte angepasst. Des Weiteren klickt man sich bei der frei konfigurierbaren Version seine benötigten Funktionen zusammen.

Es ist schon sehr hilfreich, offenbart aber bei der Performance-Optimierung einige Schwierigkeiten, da der nackte SCSS-Code verschachtelt als bearbeitbare Version vorliegt. Also ist etwas Zeit und Genauigkeit erforderlich, um das Stylesheet von unbenötigtem Code zu befreien.

Ein Punkt auf den ich bei der frei konfigurierbaren Version gestoßen bin ist die nicht konfigurierbare Typographie, welche in der komprimierten Version also direkt eingebunden wird. Arbeitet man also mit Sass, so kann man das natürlich bequem über eine Variable arbeiten. Trotzdem ist soviel ungewollter Code enthalten, der die Dateigröße massiv anhebt.

Man kann natürlich mit einem "Style Overwrite" arbeiten, wobei ich glaube, dass es jeglicher Performance-Optimierung widerspricht.

Dadurch würde ich das Framework nur Webentwickler oder Webdesigner empfehlen, die entweder nicht auf Ladegeschwindigkeiten großen Wert legen oder eben sehr viel Können besitzen Code wirtschaftlich zu optimieren.

Auch jQuery- bzw. JavaScript-Konflikte mit CMS-Module oder -Plugins entstehen häufig beim Einsatz des Frameworks. Da gibt es zahlreiche Faktoren, die dabei eine Rolle spielen. Manchmal ist es auch einfach nur das entsprechende Modul oder Plugin, welches einfach schlecht programmiert wurde. Aber bei 6 Projekten gab es nur bei einem keine Probleme mit Module oder Plugins, was wahrscheinlich daran liegt, dass die Seite sehr puristisch gehalten wurde.

Egal ob man sich ein Abbild von GitHub zieht oder sich die Version von der Webseite herunterlädt, die Arbeitsweise erfordert ein wenig Einarbeitungszeit, besticht dann aber durch Einfachheit und Logik.

Fazit:

Für Webapplikationen ist das Framework hervorragend, aber für eine einfache Webseite würde ich dieses mächtige Werkzeug wahrscheinlich zukünftig meiden. Auch wenn ich mir eine eigene Grundversion erstellen würde, so wäre diese nicht mehr updatefähig und ich rühre ungerne den Core eines Programms oder Frameworks an.

Ein Nachteil ist ebenso die Cross-Browser-Kompatibilität, denn z.B. wird IE8 nicht unterstützt. Das hängt zum einen damit zusammen, dass IE8 und IE9 ziemlich schlechte und veraltete Browser sind, aber gerade im Fall von IE8 ist das schon ein Problem. Dieser hat schließlich unter den IE-Nutzern immer noch einen Marktanteil von 10%. Das kann man einfach nicht übersehen, da es sich dabei meistens um Firmen handelt, die ihre Software meistens auf IE8 zertifiziert haben oder eben auf Grund Lizenz- oder Arbeitskosten noch immer den Browser verwenden.

Auch dafür gibt es Abhilfe, welche es hier gibt:
http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8

Ich möchte aber hiermit auch darauf hinweisen, dass man einfach schauen sollte, dass man den Rotz-Code auch nach auslaufen des IE8 entfernt. Auch wenn der Kunde bereits zufrieden ist, wird die Seite durch die zusätzlichen Scripts ja nicht schneller. Und eine Seite die im Internet Erfolg hat und für die Interessenten schnell zugänglich ist, bedeutet einen zufriedeneren Kunden.