Anforderungen an eine Webseite

Veröffentlicht am

Das A und O jeder Webseite sind die Inhalte und die Funktionen, die auf der Webseite angeboten werden. Die folgende Aufzählung listet viele Anforderungen auf, die eine gute Webseite erfüllen sollte – aus technischer Sicht und natürlich aus aus der Sicht der Benutzer. Die Checkliste ist dabei in Kategorien unterteilt, manche Aspekte ließen sich sicherlich mehreren Kategorien zuordnen.

HTML

  • valide HTML-Dokumente
  • Doctype HTML 5
  • Zeichensatzkodierung UTF-8
  • Definition der Hauptsprache mit <html lang="...">
  • Auszeichnung von Sprachwechseln (Attribut lang="...")
  • keine internen CSS-Definitionen
  • keine Frames, keine Applets und keine Flash-Objekte
  • keine Tabellen für das Seitenlayout
  • keine „Divitis“
  • keine unnötigen Klassen und IDs
  • keine Elemente zur Direktformatierung („Spaghetticode“)
  • korrekte Verwendung von HTML-Elementen
  • Komprimierung der Dateigröße

CSS-Dateien

  • valides CSS
  • CSS-Dateien möglichst zusammenfassen
  • möglichst kurze und wenige Selektoren
  • Verwendung von Kurzschreibweisen
  • dekorative Bilder im CSS laden
  • Komprimierung der Dateigröße

Inhalte

Das A und O jeder Webseite sind die Inhalte und die Funktionen, die die Webseite anbietet. Schließlich kommen die Benutzer deswegen.

  • hoher Textanteil am Quelltext
  • kein Duplicate Content
  • sinnvolle Gliederung von Texten durch Überschriften
  • Sprache der Zielgruppe angemessen
  • Erklärung von Abkürzungen und komplexen Begriffen
  • Downloads im PDF bereitstellen
  • einfache und kurze Formulare sowie eindeutige Rückmeldungen, insbesondere bei fehlerhaften Eingaben
  • Webseite bei deaktiviertem JavaScript vollständig nutzbar
  • Fehlerseiten mit korrektem HTTP-Statuscode
  • ein Impressum sowie AGB und Datenschutzerklärung, soweit erforderlich

Suchmaschinenoptimierung

  • seitenspezifisches, aussagekräftiges title-Element
  • Metabeschreibung (ca. 150 Zeichen) auf jeder Seite
  • sitemap.xml im Wurzelverzeichnis
  • robots.txt im Wurzelverzeichnis

Navigation

  • textbasierte Navigation
  • Menüstruktur aus Nutzersicht
  • Brotkrumenpfad mit den übergeordneten Seiten
  • Suchfunktion
  • Index oder Sitemap bei großen Seiten
  • interne Verlinkungen im Text
  • Hervorhebung von Links vom restlichen Text
  • Unterscheidung von besuchten und unbesuchten
  • Kennnzeichnung des aktiven Menüpunktes
  • Links mit title-Attribut, das zusätzliche Informationen zum Linkziel beinhaltet
  • aussagekräftige Verlinkungstexte
  • eindeutige Kennzeichnung von Linkzielen (insbesondere bei externen Links)
  • standardmäßig Links in denselben Tab öffnen
  • Link zur Startseite (mit Logo oder Text) oben links
  • Links zu Warenkorb, Login, Hilfe oben rechts
  • keine toten Links (= Links zu Seiten, die es (nicht mehr) gibt)
  • Sprungmarken bei langen Texten

Benutzerfreundlichkeit und Barrierefreiheit

Benutzerfreundlichkeit, oft mit dem englischen Begriff Usability bezeichnet, erreicht man, indem die Orientierung und Führung der Benutzer durch Links und Navigation optimiert wird.

Barrierefreiheit, auch Zugänglichkeit (englisch Accessibility), bedeutet, dass für möglichst alle Menschen zugänglich ist, d. h. also Menschen mit Einschränkungen voll nutzbar. Ob eine Webseite diesem Anspruch genügt, kann nur ein Praxistest zeigen.

  • Alternativtexte für alle Nicht-Text-Elemente wie Bilder (alt-Attribut)
  • Favicon favicon.ico im Wurzelverzeichnis
  • vergrößerte Ansicht für Bilder
  • sinnvolle Standardeinstellungen für Text
  • skalierbare (anpassbare) Schriftgröße, d. h. relative Größenangaben in em verwenden (sonst ist die Schriftgröße im IE nicht anpassbar)
  • im CSS eine Reihe ähnlicher Schriften notieren, gefolgt von einer generischen Schriftfamilie
  • Text nicht zu breit (optimale Zeilenlänge: 40 bis 80 Anschläge, im Deutschen entspricht das ca. 10 Wörtern)
  • größerer Zeilenabstand längeren Textzeilen und größerem Kleinbuchstaben/Versalien-Verhältnis
  • Ausrichtung des Textes: linksbündiger Flattersatz
  • Farbkontrast zwischen Schrift und Hintergrund
  • keine Informationsvermittlung nur über Farbe
  • schnelle Antwort- und Ladezeiten
  • optimierte Bilder
  • korrekte Darstellungsweisen in den gängigsten Webbrowsern

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.