(Klicken, um großes Bild aufzurufen)Zum besseren Verständnis der folgenden Erläuterungen, rufen Sie die anonymisierte Agenturseite in einem neuen Fenster auf, und behalten Sie diese griffbereit im Hintergrund!
Den ersten Test, dem ich eine Webseite nach der obligatorischen Validitätsprüfung unterziehe, ist der »Tabellentest«. Hiermit überprüfe ich, ob in der Seite blinde Tabellen vorkommen, und wenn, ob diese zu Layoutzwecken missbraucht werden.
Bei der Webseite im zweiten Vergleich sieht es so aus:
(Klicken, um großes Bild aufzurufen)
Alle grauen Linien sind die Ränder der Tabelle(n) und deren Zellen. Da der tatsächliche Inhalt der Agenturseite aus wenig Zeilen Text besteht, ferner keine tabellarischen Daten vorliegen, ist hier der Einsatz von Tabellen, nur um der Seite ihr Aussehen zu verleihen, semantisch falsch.
Mit dem zweiten Test, dem »Schweinchen-Test«, will ich sehen, ob der Webdesigner sich unsichtbarer Grafiken bedient, um Abstände zwischen verschiedenen Elementen zu erzeugen (z.B. zwischen einer Überschrift und einem Absatz oder um zwei Tabellen voneinander zu trennen). Der Schweinchen-Test besteht aus wenig JavaScript-Code, den Sie, wie bereits für den Tabellentest hier beschrieben, kopieren und einfügen können:
Dieser Code bewirkt, dass sämtliche auf der Webseite referenzierte Bilder und Grafiken durch ein kleines, grinsendes Schwein ersetzt werden:
Wenn Sie sich die Originalseite der Agentur genau anschauen, zählen Sie auf den ersten Blick drei oder vier Bilder: Das Logo oben links ist mit Sicherheit eine Graphik, das Foto mit den Blumen ist ja ein Bild und im Infokästchen »Infomappe anfordern« sind wahrscheinlich zwei Bilder. So Ihr Eindruck, nicht wahr?
Machen Sie nun den Schweinchen-Test! Das Ergebnis sieht nämlich so aus:
(Klicken, um großes Bild aufzurufen)
Wieviele Schweinderl hätten S’ denn gerne? Ich zähle hier ganze 29 rosafarbene Tierchen! Ja, auch diese flachgedrückten, rosaroten Linien sind durch unser Schweinchen ersetzte, wenige Bildpunkte breite oder hohe Abstandgrafiken!
Und was ist aus den beiden Info-Kästchen geworden (»Kontakt-Info« und »Infomappe anfordern/Drogerie des Monats«)? Tja, reingelegt! Es war kein Text, sondern jeweils ein Bild!
Text als Grafik wird nur von Menschen erkannt. Suchmaschinen oder Screen Reader können in einer Grafik eingebetteten Text nicht lesen. Ich habe den Google-Test gemacht, in dem ich nach »infomappe anfordern demoagentur« gesucht habe (ich habe natürlich den richtigen Namen der Firma eingegeben, und nicht »Demoagentur«!): Kein einziges Ergebnis! Das überraschte mich dann doch ein bisschen, denn zumindest der Firmenname hätte einige Treffer bringen sollen.
Sie können diesen Test mit den anonymisierten Seiten wiederholen: Suche nach »infomappe anfordern demoagentur«. Gefunden wird nur die standardkonforme Seite, in welcher diese Begriffe als reiner Text definiert sind. Hätte Demoagentur zumindest einen alternativen Text dazugegeben, würde Google diesen Text finden...
Der folgende Text ist in einer Grafik eingebettet:
Und das würde eine Maschine sehen, wenn sie Bilddateien überhaupt berücksichtigen... Wenn die Datei in Ihrem Texteditor geöffnet ist, suchen Sie über den Menüpunkt Bearbeiten/Suchen nach "ich"...
In ihrer Stellenanzeige erwartete diese Firma vom Bewerber »Hohes Designverständnis, insbesondere im Bereich Web mit Ziel bester Usability (Benutzerfreundlichkeit)«. Wieder eine Voraussetzung, die von der Firma Demoagentur selbst nicht erfüllt wird. Denn wie eben gezeigt, würde ein schlechtsehender oder gar ein Blinder, der sich den Inhalt einer Webseite von einem Screenreader vorlesen lässt, z.B. gar nicht erfahren, wie die Adresse und die Telefonnummer der Firma lautet! Das nenne ich Benutzerfreundlichkeit! Bravo! 6, setzen, neu machen, Firma Demoagentur!
Zur Information: So wird ein Alternativtext dargestellt, wenn im Browser die Anzeige von Bildern abgeschaltet ist. Dieser Text wird von Screen Readern mit vorgelesen:
Ich bin ein Alternativtext, der z.B. bei deaktivierter Bildanzeige angezeigt aber auch von Screen Readern vorgelesen wird.
Das allererste kleine »Abstand-Schweinchen« ganz oben hat es mir besonders angetan: Dem wahrscheinlich selbst ernannten »Webdesigner«, der diese Seite zu verantworten hat, sind die mächtigen Möglichkeiten von Cascading Style Sheets nicht bekannt! Ist hier der Grund zu finden, warum auf der Stellenanzeige dieser Firma »grundlegende HTML-Kenntnisse: HTML/XHTML zur Strukturierung des Inhaltes, CSS für die Gestaltung, das Layout und Design der Seite« gefordert wurden? Das klang vielversprechend – doch die Verantwortlichen in dieser Agentur halten sich offensichtlich nicht daran!
Erst nachdem ich diese drei Tests (Validitätsprüfung, Tabellen- und Schweinchen-Test) durchgeführt habe, widme ich mich dem Quelltext der Webseite, auf der Suche nach weiteren Fehlern. Denn es wird noch sicher dicke Patzer im Code geben! Wer auf Dokumentvalidität nicht achtet, Tabellen und Abstandgrafiken zum Layouten benutzt, hält in seinem Quelltext erfahrungsgemäß weitere Schätze zum Entdecken bereit!
Na dann, schaunmerma: Klick!
Wow! 24 Leerzeilen am Anfang... Naja, Zeile 8 ist nicht ganz leer, sondern enthält einen HTML-Kommentar (erkannbar an: <!-- Kommentar -->) – wahrscheinlich wird hier ein Content Management System eingesetzt, doch kann dieser sicher seine auskommentierte Versionsnummer an anderer Stelle platzieren, oder?
Erst in Zeile 25 kommt eine Dokumenttyp-Deklaration, die hier ohnehin sinnlos ist, denn Firma Demoagentur fürht ja keine Validitätsprüfung. Und für den Internet Explorer gehört diese Dokumenttyp-Deklaration an erster Stelle notiert, da er sie sonst ignoriert und dann anzeigt, was er will – also sollte die Deklaration Zeile 1 zu finden sein!
Zeile 28 enthält wieder einen Kommentar, aber nanu? Zeile 8 stand »Version 1.4«, hier »Version 1.3«? Nun gut, muss mich ja nicht interessieren, aber seltsam ist es schon...
Die Meta-Tags sind alle mit einem »/« geschlossen. Allerdings ist diese Schreibweise für »standalone«-Tags nur in XHTML zulässig. Die Dokumenttyp-Deklaration Zeile 25 weist jedoch den Browser an, nach »HTML 4.0 Transitional« zu rendern – demnach ist diese Schreibweise hier falsch.
Aber was sehe ich Zeilen 47 bis 56?! Eine Firmenadresse innerhalb eines HTML-Kommentars! Welchen Sinn soll diese Angabe denn haben? Suchmaschinen-Robots ignorieren seit langem HTML-Kommentare, so dass diese Adressenangabe nicht »gelesen« und im Suchmaschinen-Index nicht aufgenommen wird... Hat vielleicht der verantwortliche »Designer« bei Firma Demoagentur gedacht: »Mist, jetzt wo wir das schöne Kontakt-Info-Kästchen als Grafik erstellt haben, können Suchmaschinen-Robots unsere Adresse nicht sehen. Hm, grübel, grübel... Ich hab’s! Ich notiere sie mal schnell irgendwo als Kommentar, dann ist sie als reiner Text im Code drin!«.
Und sollte man bei dieser seltsamen Angabe an die Seitenbesucher gedacht haben: wieviele Besucher – außer den wenigen, die wie ich neugierig auf den Quelltext sind – werden sich diesen anschauen? Und wieviele wissen überhaupt, wie man sich den Quellcode einer Seite anschauen kann? Screen Reader dürften ebenfalls die Kommentare im Quelltext ignorieren, so dass mit diesem Kommentar nichts erreicht wird! Er ist sinnlos und überflüssig. 6, setzen! Ups, sorry, habe ich weiter oben schon gesagt...
HTML-Kommentare sind eine Hilfestellung des Seitenautors, sich selbst bei komplexen und langen, quelltextlastigen Seiten besser zurecht zu finden. Sie helfen auch andere Mitarbeiter, welche evtl. die Aufgabe bekommen haben, die Seite zu erweitern oder zu modifizieren, schnell die richtigen Stellen für die Änderungen zu sehen.
Es folgen einige Zeilen JavaScript-Code mit Funktionen, die auf dieser einen Seite (der Startseite der Firma Demoagentur) allesamt nicht zum Einsatz kommen. Ein guter Webmaster hätte allerdings die JavaScript-Anweisungen ausgelagert, denn diese wiederholen sich auf allen (hier nicht gezeigten) Unterseiten der Firma Demoagentur – ich habe aber nicht näher überprüft, ob diese Funktionen in anderen Seiten benötigt werden. Aufgrund der propagierten Trennung von Markup, Layout und JavaScript-Code ist es immer ein Beweis von gutem Stil, wenn CSS-Anweisungen in eine CSS-Datei und JavaScript-Anweisungen in eine JavaScript-Datei notiert werden. Firma Demoagentur scheint es nicht unbekannt zu sein, denn Zeilen 68 bis 72 werden bereits externe JavaScript-Dateien eingebunden (ich habe diese Stelle hier auskommentiert, weil für die Demonstration nicht gebraucht). Weiter unten im Quelltext (Zeilen 189 bis 194) wird eine weitere Funktion in einem script-Block definiert, um den Rollover-Effekt für die Navigationsgrafiken zu realisieren – was bei einer reinen Text/CSS-Lösung ebenfalls nicht notwendig wäre und zudem auch denjenigen Besuchern zugute käme, die JavaScript aus Sicherheitsgründen deaktivieren. Diese »ch_bild« genannte Funktion ist, so man denn unbedingt JavaScript und onmousover/-out-Attribute für den Hover-Effekt einsetzen will, sowieso überflüssig, denn der Bildwechsel lässt sich mit dem Schlüsselwort »this« ganz ohne Extra-Funktion und auf viel kürzere Weise erstellen. Vergleich:
<img id="nav0_kontakt.gif" onmouseover="ch_bild('nav0_kontakt.gif', 'hi_');" onmouseout="ch_bild('nav0_kontakt.gif', '');" src="nav0_kontakt.gif" border="0">
<img onmouseover="this.src='hi_nav0_kontakt.gif'" onmouseout="this.src='nav0_kontakt.gif'" src="nav0_kontakt.gif">
Die als HTML-Attribute notierten Event-Handler (»onmouseover«, »onmouseout«) für das Aufrufen der JavaScript-Funktion, welche für das Austauschen der Navigationsgrafiken beim Drüberfahren mit der Maus zuständig ist, Zeilen 162-165 und Zeilen 222, 234, 246, 258, 270, 282, 294, würden sich bei einer reinen Text/CSS-Lösung erübrigen. Sie sind aber auch sonst unschön und sollten lieber in einer JavaScript-Datei ausgelagert werden.
All diesen script-Blöcken fehlt die zwingend notwendige Angabe »script type="text/javascript"«, und zwischen beiden Blöcken im head-Bereich befindet sich ein kleiner CSS-Block (Zeilen 118 bis 120), dem ebenfalls die Type-Angabe fehlt (»style type="text/css"«) und dessen Anweisungen besser in die bereits Zeile 67 referenzierte CSS-Datei zu notieren wären.
Aufgrund dieser überflüssigen und ausgelagert gehörenden Anweisungen endet der head-Bereich erst Zeile 133!
Aber der body-Tag Zeile 136 hat’s wirklich in sich! Anstatt solche Angaben für den Abstand zu den Rändern des inneren Browserfensters in der CSS-Datei zu notieren, wo sie hingehören, werden hier altmodische und zudem falsche HTML-Attribute benutzt! Und (wir erinnern uns an das allererste kleine Schweinchen vom Schweinchen-Test): Dem Body einen Abstand zum oberen Browserrand zu geben hätte den restlichen Inhalt ebenso nach unten gerückt wie die überflüssige, unsichtbare Grafik, die beim Test durch unser Schweinchen ersetzt wurde!
Gleich danach, Zeile 140 (warum immer so viele Leerzeilen, für eine bessere Lesbarkeit des Codes reicht meistens eine), wird die alles umschließende »Layout-Tabelle« eingeleitet – natürlich mit Hilfe von HTML-Attributen anstatt mit CSS formatiert. Übrigens: Das Attribut »height« ist im table-Tag nicht erlaubt.
Zeile 145: Wieder eine Tabelle..., Zeile 149: noch eine... o Graus! Insgesamt werden acht verschachtelte Tabellen und ein undurchschaubares Dickicht an Quelltext verwendet, um das bisschen Layout zu realisieren! Vergleichen Sie diesen Code mit dem Quelltext meines standardkonformen Nachbaus!
In den Tags wimmelt es nur von so genannten Inline-Style-Anweisungen (erkennbar z.B. Zeile 154: td style="..."). Ja, warum wird Zeile 67 eine CSS-Datei referenziert, wenn nicht alle CSS-Notierungen in diese Datei geschrieben werden? Firma Demoagentur, 6, se... Ups, hatten wir schon!