Mobilmachung
Syntax und HTML5
Die Umsetzung in HTML5
Damit Sie die Unterschiede zwischen herkömmlicher Syntax und HTML5 besser nachvollziehen können, haben wir ein einfaches Beispiel-Layout sowohl in HTML4 als auch in HTML5 erstellt, das sie aus Platzgründen auf der Heft DVD finden. Am besten betrachten Sie beide Quellcodes nebeneinander auf dem Bildschirm - bitte vergleichen Sie!
Zunächst fällt auf, dass die CSS-Definitionen identisch sind. Das verwundert nicht, ändert doch HTML5 nichts an der Nutzung der Stylesheets. Der HTML5-Code sieht hingegen schlanker aus - und aus Gewohnheit vielleicht auch fehlerhaft.
Tatsächlich handelt es sich aber um valides HTML5, auch wenn die Tags <html>, </html>, <head>, </head>, <body> und </body> fehlen. Sie dürfen in HTML5 ebenso wegfallen wie die schließenden Tags </p>, </h1>, </h2> usw. Zusammen mit der vereinfachten DOCTYPE-Definition
<!DOCTYPE html>
und der verkürzten Zeichensatz-Festlegung
<meta charset="utf-8">
schrumpft die Dokumentengröße selbst in unserem simplen Beispiel um rund 17 Prozent. Bei größeren HTML-Dokumenten besteht also erhebliches Einsparpotenzial für die Dateigröße und damit die Ladezeit. Grundsätzlich sollten Sie aber nur Tags weglassen, wenn es unbedingt nötig ist, denn manche Browser reagieren darauf sauer - siehe Absatz "So klappt's: HTML5 und IE8".
In unserem Beispiel haben wir darauf verzichtet, die CSS-Definitionen als separate Datei anzulegen. In der Praxis sollten Sie das aber tun. Die Einbindung in HTML5 erfolgt wie von HTML4 gewohnt im <head>-Bereich, auch wenn dieser nicht benannt sein sollte:
<link type="text/css" rel="stylesheet"
href="CSS_Datei.css">
Mit dem Zusatz media können Sie für verschiedene Geräte unterschiedliche Stylesheets verlinken - eine gebräuchliche und empfehlenswerte Praxis. So funktioniert zum Beispiel media="iphone" fürs iPhone, aber auch eine Angabe wie
media="only screen and (max-device-
width: 480px)"
für eine detaillierte Steuerung. Im Beispiel wird das zugehörige Stylesheet aufgerufen, wenn es sich um ein Gerät mit einem Bildschirm bis maximal 480 Pixel Breite handelt - etwa ein iPhone.
Geräte wie das iPad lassen sich sowohl im Hoch-als auch im Querformat benutzen. Besonders elegant ist es, die Website entsprechend unterschiedlich darzustellen. Das klappt prima mit zwei CSS-Dateien, die so eingebunden werden:
<link rel="stylesheet" media="all and
(orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all
and (orientation:landscape)" href="landscape.css">
Das Argument orientation:portrait steht für die Hochkant-Variante, oriantation:landscape fürs Querformat.
Testen, testen, nochmals testen
Um sicherzustellen, dass Ihre Website auf allen Geräten ordentlich angezeigt wird, hilft nur ausgiebiges Testen. Am besten nutzen Sie einen Browser-Simulator. Im Web gibt es Simulatoren für beinah jeden Browser und diverse Mobilgeräte - eine Google-Suche führt schnell dahin. Hilfreich ist auch browsershots.org.
Darüber können Sie kostenlos einen Screenshot zu einer eingegebenen URL in einem bestimmten Browser erstellen lassen, ohne ihn installieren zu müssen.
So klappt's: HTML5 und IE8
Wieder einmal bereitet der Internet Explorer Webdesignern Kopfschmerzen. Bis zur Version 8 unterstützt der Microsoft-Browser HTML5 nur rudimentär. Erst in der finalen Version 9 soll der IE das neue HTML richtig interpretieren können. Zum Glück lässt sich der Internet Explorer 8 überlisten, so dass er HTML5-Seiten relativ gut darstellt.
Ein wenig JavaScript bringt ihm die fehlenden Tags bei. Das Skript "HTML5_IE8.js" finden Sie auf der Heft-DVD im ZIP-Archiv "HTML5- Grundlagen.zip". Kopieren Sie es in Ihren Website-Ordner und binden Sie es in jedem HTML5-Dokument so ein:
<!--[if lte IE 8]><script src="HTML5_IE8.js"
type="text/javascript"></script><![endif]-->
Wichtig: Lassen Sie die Tags <body>, </body>, <head> und </head> nicht weg, auch wenn das in HTML5 erlaubt ist. Der Internet Explorer 8 kann damit nicht umgehen.
