Frameworks
Sonntag10. März 2013

Seit kurzem kann man sich den aktuellen Entwicklungsstand von Bootstrap 3.0, dem kommenden Major-Release dieses umfangreichen Applikations-Frameworks ansehen. Die größten Neuerungen sind der Mobile-First Ansatz und das überarbeitete Design, welches sich nun stärker von seinen Wurzeln bei Twitter abnabelt.

Die neue Optik betrifft dabei in erster Linie die Formular- und Navigationselemente. Ich persönlich finde sie deutlich weniger elegant, wodurch Bootstrap insbesondere für das Prototyping etwas von seinem Reiz verliert. Denn selbst wenn man sich die Twitter-nahe Optik so langsam satt gesehen hat, so sind die UI Komponenten doch nahezu perfekt aufeinander abgestimmt gewesen und damit erstellte Layout-Prototypen vermittelten einen hochwertigen – jederzeit vorzeigbaren – Eindruck. Diese Qualität von Bootstrap scheint im aktuellen Entwicklungsstadium etwas verloren zu gehen, denn die Entwickler ziehen den neuen Stil nicht konsequent durch. Insbesondere die Formularelemente sehen nun kontrastärmer und irgendwie ... unfertig aus.

Nun ist es so, dass auch ich bei YAML 4 das mitgelieferte Design in neutralem grau halte, weil dies für den Bau von Prototypen eine sinnvolle Ausgangsbasis ist, will man doch den Anwender nicht in Richtung eines bestimmten Farbschema drängen. Steht dann erstmal der eigentliche Layoutentwurf, werden die einzelnen Komponenten im Detail gestaltet. Bootstrap (ehemals Twitter Bootstrap) will sich in Version 3 offenbar weiter von seinen Wurzeln lösen und seine Anwender mit der “unfertigeren” Optik stärkerer zur Individualisierung ... nennen wir’s mal animieren, denn überall wird auch die nun “platte” oder neu-deutsch “flat” Optik auch nicht passen.

Das ist im Sinne der Eigenständigkeit des Frameworks und weniger uniformen “made with Bootstrap” Projekten zu begrüßen. Wenn ich mich recht entsinne arbeiten die beiden Entwickler auch gar nicht mehr bei Twitter. Dennoch war natürlich die ausgereifte Optik der UI Elemente bisher eines der ganz großen Pluspunkte. Die mit Bootstrap erstellten Oberflächen konnte man bisher meist ohne weiteres produktiv einsetzen. Ob das auch mit Version 3 so sein wird, bleibt abzuwarten – noch ist die Version 3 ja nicht fertig (wie man an einigen Komponenten leicht erkennen kann). Ich habe aber so meine Zweifel, ob der neue ... Draft-Look ... gleichermaßen gut angenommen wird. Von einem echten Flat-UI Design mag ich in diesem Zusammenhang eher nicht sprechen, denn dazu sind mir die Umstellungen im Design nicht konsequent genug. Bisher wurden in erster Linie die sanften Gradienten im Hintergrund entfernt und die Standardfarbe der Buttons ist nicht mehr weiß sondern grau. Ein neuer eigenständiger Stil ist das aber noch nicht.

Doch genau das bringt mich zu einem Problem, welches mich seit jeher an Bootstrap stört und welches wohl auch in Version 3 Bestand haben wird. Die Entwickler verzichten auch weiterhin auf eine Trennung von Funktionalität und Design im CSS. Bei YAML gibt es diese Trennung – aus gutem Grund. Die Funktionalität der Layoutbausteine steckt bei YAML in den Core-Dateien des Frameworks, während das Design (Theme) separat verwaltet wird. Dieser Ansatz hat seine Vorteile: Zum einen sind Anpassungen des Layouts bereits durch einfaches Austauschen einzelner CSS-Dateien erledigt (oder Sass-Dateien, so man mit dem Sass-Port von YAML arbeitet). Zum anderen sind Anwender frei in ihrem Workflow – speziell im Hinblick auf den Einsatz von CSS-Preprozessoren. Es ist also möglich, die Core-Dateien von YAML unverändert zu übernehmen, das eigentliche Design aber z.B. mit LESS oder Sass zu erstellen.

Bei Bootstrap gibt es diese Trennung bisher nicht. Zwar ermöglicht das hauseigene Konfigurationstool die Auswahl der Komponenten, ein Austausch des Layouts bedeutet aber immer auch den Austausch der Frameworklogik, weil eben alles miteinander verwoben ist. Das ist besonders dann ärgerlich, wenn man im Rahmen der eigenen Anpassungen vielleicht auch die eine oder andere Erweiterung hat einfließen lassen. Wer die Optik individualisieren will, ist so zwingend auf LESS angewiesen, unabhängig von den ggf. bestehenden Abhängigkeiten des eigenen Projektes.

Trotzdem ist es natürlich spannend zuzusehen, wohin die Entwicklung bei Bootstrap, Foundation & Co. geht. Schließlich macht man sich ja auch so seine Gedanken fürs eigene Framework.


Dienstag22. Mai 2012

Die Bewertung von fremdem Programmcode hinsichtlich Qualität, Flexibilität und Robustheit der gebotenen Features ist immer wieder knifflig, schließlich braucht es gute Kenntnisse, um sich in die fremden Quelltexte hineinzudenken und ggf. Schwachstellen zu erkennen. Das gilt für PHP oder JavaScript genauso wie für CSS (auch wenn hier nicht wirklich programmiert wird).

Ich schreibe dies auf, weil ich durch meine Arbeit an YAML und die eigene Analyse von weit über 50 CSS-Frameworks einen gewissen Blick für die Details gewonnen habe und ich mich schon mehrfach über die oberflächliche Vorstellung von CSS-Frameworks oder Vergleiche verschiedener Projekte in der Fachpresse geärgert habe. Zu oft werden ganze Scharen von CSS-Frameworks (und Dinge, die gar keine CSS-Frameworks sind) nur mit herauskopierten Textschnipseln aus deren Projekthomepages vorgestellt und viel zu selten erfolgen Empfehlungen und Bewertungen der Projekte auf der Grundlage eines wenigstens grundlegenden Code-Reviews.

Deshalb will ich heute ein paar Hinweise geben, die ich zur Evaluierung von CSS-Frameworks nutze. Ich stelle einige Kritieren vor, nach denen ich mir einen ersten Eindruck über neue Projekte verschaffe und eine Bewertung vornehme. Ich nenne in diesem Beitrag bewusst keine Beispiele, denn ich will nicht mit dem Finger auf andere Projekte zeigen, sondern aus meiner Erfahrung heraus Hilfestellung bei zur Evaluation von CSS-Frameworks geben.

Update 25.5.2012: Ich habe soeben den Kriterienkatalog gerade noch um zwei wichtige Punkte (Barrierefreiheit und “Wider den Hype”) erweitert.

Den gesamten Beitrag lesen


Mittwoch05. Oktober 2011

Man sollte eigentlich meinen, dass man heute mit dem tausendsten Abklatsch des einfachen CSS-Grid Konzepts nicht viel mehr als seine Freunde beeindrucken kann. Zumindest sollte man das vermuten, wenn man, wie bei Toast, auch noch lesen muss: “... and it also sets some nice default styles for inline elements, such as links, emphasis, strong, small print, marks, abbr, and lists!” Schon traurig, wenn Derartiges als “Feature” herausgestellt und dann auch noch in der Fachpresse beklatscht wird. Selbst zu den Anfangszeiten hatten die meisten Projekte dieser Art höhere Ziele.

Es ist nicht so, dass es beim Blick auf den Quelltext von Toast nichts zu sagen gäbe. Da wäre zum einen, dass Toast eben nicht, wie fälschlich bei T3N geschrieben, mit einem Standard-Reset daherkommt. Stattdessen setzt man nämlich, und das ist zumindest lobenswert, auf Normalisierung, statt auf Eric Meyers CSS-Dampfwalze, die oft genug in der Kritik stand.

Ein weiteres erwähnenswerte Detail ist der Umstand, dass Toast für seinen flexiblen Grid-Ansatz mal eben auf eines der mit CSS3 neu eingeführten Box-Modelle baut (ohne darauf hinzuweisen, wohlgemerkt). Das macht die Arbeit mit flexiblen Breiten oder unterschiedlichen Einheiten in aktuellen Browsen ausgesprochen angenehm - solange man sich nicht um den Internet Explorer 6 und 7 kümmern muss. Denn diesen dürfte das Grid bei Verwendung irgendeines horizontalen Padding oder Border-Eigenschaft um die Ohren fliegen. Das muss man nicht zwingend negativ sehen, erwähnenswert ist es aber schon (zumal die Codebasis überschaubar ist). Ich persönlich mag da altmodisch denken, aber innerhalb eines Frameworks, halte ich das auch heute mindestens für problematisch, denn die Folgen in alten Browsern können drastisch ausfallen.

Ebenfalls wäre durchaus diskussionsbedürftig, ob es aus Design-Sicht sinnvoll ist, wenn ein CSS-Framework unter “responsive” nichts anderes versteht, als das Grid unterhalb von 775 Pixeln vollständig zu linearisieren (was im übrigen nicht nur Toast, sondern auch andere Projekte betrifft). Aus meiner Sicht stellt sich beispielsweise die Frage, ob ein CSS-Framework für flexible Layouts überhaupt eine solche fixe Grenze vorschreiben sollte? Denn gerade flexible Layouts funktionieren erst richtig gut, wenn man die einzelnen Abstufungen des Layouts individuell auf dessen grafische Elemente abstimmt und sich nicht sklavisch einer fixen Zahl unterwirft, deren Ursprung vor vielen Jahren seine Relevanz verloren hat.

Alle diese Punkte spricht der Beitrag bei T3N aber leider nicht an. Stattdessen bleibt er oberflächlich und nichts-sagend, denn Statements wie “Toast ist nicht für jedes Projekt geeignet. Textlastige Websites können durch den Einsatz des Frameworks an Übersichtlichkeit und Bedienbarkeit gewinnen.” ist ohne Begründung nichts wert. Das eine oder andere wenig technische Detail oder gar eine kritische Anmerkung zur x-ten Kopie der Kopie des Grid-Ansatzes sind offensichtlich zuviel verlangt. Stattdessen werden einfach die Infotexte der Toast-Webseite abgetippt, übersetzt und nicht gerade subtil bebildert - fertig ist der neue Fachbeitrag und genauso schnell sind die Infomeldungen darüber bei Twitter, Facebook, Google+ untergebracht. Dieses Schema taugt auch für die nächsten 50 CSS-Frameworks, soviel ist klar.

Nun, wir haben im deutschsprachigen Raum leider nur eine sehr überschaubare Anzahl von Magazinen, die sich der Frontendentwicklung widmen. Deshalb ich finde es ehrlich gesagt jammerschade, dass die Jungs von T3N sich nicht mehr die Zeit nehmen, den Inhalt der Beiträge vor dem Schreiben genauer unter die Lupe zu nehmen. Hauptsache raus, die gierige Meute im Social-Network-Zirkus will bespaßt werden. Sorry T3N, ihr macht Euch uninteressant und entbehrlich.


Dienstag24. November 2009

... oder wie es die Prophezeihung in den alten Schriften von Kobol ankündigt: "Dies ist alles schon einmal passiert, es wird wieder passieren". Leider sind die wenigsten Gruselgeschichten so gut, dass man sich auf eine Fortsetzung freut. Dennoch präsentiere ich heute den offiziellen Nachfolger meines letztjährigen Wintermärchens.

Die Vorgeschichte

Es begab sich im Sommer zu 2009, als ein aufstrebener Webentwickler, ich nenne ihn Herrn X. seine eigene Webseite neu einrichten wollte. Da die eigene Kreativität wohl gerade gemeinsam mit seinem Verstand auf Badeurlaub in der Karibik waren, griff Herr X. von jeglichen Hemmungen befreit in eine der unteren Schubladen des guten Benehmens, setzte seine copy & paste Mütze auf und streifte durchs Internet: Warum sich etwas neu ausdenken, was andere schon so übersichtlich und ansprechend hinbekommen haben? Letztlich sind wir doch eh eine große Familie im Web … und so fand er meine Webseite. Und diese gefiel ihm vom Aufbau und Design so einmalig gut, dass er seine ganz genauso aufgebaut und aussehen sollte. Nur hier und da einige winzige Änderungen – der individuellen Note wegen – ein Tüpfelchen Farbe hier und eine runde Ecke da, ganz dezent natürlich, die Vorlage war für ihn schließlich schon so nahe der Perfektion. Schön auch, dass ich seinerzeit einen längeren Blogbeitrag zu meinen Designentscheidungen verfasst hatte. Das hatte auch Herr X. bemerkt und erwähnenswerte Passagen kurzerhand in den Relaunch-Beitrag seines neuen Layouts übernommen.

Einige Monate später trug es sich zu, dass ich beim Sichten einiger Kommentare zufällig auf der schönen neuen Webseite des Herrn X. landete und dort ein ein selten-klares Déjà-vu erlebte. Das alles hatte ich schon mal gesehen … ja richtig, bei mir selbst. Und weil ich wenig begeistert war, die Mühen meiner Freizeit weitgehend deckungsgleich als das Aushängeschild des "professionell" arbeitenden Herrn X. wiederzuerkennen (einzelne Grafiken flossen sogar in eines seiner Referenzprojekte ein), kontaktierte ich Herrn X. per Skype um ihm mein Unbehagen bezüglich seines Handelns zu verdeutlichen. Herr X. berief sich im weiteren Verlauf auf selektiven Gedächtnisausfall ("Ich weiß nicht, was ich mir dabei gedacht habe.") gab jedoch nach mühsamer Diskussion, wie anders ein eigenständiges Layout denn mindestens sein müsse, letztlich doch nach und beseitigte das Problem weitgehend. Damit war das Thema aus der Welt und die Welt drehte sich langsam weiter…

Den gesamten Beitrag lesen


Mittwoch28. Oktober 2009

Die neue Version 3.2 des (X)HTML/CSS Frameworks YAML steht ab sofort im Downloadbereich der Projektseite zum herunterladen bereits. Erst vor wenigen Tagen, am 15. Oktober 2009 konnte das Projekt seinen nun schon vierten Geburtstag feiern und ich freue mich außerordentlich, dass auch nach einer so langen Zeit die Luft für Verbesserungen und Weiterentwicklungen noch nicht aufgebraucht ist. Die vorliegende Version 3.2 bringt einige wichtige Änderungen mit sich, die ich im Folgenden kurz vorstellen und begründen werde.

Schlankerer Framework-Core

Die wichtigste Änderung gleich zu Beginn: YAML besteht nunmehr nur noch aus zwei Kernbausteinen. Die base.css ist das Herzstück des Frameworks und stellt dem Nutzer ein schonendes Browser-Reset, oft benötige CSS-Klassen für die Layouterstellung (Float Clearing, Skiplinks, ect.), die “Subtemplates” als flexible Grid-Bausteine, ein universelles Fallback auf ein dreispaltiges Basislayout und wichtige Vorgaben für eine fehlerfreie Druckausgabe bereit. Über den zweiten Baustein, die iehacks.css werden die älteren Versionen des Internet Explorers 5.x bis 7.0 mit Bugfixes versorgt, die so formuliert sind, dass sie ohne Eingreifen des Anwenders den überwiegenden Teil der CSS-Bugs dieser Browser korrigieren. Der ehemaliige dritte Baustein, die print_base.css ist in der base.css aufgegangen.

Struktogramm YAML 3.2

Eine Umstrukturierung der medienspezifischen Definitionen innerhalb der base.css ermöglichte weiterhin einige Vereinfachungen der Codebasis, sodass trotz der Erweiterung der Grid-Komponente der gesamte Framework-Core insgesamt fast 600 Byte (ca. 10%) kleiner geworden ist. Mit den Wegfall der print_base.css kann zudem ein HTTP-Request eingespart werden (zumindest, wenn man die finalen Stylesheets nicht zusammenfasst) und in modernen Browsern wie dem Internet Explorer 8, Firefox, Opera, der Safari benötigt der YAML-Core nur noch 2,34 kB (slim_base.css). Ausschließlich die veralteten Versionen des Internet Explorers 5.x – IE 7.0 müssen den vollständige Core mit 5,04 kB laden.

byte-size of several CSS framework cores

Neue Features & Altlastenentsorgung

Wie mit fast jeder YAML-Version wird auch mit YAML 3.2 der Funktionsumfang des Frameworks leicht erweitert. Die Subtemplates (die Grid-Komponente von YAML) erhält vier weitere Unterteilungen (20%, 40%, 60% und 80%). Selbstverständlich besteht auch hier die Möglichkeit, gleiche Containerhöhen über die Klasse .equalize zu erzwingen. Daneben steht mit einem weiteren Add-on, dem SyncHeight-Plugin für jQuery, eine JavaScript-Alternative für das Erzwingen gleichhoher Container zur Verfügung.

Der Formularbaukasten ist ebenfalls flexibler geworden. So ist die Klasse .yform nicht mehr an das form-Element gebunden, was den Einsatz in Content Management Systemen wie z.B. ExpressionEngine vereinfacht, bei denen der form-Tag automatisch vom CMS generiert wird. Die zusätzliche Darstellungsklasse .full hilft bei Platzproblemen (schmale Formulare) und erzeugt Input-, Select-Felder und Textareas mit voller Breite des umgebenden Elternelementes. Ein neues Layoutbeispiel demonstriert, wie einfach und komfortabel sich mehrspaltige Formulare mit YAML erstellen lassen.

Neben diesen neuen Möglichkeiten, wurden mit diesem Release auch einige Altlasten beseitigt. So wurden die IE-Fixes für die ehemaligen ID’s #page_margins und #page aus der iehacks.css entfernt. Beide ID’s werden seit YAML 3.1 (Januar 2009) in mehrfach verwendbare Klassen umgewidmet. Einen echten Feature-Drop betrifft der Verzicht auf die Möglichkeit, Spaltenhintergründe mit Hilfe der Border-Definition von #col3 zu erzeugen. Zwar ist diese Technik denkbar einfach in der Umsetzung, sie beschwört aber in Verbindung mit den Windows-Kontrastmodi ein Zugänglichkeitsproblem herauf, da in diesen Modi Vordergrund- und Rahmenfarben auf den gleichen Farbwert gesetzt werden, infolgedessen Inhalte mit dahinterliegenden farbigen Rahmen (den simulierten Spaltenhintergründen) z.T. nicht mehr lesbar sind. Erschwerend kam hinzu, dass diese Technik im Internet Explorer ein Anpassung des z-index von #col3 bedurfte, was in seltenen Fällen das Selektieren von Inhalten mit der Maus im Browser blockierte.

Ein oft diskutierter Punkt unter vielen Framework-Anwendern war bisher der Workaround zur Vermeidung seitlich springender, zentierter Layouts im Firefox und Safari durch Erzwingen eines vertikalen Scrollbalkens. Mit der Veröffentlichung der neuen Browsergenerationen Internet Explorer 8, Firefox 3.5, Safari 4 und Opera 10 wurde die bisherige Lösung unbrauchbar und deshalb aus dem Core entfernt. An ihre Stelle tritt eine CSS3-basierte Lösung (overflow-y: scroll), welche nunmehr in den Nutzerstylesheets (basemod.css) verankert ist und somit von jedem Anwender bei Nicht-Gefallen einfach deaktiviert/entfernt werden kann.

Ebenfalls ersatzlos gestrichen wurde das Debug-Stylesheet (debug.css), welches mit der Version 3.0 Einzug in das Framework gehalten hatte. Zu sehr litt die Übersicht bei der Vielzahl der gleichzeitig eingeblendeten Informationen. Die fehlende Konfigurierbarkeit und die umständlichen Handhabung waren ebenfalls nicht vorteilhaft. Mit dem bereits im Febuar 2009 veröffentlichten Codeanalyse-Tool YAML Debug steht YAML-Entwicklern eine deutlich bessere und vielseitigere Alternative zur Verfügung, die mit einem einzigen Klick jedes Layout analysiert.

Handwerkszeug für die Barrierefreiheit

Kein Framework, auch nicht YAML, ist ein Garant für barrierefreie Webseiten. Dennoch zeigt sich mehr und mehr, wie sinnvoll und richtig es ist, Webentwicklern das grundlegende Handwerkszeug innerhalb des Frameworks zur Verfügung zu stellen. In YAML 3.2 wird eine neue Darstellungsmöglichkeit für Skiplinks unterstützt, die ein Überlagern des Layouts für die eingeblendeten Skiplinks ermöglicht und dadurch die sonst üblichen Probleme bei deren Integration beseitigt. Zudem wird für Webkit-basierte Browser ein JavaScript-Fix mitgeliefert, um auch Apple’s Safari und Google Chrome dazu zu bewegen, den Focus auf die angesprungene ID zu setzen.

Ein weiterer Schritt ist die konsequente Einbeziehung von WAI-ARIA. Sämtliche bei YAML mitgelieferte Beispiellayouts wurden mit ARIA-Landmarkroles versehen. Zwar handelt es sich hierbei nicht wirklich um ein Feature des Frameworks (die korrekte Auszeichnung sollte der Webentwicklers vornehmen), dennoch halte ich auch diesen Schritt für wichtig, um als Framework-Entwickler trotz der noch fehlenden Validierungsmöglichkeiten im W3C-Validator die positiven Effekte des kommenden Standards hervorzuheben. Schon heute können alle modernen Browser (einschließlich des IE8) mit WAI-ARIA umgehen und ermöglichen somit einen deutlichen Zugewinn an Barrierefreiheit auf Webseiten jeder Komplexitätsstufe.

Das “Accessible Tabs” Plugin von Dirk Ginader wird mit YAML 3.2 als Add-on ein fester Bestandteil des Frameworks. Das dahinter stehende Konzept habe ich zusammen mit Dirk Ginader bereits vor zwei Jahren entwickelt, die Umsetzung im Rahmen dieses Plugins ist mittlerweile ausgereift und umfangreich getestet. Auch dieser Baustein ist weniger als Feature des Frameworks zu sehen. Stattdessen bemühe ich mich darum, zusammen mit YAML sinnvolle Best-Practice-Lösungen zu vermitteln und die Verbreitung dieser Techniken zu fördern.

Zusammenfassung

Neben diesen großen Neuerungen/Verbesserungen stehen zahlreiche kleinere Korrekturen hier und da, über die das Changelog im Detail Ausfunft gibt. Wie mit jedem Release wurde auch die Projektvorlage “Simple Project” auf den aktuellen Stand gebracht.Der YAML Builder beherrscht momentan WAI-ARIA noch nicht und auch die neue Skiplink-Variante ist dort noch nicht implementiert, die Codeausgabe ist aber selbstverständlich kompatibel zu YAML 3.2.

Der Release-Zyklus war diesmal deutlich länger, zudem zwischen v3.1 und v3.2 keine sogenannten Maintenance-Releases eingeschoben wurden. Der Hauptgrund hierfür lag in der eng gestaffelten Veröffentlichung der aktuellen Browsergeneration, angefangen mit dem Internet Explorer 8 im Frühjahr 2009. Gerade bei diesem war es wichtig, die zuverlässige Funktion der Kernfunktionen des Frameworks ohne jegliche Hacks zu überprüfen. Nach nunmehr einem halben Jahr lässt sich dieser Fakt bestätigen. Einzig bei der Darstellung von Formularen benötigt der Internet Explorer 8 noch wenige individuelle Hilfestellung, die notwendigen Anpassungen kennt der Formularbaukasten jedoch.

Daneben stellt das 3.2-Release für mich eine weitere Schärfung des Profils von YAML hinsichtlich des modularen Aufbaus auf Basis eines sehr schlanken Kerns und der Focussierung auf flexible, barrierefreie Webseiten dar. Und die Entwicklung geht weiter ...


Seite 1 von 2 Seiten

 1 2 >