Website-Technik prüfen

Die Einleitung zum Website-Test haben Sie gelesen? Dann geht’s jetzt weiter.

Technisches Hintergrundwissen

Den ersten Teil haben wir ja schon geprüft, indem wir die Stile im Browser abgestellt haben.
Damit Websites in jedem Browser gleich aussehen und es zu keinen Fehlermeldungen kommt, muss der HTML-Quelltext sauber geschrieben sein. Er hat standardkonform gemäß den Richtlinien des WorldWideWeb Consortium (W3C) zu entsprechen. Das W3C legt Standards wie z.B. HTML, XHTML und CSS fest – das sind Auszeichnungs- Sprachen zur Anzeige von Websites. Die Bedeutung von sauberem HTML-Quelltext können Sie sich so verdeutlichen:

HTML ist wie eine Sprache, besteht aus Vokabeln und Grammatik. Kennen Sie zwar alle Vokabeln, aber nicht deren grammatikalischen Zusammenhang, können Sie die Sprache nicht sprechen. Sie werden nicht verstanden. So ähnlich versteht dann auch ein Browser nicht, was sich der Webdesigner gedacht hat, und zeigt eine Website nicht nach Standard an, sondern im sogenannten „Quirks“-Modus.

HTML-Quelltext der Website prüfen

Keine Angst, es ist nicht so kompliziert, wie Sie vielleicht denken, aber dennoch ist es sehr wichtig. Jetzt prüfen wir den Quellcode HTML auf Fehler, wie folgt:

  • Klicken Sie mit rechts auf den folgenden Link http://validator.w3.org – dann mit links: in neuem Tab öffnen. Es öffnet sich die englischsprachige Validator- Seite des W3C. Geben bei Validate by URI: Address Ihre Website-URL ein. Klicken Sie auf Check. Sie erhalten entweder eine positive Meldung in grün: Das Dokument ist valide. (also in Ordnung) oder eine negative Meldung in rot: Das Dokument ist nicht valide. (nicht standardkonform, enthält Fehler)

Vollziehen Sie das auch für die Unterseiten der zu prüfenden Website. Was wurde Ihnen angezeigt? Ist der Quellcode sauber geschrieben? Dann ist eine wichtige Grundlage für Ihre Website geschaffen.
Insbesondere die Fehlerquote 1 bis 10 resultiert meist aus Flüchtigkeit oder ungenauen Einstellungen (z.B. uncodierte Sonderzeichen wie &) in Content Management Systemen (CMS) und kann durch einen Check leicht behoben werden.

Aussehen der Website in anderen Browsern prüfen

Es gibt sehr viele Browser in verschiedenen Aktualitätsversionen auf unterschiedlichen Betriebssystemen. Jeder Browser hat so seine Eigenheiten und auch bekannte Anzeigefehler wie z.B. der Internet Explorer 6.0. Jetzt schauen wir, wie die zu prüfende Website in anderen Browsern aussieht, wie folgt:

  • Klicken Sie mit rechts auf den folgenden Link http://browsershots.org – dann mit links: in neuem Tab öffnen. Es öffnet eine Browser-Test-Seite mit zunächst unüberschaubaren Möglichkeiten. Bei Select klicken Sie auf none. Nun geben Sie oben Ihre Website-URL ein und markieren jetzt die gewünschten Ansichten für Betriebssysteme und Browser. Sinnvoll sind Haken bei Linux: Konqueror und Firefox; bei Windows: Firefox, Opera und verschiedene Internet Explorer 6.0 und 7.0; bei Mac: Firefox und Safari – Klicken Sie auf Abschicken.

Die Browser-Ansichten werden nach und nach in dem sich öffnenden Fenster angezeigt, also bitte die Seite ab und zu aktualisieren. Sind alle Ansichten geladen, können Sie sich alles zusammen in einem ZIP-Archiv herunter laden. Bei Ihnen lokal entpackt erhalten Sie Screenshots (Bildschirmansichten) als Grafiken.
Sieht die Website überall gleich aus? Wenn nicht, gibt es gravierende Unterschiede oder sogar Anzeigefehler?

Verwendet die Website Frames als Seitenaufteilung?

Die Frame-Technik ist für zwei Bereiche zu unterscheiden: Das iframe (eingebettetes Frame im Inhalt) dient zur Einbindung fremder Inhalte wie z.B. von Werbung und wird hier nicht geprüft. Was uns interessiert ist das Auffinden von echten Frames in Websites.

Frames (Teile, Bereiche) sind jeweils eigenständige Dateien und Bestandteile von Framesets als grundlegende Aufteilung der Website wie: eine Frame-Datei für den Kopfbereich, eine Frame-Datei für die Navigation und eine Frame-Datei für den eigentlichen Inhalt. Diese Technik stammt aus frühen Tagen des Internets. Insbesondere auch wegen der niedrigen Übertragungsraten (z.B. 56K Modem) war das eine gute Lösung, damit z.B. Grafiken im Kopfbereich und in der Navigation nicht immer wieder neu übertragen werden mussten. Es wurde beim ersten Aufruf der Website alles einmalig geladen, dafür mussten nun für die weiteren Inhalts- und Unterseiten der Website nur diese eigentlichen Inhalte (Inhalts-Frame) neu geladen werden.
Suchmaschinen indexieren beispielsweise alle drei Frames, die aber für die Suchmaschine in keinem Zusammenhang stehen, so kann es passieren, das in Suchmaschinen-Suchergebnissen nur die Inhaltsseiten angezeigt werden und die Navigation fehlt. Der auf das Suchergebnis klickende Besucher kann dann nicht navigieren, meist ist auf diesen Inhaltsseiten nicht einmal ein Link zur Startseite, damit auch alle anderen dazugehörenden Teile (Frame-Dateien) der Website geladen werden können. Schwierigkeiten gibt es auch beim Ausdruck und beim Lesezeichen setzen (Bookmark) einer Inhaltsseite. Der Seitentitel und weitere suchmaschinenrelevante Daten bleiben immer gleich.

Die Tatsache, dass Suchmaschinen und moderne mobile Endgeräte, wie PDA oder Handy diese Technik nicht umsetzen können, sollte Grund genug sein, diese Technik nicht mehr zu verwenden.

Prüfen Sie das wie folgt:

  • Gehen Sie im Browser Firefox über Ansicht, Webseiten-Stil auf kein Stil.
  • Aktualisieren Sie die Website im Browser.
  • Falls sich Ihr Browserfenster im Vollbildmodus befindet, verkleinern Sie es, indem Sie ganz oben rechts den entsprechenden Schalter neben dem Fenster-Schließen-Kreuz betätigen.
  • Fassen Sie die untere rechte Ecke Ihres Browserfensters mit der Maus zum Verkleinern, linke Maustaste drücken und gedrückt lassen und jetzt nach links oben ziehen bis nur noch die Hälfte der Fenstergröße vorhanden ist. Wenn die zu prüfende Website aus Frames erstellt wurde, sind nun in verschiedenen Bereichen der Website insgesamt mehr als zwei Scrollbalken zu sehen. Indem Sie die Scrollbalken einzeln bewegen, sehen sie genau die betreffenden Bereiche.

Indem Sie mit rechts in einen leeren Bereich eines Frames Klicken, dann im Auswahlmenü: Aktueller Frame steht, haben Sie ebenfalls eine Bestätigung für die veraltete Technik.

Ladezeiten und Dateigrößen

Klicken Sie einfach mit rechts auf ein inhaltliches Foto in der zu prüfenden Website, klicken mit links auf Eigenschaften, Sie sehen die Dateigröße und das Format angezeigt. Für ein beispielsweise 200 Pixel mal 250 Pixel großes Foto in ansehnlicher Qualität sollten 25 KiloByte nicht überstiegen werden. Nebenbei können Sie auch gleich, Sie erinnern sich, den wichtigen Alternativtext überprüfen.

Negativ zu bewerten sind inhaltliche Bilder, die zwar in ein kleines Format gebracht sind, jedoch in der Original-Größe geladen werden müssen. Durch das Deaktivieren der Stile im Browser können Sie das erkennen, ob ein Foto in großem Format vorliegt: Gehen Sie im Browser Firefox über Ansicht, Webseiten-Stil auf kein Stil. Im Besten Fall sollten auch hier alle Bilder in derselben Formatgröße wie mit Stil angezeigt sein. Aktivieren Sie anschließend wieder die Stile im Browser.

Ein weiterer ergänzender Technik-Test

Gehen Sie im Browser Firefox über Extras zu Seiteninformationen. Es öffnet ein kleines Fenster mit der Registerkarte Allgemein. Hier sind einige wichtige Informationen, wie Anzeigemodus (Standardkonform oder Quirks) und Größe der HTML-Datei zu finden. Die Registerkarte Medien listet alle weiteren Dateien, wie inhaltliche Bilder und Hintergründe auf. Mit Klick im oberen Feld auf eine Datei, erhält man darunter die jeweiligen Informationen zum Format, der Dateigröße und auch zum Alternativtext (zugeordneter Text).

Soweit zunächst zum Technischen, lassen Sie uns noch einen weiteren, sehr wichtigen Blick wagen: die Suchmaschinentauglichkeit.

Letzte Aktualisierung: 11. Juli 2008

Eine Resonanz zu “Website-Technik prüfen”


Kommentar schreiben »

  1. Woran man so denken muss – ist schon eine kleine Wissenschaft… danke für diese Ausführung.

Kommentar schreiben