Suche in: Suchtipps»

Kategorien » Design » Qualitäts-Check für Premium-Webseiten

Qualitäts-Check für Premium-Webseiten

06.11.2007 um 17:09 Uhr
Emersacker
abgelegt unter Design
Die zehn wichtigsten Kriterien, die bei der Gestaltung von Webseiten beachtet werden müssen, wenn man in den Olymp des Webdesigns aufsteigen will: Check für Webseiten

Wenn Sie da gar nicht hin wollen, dann sollten Sie jetzt aufhören zu lesen.

Es ist ja leider nicht ganz leicht, Außenstehenden, die noch nie einen Blick auf den Quelltext einer Webseite geworfen haben, zu vermitteln, womit ich im Allgemeinen meine Zeit so vertrödele, ich habe das darum hier mal in eine übersichtliche, leider aber auch etwas langweilige Form gebracht. Ob alle diese Maßnahmen auch wirklich Ihre Seite besser machen können, kann ich Ihnen natürlich nicht garantieren, aber seien Sie versichert, den Arbeitsablauf wird es schon mal deutlich verlangsamen. twinkle

Ach ja, und wenn Sie in Punkt eins versagen, dann wird das wohl eh nichts mehr, da können Sie sich gleich wieder weg klicken. Und hier kommen sie:

Meine zehn Punkte

  1. Achten Sie auf gute Qualität ihres Inhalts. Benutzen Sie einen aussagekräftigen Seitentitel, semantisches, schlankes und übersichtliches Markup. Machen Sie, wo immer es sich anbietet, Gebrauch von Listen und gliedern Sie die Seite durch Überschriften. Diesen Punkt sollte man eigentlich noch weiter ausführen, das mache ich aber mal in einem Extra-Beitrag.
  2. Der Seitenquelltext muss den Gültigkeitstest beim W3C-Validator fehlerlos überstehen. Öffnen Sie dazu die Adresse http://validator.w3.org/, dann URL der zu prüfenden Seite in das Adressfeld eingeben und die "Check"-Taste drücken. Gibt der Validator "grünes Licht", so könne Sie diesen Punkt getrost abhaken, die wichtigste Hürde hat die Seite überstanden.
  3. Verweise und Pfade zu eingebundenen Dateien müssen auf ihre Gültigkeit geprüft werden. Besonders schnell geht das, wenn Sie dazu den W3C-Linkchecker benutzen.
  4. Inhalt und Darstellung sollten konsequent getrennt sein. Das bedeutet: vermeiden Sie das FONT-tag, missbrauchen Sie Tabellen und Frames nicht zu Layoutzwecken, benutzen Sie wenn möglich keine inline-styles. Setzen Sie zur Steuerung des Designs stattdessen konsequent auf ausgelagerte Stylesheets. Zwei bis drei externe CSS-Dateien sollten hier genügen twinkle. Auch die Deklarationen in ihrer CSS-Datei sollten Sie auf Gültigkeit überprüfen. Benutzen Sie hierzu den CSS-Validator.
  5. Wenn Sie Bilder auf Ihrer Webseite einbinden, so achten Sie auf folgende Punkte:
    • Reduzieren Sie immer die tatsächliche Pixelgröße der Bilddatei, um diese auf die benötigte Ausdehnung zu reduzieren, niemals die Auflösung! Nach einer Änderung an der Bildgröße muss das Bild nachgeschärft werden.
    • Benutzen Sie die Möglichkeiten der kompressiven Dateiformate JPG, GIF und PNG, um die Dateigröße (ohne sichtbaren Qualitätsverlust) zu minimieren.
    • Achten Sie beim Speichern darauf, dass alle unbenötigten Informationen (wie z.B. die EXIF-Daten, Kameratyp, Belichtungszeit etc.) abgeschnitten werden, oft blähen diese von der Kamera geschriebenen Daten die Datei um das Doppelte auf.
    • Betten Sie keine Farbprofile in die Bildddateien ein.
    • Bilddateien für das Web sollten immer im RGB-Farbraum abgespeichert sein.
  6. Minimieren Sie nun die Größe des Browserfensters. Auch wenn der verfügbare Bereich zur Seitenanzeige 6oo Pixel und weniger beträgt, sollte der Hauptinhalt der Seite nicht angeschnitten sein. Wichtige Elemente außerhalb des sichtbaren Bereichs der Seite, besonders die Navigation, müssen durch Scrollen erreichbar sein. Benutzen Sie zu diesem Test einen Browser, der die Fenstergröße anzeigen kann, wie Firefox oder Opera.
  7. Deaktivieren Sie nun JavaScript (Anleitung: JavaScript deaktivieren in den wichtigsten Browsern) und laden Sie die Seite neu. Überprüfen Sie, ob alle wichtigen Bestandteile der Seite noch funktionieren, und ob die Seite noch voll navigierbar ist.
  8. Überprüfen Sie nun die Ladegeschwindigkeit ihrer Webseite. Hierzu können Sie ein kostenloses Tool benutzen, das Sie unter der Adresse http://www.websiteoptimization.com/services/analyze/ aufrufen. In dem übersichtlichen und aussagekräftigen Testbericht (Englisch) werden auch hilfreiche Verbesserungsvorschläge gegeben; dieses Tool kommt auch mit der Analyse von Frames gut zurecht. Eine browserbasierte Alternative zu diesem Online-Service ist die Firefox-Erweiterung YSlow die allerdings nur zusammen mit der Erweiterung Firebug eingesetzt werden kann.
  9. Wenn Sie bis jetzt gut durchgekommen sind, sollte auch die nächste Stufe eigentlich kein Problem mehr sein: Prüfen sie die Webseite auf optimale Zugänglichkeit. Einen automatischen Service zur Bestimmung der Konformität mit den WCAG-Richtlinien bietet Cynthia.
  10. Haben Ihre Seiten alle Tests überstanden? Na, hervorragend, ich gratuliere, aber jetzt wird es wirklich haarig: Überprüfen Sie Ihre Seiten nun auf einheitliche Darstellung in allen Browsern und auf den meistverbreiteten Plattformen Windows, MacOSX und Linux. Ja, allen Browsern, von denen Sie nur denken können. Dazu müssen Sie sich nicht unbedingt alle auf ihren Rechner installieren, b.z.w. los rennen und sich noch ein paar Computer oder VM zulegen - es gibt ja den praktischen Service von http://browsershots.org/. Adresse eingeben, gewünschte Browser aus der Liste auswählen, tja und dann etwas warten, bis Sie in der Warteschlange drankommen. Die Wartezeit können Sie überbrücken, indem Sie solange die versammelten Screenshots der Konkurrenz anstaunen.

Haben Sie vielen Dank, dass Sie bis jetzt durchgehalten haben. Mit soviel Geduld können Sie es noch weit bringen. smile