Fachartikel: Macht die Gestaltung einer validen Webseite Sinn? by Maurice Reisch

BQWG

Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.

Autor: Datum: Titel:

Maurice Reisch 22. Juli 2009 Gestaltung von validen Webseiten macht das einen Sinn?

»Nothing can be perfect, but the Web could be a lot better. «

(Tim Berners-Lee, Entwickler des Internets und Mitbegründer des W3C)

Seit 1994 besteht das Internet - offiziell zugänglich. Die Gründerväter initiierten gleichzeitig auch eine Stelle zur Weiterentwicklung der Programmiersprache HTML, das sog. World Wide Web Konsortium - kurz W3C. Dieses entwickelt Standards wie CSS, RSS oder X-HTML. Letzterer soll dafür Sorge tragen, dass nach diesem Standard gestaltete Webseiten auf allen Internetbrowsern gleich dargestellt werden. Leider sieht die Realität, 15 Jahre nach der Initialzündung des Internets, erheblich anders aus. Und dies liegt nicht allein an Fehlentwicklungen Seitens der Browserherstellter.

Gestaltung von W3C validen Webseiten - macht das einen Sinn? Ein Artikel von Maurice Reisch (Vorsitzender BQWG e.V.)

Tim Berners-Lee, der als Miterfinder des World Wide Web Weltruhm erlangte, gründete 1994, in Kooperation mit dem Massachusetts Institute of Technology (MIT), der European Organization for Nuclear Research (CERN) und unterstützt vom U.S. Defense Advanced Research Project Agency (DARPA) sowie der Europäischen Union, das W3C (World Wide Web Consortium), welchem die Weiterentwicklung der einheitlichen Programmiersprache HTML (HyperText Markup Language) unterlag. Durch das W3C bekannte Techniken sind unter Anderem (X)HTML, XML, CSS, SVG, RSS und WCAG, die in verschiedensten Webseiten und Blogs auch standardisiert Einsatz finden. Das Deutsch-Österreichische Büro hat seinen Sitz im Fraunhofer Institut für Intelligente Analyse- und Informationssysteme in Schloss Birlinghoven (http://www.izb.fraunhofer.de/). Ende 1999 wurde die Programmiersprache HTML, letztmalig in der Version 4.01, vom W3C veröffentlicht.

Was genau ist (X)HTML? Seither hat sich viel getan; Auf programmiertechnischer als auch auf gestalterischer Seite konnten durch Weiterentwicklungen wie (D)HTML, (X)HTML und cross-over Implementierungen von XML in Flash usw. viele Meilensteine erreicht werden.

»Es ist gut, sich an Standards wie beispielsweise des W3C zu halten« (Lena Wagner, Google Deutschland)

Schon in der Abkürzung sieht man die Nähe zur Web-Ursprache HTML. (X)HTML wurde aus HTML zur verbesserten Darstellung von Webseiten im Browser entwickelt. Dennoch wird (X)HTML über XML (Extensible Markup Language engl. für erweiterbare Auszeichnungssprache) definiert. Dabei ist nicht nur eine DTD (Dokumenttypdeklaration) wie bei HTML möglich sondern es können aus XML mehrere Familien gebildet werden. Somit steht

Seite 1

(X)HTML in gewisser Weise zwischen HTML und XML. (X)HTML ist in Kurzform also eine textbasierte Sprache zur Darstellung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. In modernen Webseiten werden z. B. Gestaltung (also die Darstellungsform) und Inhalt (Texte, Bilder, Dokumente, Videos etc.), durch die Nutzung sog. WCMS (Web Content Management Systeme engl. für „Internet Inhaltsverwaltungssystem“), voneinander getrennt. Die Daten, wie Texte und z. B. Informationen wo das Bild auf dem Server gespeichert ist, werden zumeist in Datenbanken (z. B. MySQL) abgelegt. Das WCMS setzt dann aus dem Theme (Dateiverzeichnis der entsprechenden Gestaltung), welches (X)HT-

Die Realität im Jahr 2009 ML-Dateien, mit dem Programmiercode, sowie Grafiken und die sog. CSS (Cascading Style Sheets engl. für deklarative Stylesheet-Sprache für strukturierte Dokumente) enthält, die

BQWG

Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.

Autor: Datum: Titel:

Maurice Reisch 22. Juli 2009 Gestaltung von validen Webseiten macht das einen Sinn?

Der Validator prüft Webseiten auf (X)HTMLValidität des programmierten Codes.

Webseite zusammen. Dennoch muss man heute, 9 Jahre nach Veröffentlichung von (X)HTML 1.0, beim Besuch verschiedenster Webseiten immer wieder feststellen, dass deren Validität nicht gegeben ist. Der Anspruch an Validität muss selbstverständlich nicht an Peter‘s Private Fussball Homepage, die z.

Was ist Validität und warum ist sie so wichtig? B. mit Frontpage selbst gestaltet ist, gerichtet werden, jedoch sind auch die meisten kommerziellen Seiten alles andere als valide. Bekanntestes Beispiel hier: Amazon mit über 1.800 Fehlern! Webstandards wurden vom W3C unter anderem entwickelt um: a) allen Nutzern des Internets den größtmöglichen Nutzen zu bringen. b) Programmierern den Code zu vereinfachen und somit die Produktionskosten zu senken.

c) Eine Entwicklung barrierefreier Webseiten zu erleichtern. d) Websites zu entwickeln, die mit allen internetfähigen Geräten zugänglich sind. Als Validierung wird der Prozess bezeichnet, bei dem Dokumente (z. B. (X)HTML oder CSS-Dateien) auf die Einhaltung eines formalen Standards überprüft werden. Ein Dokument das so geprüft wurde und diese Prüfung bestanden hat wird als valide bezeichnet. Warum sollten Programmierer validen Code erstellen? - Valider Code wird von Webbrowsern besser wiedergegeben als nicht-valider. - Valider Code wird schneller wiedergegeben (gerendert) als fehlerhafter Code. - Valider Code wird auf allen Browsern gleich wiedergegeben (z. Zt. leider noch eine Vision des W3C) - Barrierefreiheit zu erleichtern Aktuelle und zukünftige Browser werden immer mehr standard-konform

Seite 2

entwickelt. Es wird daher immer wichtiger valides und standard-konformes (X)HTML zu schreiben, damit entwickelte Seiten auch zukunftssicher sind und bleiben. Weiterhin hält sich in der Internetgemeinde auch der Mythos, dass valide Webseiten z. B. von Google schneller in den Suchindex aufgenommen werden und somit auch ein besseres

»Validität ist die Kirsche auf der Spitze des SEOKuchens« (Jim Hobson, Webdesigner) Ranking (engl. für Positionierung) erhalten. Hierzu gibt es verschiedenste Theorien und Tests die selbiges beund widerlegen wollen. Lena Wagner, Communications & Public Affairs Manager, Google Deutschland GmbH: »Es ist gut, sich an Standards wie beispielsweise des W3C zu halten. Dadurch werden Websites für eine größere Gruppe von Nutzern besser

BQWG

Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.

erreichbar, was wiederum dazu führen kann, dass diese Websites dann weiter empfohlen werden. Empfohlene Websites sind für uns ein Indikator dafür, dass sie relevant sind, was sich

Autor: Datum: Titel:

und validem CSS c) Seite mit validem (X)HTML und invalidem CSS d) Seite mit invalidem (X)HTML und invalidem CSS

Abb. 01 - Invalide Webseite, verursacht durch den Einbau des offiziellen YouTube Codes.

im Ranking bemerkbar machen kann. Das heißt aber nicht, dass generell alle Websites, die sich an W3C-Standards halten, automatisch ein besseres Ranking erreichen.« Auf der anderen Seite testete z. B. der Webdesigner Shaun Anderson (www. hobo-web.co.uk), der sich ausgiebig mit dem Thema SEO (Search Engine Optimization engl. für Suchmaschinen Optimierung) beschäftigt, die

Kurz um: Der Köder (Code) muss dem Fisch (Google) schmecken Aufnahme ein und derselben Webseite in den Google Suchindex, jedoch als valide und nicht valide Variationen dieser. Ein entsprechender Test wurde auf seinem Blog (eine Art von Internettagebuch) veröffentlicht. So wurden zeitgleich bei Google angemeldet: a) Seite mit validem (X)HTML und validem CSS b) Seite mit invalidem (X)HTML

Das Ergebnis scheint für Anderson klar zu sein. Denn von den vier angemeldeten Webseiten nahm Google in kürzester Zeit nur Variante A, also mit vollständig validem Code, in den Suchindex auf. Dieser Fakt ist für Anderson und viele andere ein klarer Indikator der diese Theorie unterstreicht. Jim Hobson, selbst Webdesigner und Verfechter der Wichtigkeit von validen Webseiten, kommentiert, dass Validität nach seiner Meinung: »die Kirsche auf der Spitze des SEO-Kuchens«

Maurice Reisch 22. Juli 2009 Gestaltung von validen Webseiten macht das einen Sinn?

Rahmenbedingungen und Faktoren eine wichtige Rolle. Zum einen werden immer wieder Webseiten gestaltet, deren Grundstruktur auf vorgefertigte und oft invalide Templates, zurückzuführen ist. Diese werden dann entsprechend der jeweiligen Kundenanforderungen konfektioniert, was wiederum zu erweiterter Invalidität führt und sich entsprechend auch an Unterseiten vererbt. Gleiches kann auch der Fall sein, wenn bis dahin valide Templates, teils

»Wer seinen Job versteht, für den ist valides HTML nicht schwerer als zusammengeschwurbeltes HTML. Alles nur eine Frage der Ordnung!«

(Ernst Hopfner, Agentur Kundendienst 03 GmbH)

aus Unerfahrenheit, manipuliert werden, woraus infolgedessen wiederum Konformitätsproblemen auftreten können. Außerdem werden häufig fremde Programmiercodes (sog. Codeschnipsel) zur Aufwertung z. B. in Form von Plug-ins (Erweiterungen) eingefügt. Ein Beispiel: Wer versucht

Abb. 02 - Valide Webseite, durch Modifikation des offiziellen YouTube Codes.

sei. Das Extrainvestment seiner Kunden in eine validierte Webseite führe automatisch auch zu besseren Suchergebnissen bei Google & Co. Dennoch spielen bei der Erstellung einer Seite oder eines Templates viele Seite 3

ein vorhandenes YouTube Video in seine Webseite einzubauen, nimmt in der Regel den von YouTube angebotenen Code (siehe Abb. 01). Wider besseren Wissens wird von YouTube hier jedoch ein invalider Codeschnip-

BQWG

Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.

sel übergeben. Die Verwendung einer kleinen Modifikation des Codes bewirkt hier jedoch wahre Wunder und führt zu einer einwandfrei validen Webseite (Abb. 02). Weiterhin gibt es unerfahrene oder unprofessionelle Programmierer die sich um die Einhaltung des Standards nicht kümmern. Wie der Name (X)HTML-Standard eigentlich schon sagt, soll die Sprache gewissen Regeln gehorchen und einheitlich sein. »Es ist leider traurige Wahrheit, dass die meisten Webentwickler, sei aus Unwissenheit oder Faulheit, sich nicht darum bemühen einen validen Code zu schreiben. Wir halten es persönlich für wichtig und versuchen das auch sehr strikt zu handhaben« so André Kussmann, Webprogrammierer. Auch bekannte Seiten wie z. B. Facebook sind davor nicht gewapnet. Dabei sollte dessen Einhaltung, wenn es nach der Vorstellung des W3C

Abb. 03 - Invalide Startseite von Facebook Deutschland.

geht, eigentlich ein Leichtes sein, ist der (X)HTML Standard doch nach einer verständlichen Codestruktur aufgebaut. Beginnt ein Befehl, so wird dieser i. d. R. in zwei pfeilartigen Klammern geschrieben, z. B. am Beginn eines Dokumentes <html> um dieses zu eröffnen. Dazwischen folgen dann weitere Befehle wie z. B. <head> oder <body>, um nur wenige zu nennen. In den meisten Fällen werden diese Befehle durch die erneute

Autor: Datum: Titel:

Maurice Reisch 22. Juli 2009 Gestaltung von validen Webseiten macht das einen Sinn?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body>

</a>

</div>

<ul>

<li><a href="LINK" title="BESCHREIBUNG">Menüpunkt 1</a></li>

<li><a href="LINK" title="BESCHREIBUNG">Menüpunkt 2</a></li>

</ul>

</div>

</div>

</body> </html>

Abb. 04 - Beispiel eines validen Webseitenaufbaus

Wiedergabe geschlossen, jedoch unter Einbringung eines „/“. Dies hat in der umgekehrten Reihenfolge ihrer Eröffnung zu erfolgen. Es kann auch hilfreich sein, entsprechende Befehle optisch durch Einrückung (siehe Abb. 04) des darauf folgenden Inhalts oder durch Anmerkung z. B.  bzw.  hervorzuheben. Wenn nun z. B. ein sog. DIV Container mit dem Befehl <div> geöffnet wird, z. B. um Inhalte an einer bestimmten Stelle auf der Seite zu platzieren, so muss dieser Befehl wieder geschlossen werden - wenn man möchte dass die Webseite wie gewünscht wiedergegeben wird. Es ist daher technisch und logisch nur konsequent, dies so umzusetzen. Im Besonderen gilt es zu beachten, dass auch selbstschließende Befehle z. B. bei der Verwendung <img ... /> oder <meta ... /> korrekt geschlossen werden. Ein kleiner Fehler hier bewirkt Seite 4

oft einen „Rattenschwanz“ von Validitätsfehlermeldungen (Abb. 05). Es gibt mittlerweile hunderte verschiedene Browser wie z. B. CrazyBrowser, Apple‘s Safari (für Mac und auch für Windows), Opera, AOL Browser, Camino, iCab sowie das neueste Mitglied der Familie Google‘s Chrome Browser. Als Webentwickler hat man natürlich nicht die Ressourcen in jedem noch so kleinen Browser zu prüfen ob die entwickelte Seite richtig dargestellt wird. Das W3C entwickelt Standards vor allem um den Browserherstellern Vorgaben bzw. Hilfestellung zu geben. Im Normalfall sollte es also so sein, das jede zu 100% valide Seite in allen gängigen Browsern gleich interpretiert (wiedergegeben) wird. Da die Vorstellung des W3C aber noch nicht zu 100% in die Realität umgesetzt werden konnte, bieten verschiedene Hersteller lizenzpflichtige Lösungen an, wie z. B. Microsoft‘s

BQWG

Bundesdeutsche Qualifizierungsstelle für Werbeagenturen und Grafikdesigner e.V.

Autor: Datum: Titel:

Maurice Reisch 22. Juli 2009 Gestaltung von validen Webseiten macht das einen Sinn?

Abb. 05 - Der Code ist der selbe wie Abb. 03. Jedoch wurde der Befehl <meta ...> am Ende nicht durch „/“ geschlossen. Diese kleine Unaufmerksamkeit verursachte allein in diesem kleinen Beispiel bereits 4 Fehler.

Expression Web SuperPreview oder Adobe‘s BrowserLab, welches die Browser Internet Explorer 6 (Windows XP), Internet Explorer 7 (Windows XP), Firefox 2 (Windows XP/OS X), Firefox 3 (Windows XP/OS X) sowie Safari 3 (OS X) emulieren kann. Unter http://www.browsershots.org/ steht weiterhin eine kostenlose Version, mit diversen Auswahlmöglichkeiten zu Browser, Bildschirmauflösung, Farbtiefe usw. zur Verfügung. Allein zum Betriebsystem Linux können 30 verschiedene Browser bzw. Vörgängerversionen gewählt werden. Nach-

Warum also macht die Gestaltung von validen Webseiten Sinn? teil dieser kostenfreien Version ist jedoch, dass es min. 30 min dauert bis der erste Screenshot angezeigt wird. Wer dann noch vergißt zwischenzeitlich den Knopf „Verlängerung“ zu drücken hat Pech und muss ggf. den Auftrag erneut einreichen - weitere Wartezeit min. 30 min. Das W3C bietet auf seiner Webseite den „Markup Validation Service“ an. Mit diesem kann einfach und schnell

eine Webseite, im Internet oder auch rung (Page Rank). Offline, sowie CSS-Daten auf ihre Va- 3) Team-Arbeit lidität geprüft werden. Auch bietet z. Die Verwendung von W3C-StanB. die Web Developer Toolbar (von dards, die von jedem Programmierer Chris Pederick) für Firefox (https:// einsehbar und nachvollziehbar sein addons.mozilla.org/) diese Funktion sollten, gewährleisten bessere Teambereits integriert an. Projektarbeit. Alle am Projekt beteiFaktoren die für die Verwendung des ligten Personen wissen wie der (X) W3C-Standards sprechen: HTML-Code am Ende auszusehen 1) Gewährleistung der Browser-Kom- hat. Dies erhöht die Les- und Wartpatibilität barkeit des Codes beträchtlich. Auch Wer W3C konformen Code program- die Wiederverwendbarkeit des Codes miert hat im Nachhinein bei der Brow- wird dadurch erheblich erhöht. seroptimierung viel weniger Arbeit. Schlussendlich kann man Feststellen, Dies bedeutet, der Mehraufwand zum die Stärke an validem HTML und (X) Erlernen von (X)HTML wird bei einem HTML ist, dass es für Mensch und größeren Projekt dort wieder einge- Maschine gleichsam fehlerfrei lesbar spart. ist. Quellen: Wikipedia.org, W3.org., Shaun Anderson 2) SEO (www.hobo-web.co.uk), XING Gruppe: PHP-EntwickMit WC3 konformen Code hat man im lung, opencomp.de, plerzelwupp.de Bereich der Suchmaschinenoptimierung optimale Möglichkeiten. Header Tags lassen sich sinnvoll nutzen und räumen somit z. B. Google die Möglichkeit ein diese zu lesen. Dies führt aller Warscheinlichkeit nach - zu einer schnelleren Erfassung in den Suchindex und einer besseren Positionie- Abb. 06 - BrowserShots bietet eine Vielzahl von Auswahlmöglichkeiten - auch für verschiedene Systeme.

Seite 5