Gridless

Das Standardlayout besteht aus zehn Spalten und hat eine feste Breite von 992 Pixeln. Dieses Layout kann hinter den ersten sechs Spalten aufgeteilt werden. Das Tablet-Layout besteht aus acht Spalten, die insgesamt eine statische Breite von 768 Pixeln einnehmen. Dieses Layout erlaubt die Umsetzung von Fließtext in einer (zentrierten) Hauptspalte, welche die Breite von sechs Basisspalten in Anspruch nimmt.Das Grundlinienraster kann für einen Zeilenabstand von 1.5, 1.4 und 1.33 optimiert werden. Drei Sätze typografischer Voreinstellungen richten Text in 16, 17 oder 18 Pixeln an einem Grundlinienraster von je 24 Pixeln aus.Die Layoutvariante für Smartphones in vertikaler Ausrichtung erstreckt sich über drei Basisspalten des CSS-Rasters bei einer Breite von 320 Pixeln. Für Smartphones in horizontaler Ausrichtung gibt es eine Layoutvariante in der Breite von 480 Pixeln bzw. fünf Basisspalten. Dieses Layout übernimmt CSS-Anweisungen des Standardlayouts und des mobilen Layouts in vertikaler Ausrichtung und lässt sich daher besonders leicht anpassen.

Zwecks Umschaltung vom Standardlayout zu der jeweils passenden Layoutvariante kommen die so genannten media query-Abfragen zum Einsatz. Mit Hilfe einer zusätzlichen Abfrage für das Retina-Display lassen sich Geräte mit einem Pixelverhältnis von mehr als 2x erkennen.Das Less Framework scheint die Entwicklergemeinde ungemein zu inspirieren. Bold Perspective bietet hier ein kostenloses Wordpress-Framework namens Whiteboard (derzeit in der Version 3.1.5) auf Basis des Less Frameworks an.Less+, eine Weiterentwicklung des Less Frameworks von Angry Creative, können Sie hier herunterladen . Less+ bringt gegenüber Less unter anderem Verbesserungen hinsichtlich der Unterstützung des Internet Explorers.Wer das Less Framework mit dem CSS-Framework Compass nutzen möchte, benötigt hierzu lediglich das Less Framework Compass Plug-In, kostenlos hier verfügbar .

Gridless

Wer seine Layouts nicht von einem fest definierten Raster ableiten möchte, dürfte an dem Gridless Framework seine Freude haben. Gridless ist ein optionsreiches Framework zur Erstellung agiler und typografisch ausgereifter HTML5-Websites für Mobiltelefone, Tablets und Desktops auf Basis des Konzeptes progressiver Anreicherung.Beim Seitenaufbau geht Gridless von einer Layoutvariante für mobile Geräte aus ("mobile-first progressive enhancement") und erweitert diese um zusätzliche Features in Abhängigkeit von der tatsächlichen Viewport-Breite des betreffenden Geräts.Das Gridless Framework ermöglicht Ihnen den Einsatz von CSS-Normalisierung. Websites auf Basis des Gridless Frameworks funktionieren mit modernen Smartphones genauso wie mit veralteten Mobiltelefonen, Tablets, Notebooks und Desktop-Computern.Das Framework unterstützt neben Firefox ab Version 3.5, Opera ab Version 11.x, Chrome ab Version 11.x und Safari ab Version 5.x auch den Internet Explorer ab Version 6 mit zahlreichen Bugfixes und Workarounds. Da der Internet Explorer in der Version 6 bis einschließlich der Version 8 mediaquery- Anfragen nicht unterstützt, greift das Framework auf Respond.js zurück.

G5 Framework

Das G5 Framework von Greg Babula dient zur Erstellung von Websites auf Basis von HTML5, PHP und jQuery. Um die Kompatibilität zu optimieren, nutzt das Framework die quelloffene Javascript-Bibliothek Modernizr. Benutzer von Internet Explorer werden zur Installation von Chrome Frame aufgefordert. Beim Zugriff auf damit gestalteter Websites wird der Browser mit Hilfe von Eric Meyers CSS-Stylesheet Reset Reloaded erst einmal zurückgesetzt.Das Layoutraster baut auf Easy Grid auf und besteht aus zwei bis sechs Spalten identischer Breite, die sich je in bis zu fünf Spalten aufteilen lassen. Als Einheit dienen Prozente, wodurch sich das Layout elastisch an die Dimensionen des übergeordneten Elementes anpassen kann. Zur SEO-Optimierung nutzt das Framework PHP, um die Dokumente per Gzip zu verarbeiten.

Sproutcore

Sproutcore ist ein quelloffenes Framework zum Entwickeln HTML5-basierter Webapplikationen in Javascript. Mit Sproutcore entstehen anspruchsvolle, elegante und vor allem schnelle Web Apps, die in ihrer Bedienung Desktop-Anwendungen gleichen und dennoch nicht nur plattformunabhängig, sondern sogar auf mobilen Geräten lauffähig sind.Sproutcore wurde 2007 von Sproutit unter der Leitung von Charles Jolley entwickelt und diente als Grundlage für Apples nur ein Jahr später vorgestellten Cloud-Dienst MobileMe. Auf Basis von Sproutcore entstand außerdem der Webdienst iWork.com, eine Office-Suite für den Browser (inzwischen hat Apple iWork.com übernommen, um Apples eigene Office-Suite iWorks zu erweitern).Im Juni 2011 haben die Entwickler des Frameworks eine auf den Namen Sproutcore UI getaufte Erweiterung für Sproutcore vorgestellt. Sproutcore UI soll Webentwicklern einheitliche Elemente der Benutzerschnittstelle speziell für Mobilgeräte zur Verfügung stellen.

Andere Frameworks

Außerdem gibt es noch einige extrem spezialisierte Frameworks wie zum Beispiel das eher exotische HTML5-Framework Cartagen von Jeffrey Warren aus dem MIT Media Lab . Cartagen rendert dynamische Landkarten in reinem HTML5 auf Basis der GSS-Spezifikation (Geographic Style Sheets). Ein anderes exzellentes Beispiel für ein Framework mit einer gezielten Spezialisierung ist Popcorn.js, eine Javascript-Bibliothek für HTML5-Multimedia von Mozilla.Einige interessante und viel versprechende Frameworks gibt es erst als Ankündigung. Das HTML5-Framework Kendo UI Mobile (kendoui.com ) soll in Kürze in der Lage sein, Websites zu bauen, die auf dem jeweiligen mobilen Gerät das Aussehen einer nativen Applikation samt der gewohnten UI-Elemente annehmen. Es bleibt abzuwarten, inwiefern sich diese Lösungen in die Landschaft bestehender Entwicklungsumgebungen integrieren.

Fazit

Mittlerweile brauchen Sie sich weder auf fehlerträchtige Browserweichen für mobile Endgeräte verlassen noch die benötigten Workarounds zur Herstellung von Kompatibilität von Grund auf neu erfinden. Es reicht, einige handverlesene Bibliotheken in den Quelltext der betreffenden Website einzubinden, um ihre Kompatibilität wesentlich zu erweitern. Die Komplexität dieser Aufgabe ist Grund genug, um ein ausgereiftes HTML5-Framework zu Rate zu ziehen.Ein gutes HTML5-Framework erzeugt für Sie das benötigte Markup mit semantisch korrekt gewählten Tags und greift nichtstandardkonformen Browsern für eine erweiterte Kompatibilität gezielt mit hilfreichem Code unter die Arme.