Die besten Tipps zu mobilem HTML5

Wer mobile Geräte von Smartphones über Tablets bis hin zu Netbooks unterstützen möchte, kommt an HTML5 nicht vorbei. Es stellt sich nicht mehr die Frage, ob HTML5-Websites zu erstellen sind, sondern wie dies am besten zu bewekstelligen ist.

Die Quadratur des Kreises

Die Entwicklung plattformunabhängiger HTML5-Websites und HTML5-basierter Web-Apps hat ihre Tücken. Einerseits gilt es, die Dokumentstruktur mit Hilfe von sauberem, semantischem Markup aufzusetzen, andererseits macht eben diese moderne Auszeichnung die Website in älteren Desktop-Browsern so gut wie unbrauchbar.Der Einsatz von CSS3-Code anstelle von Bildern senkt die Anforderung an die verfügbare Bandbreite und an den freien Arbeitsspeicher, was sich insbesondere auf Mobiltelefonen positiv bemerkbar macht. In inkompatiblen Browsern gehen so umgesetzte gestalterische Elemente allerdings verloren.Neue Tags wie <section>, <article> oder <nav> sowie andere HTML5-Innovationen erleichtern Mobilgeräten die Orientierung auf der Website, verbessern die korrekte Zuordnung von Inhalten durch Bots zur Suchmaschinenptimierung und dienen so als Schnittstelle zwischen Mensch und Maschine.Veralteten Browsern wie dem Internet Explorer bis einschließlich Version 8 werden nicht unterstützte HTML5-Neuerungen - mit nur wenigen Ausnahmen - schnell zum Verhängnis. So wird beispielsweise aus diesem DOM:

<section class="wichtig"><h2>Nicht vergessen!</h2><p>Das ist nach wie vor wichtig.</p></section>

im Internet Explorer 6 bis einschließlich 8 Folgendes:

<section class="wichtig"></section><h2>Nicht vergessen!</h2><p>Das ist nach wie vor wichtig.</p></section><//section>

Wird dann noch die CSS-Formatierung oder Javascript-Interaktivität auf den so beschädigten Quelltext angewendet, ist die Website kaum noch zu gebrauchen. Es wird noch spannender: Sogar mobile Geräte unterscheiden sich in ihren Fähigkeiten in Bezug auf die Unterstützung von HTML5 gravierend. Wirklich plattformübergreifend funktionsfähige HTML5-Websites wären die ultimative Quadratur des Kreises. Zum Glück gibt es Workarounds in Form von Bibliotheken, Frameworks und Vorlagen.

Viele Wege, ein Ziel

Für den Webdesigner gibt es mehrere Wege aus dem HTML5-Dilemma: Von einer Aufforderung zur Installation von Google Chrome Frame gegenüber Benutzern des Internet Explorers bis hin zur Ersetzung nicht unterstützter Tags mittels Javascript während des Seitenaufbaus im Browser gibt es viele kreative Lösungen.Frameworks und Bibliotheken zur Entwicklung von HTML5-Websites und -Web-Apps gibt es eine ganze Menge. Unterschiedliche Lösungen haben verschiedene Schwerpunkte; die einen legen Wert auf semantisch korrekte Auszeichnung, die anderen auf eleganten CSS3-Code und den Verzicht auf Bilder, wiederum andere haben sich auf javascriptgestützte Interaktivität spezialisiert.

52Framework

Das 52Framework gehört zu den ältesten Lösungen für HTML5-basierte Websites. Es erzeugt ein Layout auf Basis eines 16-spaltigen Rasters mit einer Spaltenbreite von 52 Pixeln und einem Zwischenschlag (Spaltenabstand) von 8 Pixeln.Das Framework erzeugt HTML5-Websites mit semantisch korrekter Auszeichnung. Es versteht sich auf neue Formulareingabetypen, HTML5-Video, das <canvas>-Element und lokalen Speicher in HTML5. 52Framework unterstützt neben modernen Browsern auch ältere Versionen des Internet Explorers einschließlich der Version 6.

Boilerplate

Bei HTML5-Boilerplate handelt es sich um eine Sammlung robuster Bibliotheken und Vorlagen zur Entwicklung von HTML5-Websites und Web-Apps für Mobilgeräte mit einer Edition für mobile User Agents unter dem Namen Mobile Boilerplate .Mobile Boilerplate befolgt den Ansatz der progressiven Anreicherung ausgehend von der Annahme eines mobilen Endgerätes ("mobilefirst progressive enhancement"). Anstelle eines Reset-Stylesheets kommt bei HTML5-Boilerplate normalize.css zum Einsatz.HTML5-Boilerplate unterstützt alle gängigen Geräte mit Android, iOS, Blackberry und Symbian sowie W3C-konforme Browser und den Internet Explorer ab Version 6. Benutzer von IE 6 erhalten einen Aufruf zur Installation von Chrome Frame. Den IE Mobile 7 adressiert Mobile Boilerplate mit maßgeschneiderten CSS-Klassen.

Perkins

Perkins ist ein schlankes HTML-Framework, das Ihnen hilft, viele gestalterischer Probleme im Zusammenhang mit der Entwicklung von HTML5-Websites zu lösen. Es integriert mehrere externe Bibliotheken, sodass Sie deren Parameter zentral in einer einzigen Konfigurationsdatei einstellen können.Perkins unterstützt die schnelle Erstellung von Wireframes auf Basis eines dynamischen Rasters unter Verwendung einer mitgelieferten Bibliothek namens 1kb-CSS-Grid von Tyler Tate. Die Parameter dieses Rasters wie die maximale Breite, die Anzahl der Spalten und die Breite des Spaltenabstands lassen sich in der Datei perkins.config.less einstellen. Diese Konfigurationsdatei beinhaltet außerdem Farbendefinitionen.

Typografische Herausforderungen löst das Framework unter Verwendung einer @font-face-Deklaration. Solange Sie Google Fonts verwenden, genügt es, den Namen der betreffenden Schriften in die Konfigurationsdatei perkins.config.less einzutragen, um sie in den betreffenden Websites zu referenzieren. Mit Hilfe einer @font-face-Deklaration lassen sich auch die mitgelieferten Bildsymbole aufrufen.Dank LESS.js von Alexis Sellier erübrigt sich die Angabe der meisten proprietären Browser-Präfixe. Mit Hilfe von Mix-Ins lassen sich Verläufe, intuitive Navigationselemente sowie CSS-basierte Schaltflächen umsetzen. (Partielle) Unterstützung für den Internet Explorer wird mit Hilfe von HTML5 Shiv von Remy Sharp bereitgestellt.Benutzer des Internet Explorers 6 bis 8 werden mit der neuesten Version der Javascript-Bibliothek HTML5 Javascript shim mit integriertem IE Print Protector mit zusätzlichem Code versorgt, um die fehlende Unterstützung bestimmter HTML5-Elemente nachzurüsten und korrektes Rendern sicherzustellen.IE Print Protector ersetzt nicht unterstützte HTML5-Elemente temporär durch kompatibles Markup wie <div> und <span>, und erzeugt ein Stylesheet auf Basis aktueller CSS-Deklarationen. Da der ursprüngliche Code anschließend eingefügt wird, funktionieren alle übrigen Referenzen, die auf diese nicht unterstützten Elemente verweisen. HTML5 Javascript shim nutzt den IE Print Protector zum Rendern der Seite auf dem Bildschirm statt bei der Ausgabe auf den Drucker. Die benötigte Bibliothek wird mit dem folgenden Code vor das öffnende <body>-Tag eingefügt:

<!--[if lt IE 9]><script src="//html5shiv.googlecode. com/svn/trunk/html5.js"></script><![endif]-->

Ein optionales Wordpress-Theme auf Basis des Perkins-Frameworks steht Ihnen hier zur Verfügung.Die Entwickler von Perkins arbeiten derzeit an der Integration mit SammyJS , einem minimalistischen Javascript-Framework zur Entwicklung von erweiterbaren Ajax-Applikationen, und NodeJS, einer ereignisgesteuerten serverseitigen Javascript-Umgebung.

Less Framework

Less Framework ist eigentlich gar kein Framework, sondern genau zwei Schnipsel Code, mit dessen Hilfe erfahrene Mediengestalter HTML5-Websites für Mobilgeräte einschließlich Smartphones aus dem Hut zaubern können.

Less Framework basiert auf dem Konzept sanfter Qualitätsminderung ("graceful degradation"). Es erzeugt adaptive Website-Layouts auf Basis eines CSS-Rasters mit bis zu zehn Basisspalten von je 68 Pixeln mit einem Abstand von 24 Pixeln. Es bringt insgesamt vier verschiedene Layouts mit - für Desktops, Tablets und Smartphones einmal in vertikaler und einmal in horizontaler Ausrichtung - sowie drei Sammlungen typografischer Voreinstellungen.Das Framework unterstützt aktuelle Versionen mobiler Endgeräte wie Nokia Webkit, WebOS, Blackberry OS, Android Webkit, Mobile Safari sowie standardkonformer Browser wie Firefox, Chrome, Safari und Opera. Benutzer von Android Webkit und Mobile Safari (iPhone, iPad, iPod Touch), Nokia Webkit, WebOS, Blackberry OS, Firefox, Chrome, Safari, Opera und Internet Explorer 9 erhalten das für ihr jeweiliges Gerät optimale, maßgeschneiderte Layout. Benutzer des Internet Explorers 6 bis 8 und Benutzer der meisten älteren Geräte bekommen dagegen nur das für Desktops optimierte Standardlayout zu sehen.