Sonntag, 11. Mai 2014

Nützliches Tool: Online Grid-Kalkulator mit CSS und Grafik-Ausgabe

Eine ganze Zeit lang habe ich immer selbst meine Grid-Einstellungen kalkuliert und ich habe es nicht besonders gemacht, zumal ich es meistens in einem nicht mehr so fitten Zustand gemacht habe.

Da war ich einfach mal so schlau und habe nach einen Online Grid-Kalkulator gesucht und habe ein sehr gutes Werkzeug entdeckt, der dem Namen alle Ehre macht.

Es lassen sich alle wichtigen Einstellungen vornehmen und die entsprechende CSS exportieren. Das Beste an diesem Online Grid-Kalkulator ist, dass der Kalkulator gleich eine entsprechende Grafik-Datei in Form von Photoshop, Illustrator und PNG generiert und zum Download bereitstellt.

Das hat mich sehr beeindruckt, weil ich noch immer zu der Fraktion gehöre, die ihr Screendesign mit Photoshop oder Illustrator umsetzen. Ich habe mir zwar bereits eine neue Software als Testversion heruntergeladen, welche den Claim "Stop writing code, start drawing it!" verwendet und somit natürlich den Grid-Kalkulator und auch die genannten Programme wie Illustrator und Photoshop überflüssig machen sollen. Die Software heißt Macaw.

Kann ich bisher leider noch nicht bestätigen, deshalb nutze ich zur Zeit noch den äußerst zuverlässigen Grid-Kalkulator:

gridcalculator.dk

Nützliches Tool: Suchmaschine für HTML-Entities (Sonderzeichen)

Valider HTML-Code ist wichtig und jeder Webdesigner & Webentwickler stand bestimmt schon einmal vor dem Problem, dass er ein Sonderzeichen in die Webseite setzen wollte z.B. als Titel-Trenner, doch dann musste man sich mit einer Sonderzeichen-Tabelle rumplagen und die entsprechende HTML-Entity bei seiner Suchmaschine des Vertrauens ausfindig machen.

Glücklicherweise hat sich ein Entwickler die Mühe gemacht und selbst eine Suchmaschine für HTML-Entities entwickelt. Man gibt das entsprechende Sonderzeichen ein, als Zeichen oder Wort und erhält sowohl den HTML-Code als auch den Entity-Code für die Einbindung in CSS mittels content:'';.

Hiermit bedanke ich mich bei dem Entwickler und hoffe Jemanden mit diesem Tipp ein klein wenig Arbeit zu ersparen.

Hier geht es zur Suchmaschine "HTML Entity Lookup" von Left Logic

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.