CSS3, SEO, Apps

Vier gute Gründe für HTML5

20.04.2012
Von 


Simon Hülsbömer betreut als Senior Research Manager Studienprojekte in der Marktforschung von CIO, CSO und COMPUTERWOCHE. Zuvor entwickelte er Executive-Weiterbildungen und war rund zehn Jahre lang als (leitender) Redakteur tätig. Hier zeichnete er u.a. für die Themen IT-Sicherheit und Datenschutz verantwortlich.
Mit HTML5 erhält die Web-Auszeichnungssprache ein Set neuer Grundlagen. Diese sollen vieles, was heute nur durch Drittstandards möglich ist, standardisieren und ersetzen. Lesen Sie, warum Unternehmen profitieren.

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); } }

HTML5 bringt Entwicklern und Anwendern viele Vorteile.
HTML5 bringt Entwicklern und Anwendern viele Vorteile.
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.