Schnellere Bildanzeige, besonders auf mobilen Geräten
Im Webdesign stellt der vom Entwickler definierte Farbverlauf (gradient) einer Website einen Hintergrundeffekt dar, der den Inhalt des Browserfensters strukturiert und tönt, also mit Texturen und Farb-/Schatteneffekten versieht. Diese Farbgebung ist sehr aufwändig zu coden und erfordert viele Auszeichnungselemente. Bisher klappte das nur über "Malen und Zeichnen" von Flächen und Linien. Besonders die Hintergründe von Websites mussten aus vielen kleinen Bildern zusammengesetzt werden. CSS3 (Cascading Style Sheets 3) als Bestandteil von HTML5 vereinfacht diese Farbverläufe und macht eine komplette Definition in Textform möglich:
.gradientArea { background: -o-linear-gradient(#FFB260, #FF7F13); filter: progid:DXImageTransform.Microsoft [9].gradient( startColorstr='#ffb260', endColorstr='#ff7f13', GradientType=0); } }
Foto: W3C
Das Ergebnis diese Codes ist ein Rechteck, das einen Farbübergang von einem matten in ein sattes Orange enthält. Diese "Gradient"-Spezifikationen in CSS3 verringert nicht nur den Aufwand, sondern auch die Größe der Quellcodes. Waren Hintergrundbilder früher viele tausend Bytes groß, reichen nun wenige Hundert. Neben der leichten Anpassbarkeit auf verschiedene Bildschirmgrößen findet das Rendering zudem "in-line" statt, ohne dass weitere Dateien geöffnet werden müssen. Das freut den Besucher, besonders den mit mobilen Geräten, steigt die Performance eines Web-Angebots doch erheblich. Für den Entwickler ändert sich wenig: Mithilfe des Photoshop-Gradient-Tools (oder ähnlichen Werkzeugen) werden Farbverläufe erzeugt, dann aber ins CSS3-Format exportiert, anstatt wie bisher nach HTML4 oder XHTML.
Ein bisher wenig beachteter Vorteil des HTML5-Farbverlaufs ist dessen Anpassbarkeit auf das Alter oder die örtliche Position des Benutzers, sofern diese bekannt sind. Die wichtigsten Neuerungen sind jedoch: bessere Performance, besser geeignet für mobile Geräte und einfachere Verwaltung.
Verbesserte SEO-Funktionen
Neben den per Text festzulegenden Farbverläufen gibt es weitere neue CSS3-Elemente wie Deckfähigkeit (ein grafisches Element im Vordergrund ist gerade so transparent, dass ein Element im Hintergrund teilweise durchscheint), abgerundete Ecken und Schlagschatten. Auch diese bringen die Vorteile kompaktere Up- und Downloads und einfacherer Cross-Plattform-Wartung mit. Darüber hinaus sind sie unter dem Aspekt der Suchmaschinen-Optimierung (SEO) sinnvoll. Zum einen ist eine erhöhte Kompatibilität mit Source-Code-Control-Systemen (SCCS) gegeben und Änderungen am Quellcode können leichter nachvollzogen und validiert werden:
< background: -o-linear-gradient(#FFB260, #FF7F13); --- > background: -o-linear-gradient(#FFB260, #FF3F13);
Zum anderen wird der Inhalt von visuellen Elementen und Effekten, die über CSS3 definiert werden, nun auch für Suchmaschinen lesbar, da er in Textform vorliegt.
Anspruchsvolle Animationen
Wer ausgeklügelte Animationen in seinem Web-Angebot brauchte, griff in der Vergangenheit zu Flash. Und das trotz der bekannten Nachteile: Keine Kompatibilität über alle Plattformen hinweg (iOS), ständige Sicherheitslücken, häufige Lizenzierungsschwierigkeiten, keine Indizierung durch Suchmaschinen. HTML5 macht Flash zumindest im Bereich der Animationen überflüssig, weil es nun relativ professionelle animierte Elemente selbst definieren und einbinden kann.
Einfachere Entwicklung von Web-Apps
Mobile Anwender verlangen nach Apps, HTML5 macht sie möglich. Der Standard ist so mächtig, dass es HTML5-Apps in jedem Fall mit nativen Apps aufnehmen können. Apps, die komplett mit HTML5-Bordmitteln entwickelt werden, bieten verschiedene Vorteile:
-
Auffindbarkeit durch Suchmaschinen;
-
Sofortigen Zugang zum Endnutzer, keine Drittsoftware nötig;
-
Eine Codebasis, die alle Plattformen und Geräte gleichzeitig erreicht.
Wer moderne und anspruchsvolle Web-Angebote im Unternehmensumfeld entwickeln möchte, findet mit HTML5 somit alles, was er braucht.
Dieser Artikel erschien bei unseren US-Kollegen von der Infoworld. Wenn Sie mehr über die Neuerungen von HTML5 und deren Einsatzmöglichkeiten erfahren möchten, empfehlen wir Ihnen unsere ausführliche Artikelserie:
(sh)