Webdesign-Regeln: Zusammenfassung

Gegenstand dieser Seite ist die Zusammenfassung allgemeingültiger formaler Regeln zum Web-Design. Die Zusammenfassung befindet sich immer noch im Aufbau.

Domainname

• mindesten 3 Zeichen, maximal 63 Zeichen lang
• zusammengesetzte Namen mit Bindestrich(en) verbinden
• immer gut: ein Schlüsselwort im Namen (es dürfen auch zwei sein)
• Top-Level-Domain: länderspezifische TLD ist besser als generische TLD (com, net, info, biz, usw.), auch eu ist zu vermeiden

Sitestruktur

• maximal vier bis fünf Hierarchiestufen
• Navigationsleiste (Navigationsmenü) dreistufig, tiefere Hierarchieebenen und Detailseiten manuell verlinken
• bei mehr Hierarchiebenen (wenn nötig, kann vorkommen): Site in Untersites aufteilen, jede Untersite mit eigener Navigation, Verlinkung zwischen den Untersites manuell
• die erste (oberste) Navigationsebene sollte nicht mehr als (etwa) sieben Elemente enthalten

Navigationshilfen für den Besucher

• Schnellzugriffsleiste (shortcuts)
• Breadcrumb (Pfad zur aktuellen Seite, zur Orientierung des Besuchers)
• manuelle Links zwischen zusammengehörigen Seiten, auf mehrfach verlinkten Zielseiten unbedingt Rücksprung (nächster Punkt) implementieren
• Rücksprung auf vorher besuchte Seiten (History, "back / zurück")
• Sprung zum Seitenanfang ("top / nach oben")

Quelltext- und Datei- bzw. Media-Verzeichnis- und Pfadnamen

• sprechende kurze Namen
• zusammengesetzte Namen mit Bindestrich und nicht mit Unterstrich verbinden
• Nummern vermeiden (z. B. www.mydomain.tld/irgendwas/0815.php)

mehrsprachige Sites

• Implementierung je nach CMS - ggf. manuell nachbessern
• direkte Verlinkung zwischen den Sprachversionen einer Seite (Page), die dem Besucher erlaubt, eine Seite in verschiedenen Sprachen anzusehen, ohne über die jeweilige Startseite geführt zu werden
  

wird fortgesetzt

zurück   |   nach oben

Seitentitel (Browsertitel)

• eindeutig pro Site 
• maximal 65 bis 70 Stellen lang (inkl. Leerschläge)
• ein bis zwei Schlüsselwörter
• bei mehreren Schlüsselwörtern: wichtige links
  (häufige Empfehlung für einen Firmennamen im Seitentitel: Firmenname am Schluss - wir ignorieren diese Empfehlung)

Description

• eindeutig pro Site
• minimal 50, maximal 150 bis 155 Stellen lang (inkl. Leerschläge)
• wohlgeformte Sätze
• wenige Schlüsselwörter, Übereinstimmung mit Schlüsselwörtern im Text zwingend
• inhaltliche Übereinstimmung mit Seitentext

Keywords (Meta-Tag)

• Keyword-Kombination eindeutig pro Site
• wenige sind besser als viele, maximal acht bis zehn
• Mehrfachverwendung eines Keywords (in mehreren Seiten) minimieren
• Übereinstimmung mit Seitentext
  

Schlüsselwörter (im Seitentext)

• ein bis zwei Haupt-Schlüsselwörter pro Seite
  

Überschriften und Absatztitel

• genau eine Seitenüberschrift h1 für eine Seite, eindeutig pro Website
• inhaltliche Übereinstimmung mit Seitentitel, Description, Keywords und Seiteninhalt
• keine Lücken in den Überschriftenebenen
  

Seiten-Kopf

• gliedern, Kopfelemente zur Navigation (Navigationsleiste, Schnellzugriff, Breadcrumb) müssen auf einen Blick erkennbar sein
• Höhe des Seitenkopfs begrenzen, keine hohen Kopfbilder

Seiten-Body

• wichtige Textabschnitte oben platzieren ("above the fold"), die Essenz einer Webseite muss lesbar sein, ohne Scrollen zu müssen
• lange Seiten in Absätze gliedern, ggf. Absätze mit Überschriften (ab Ebene h2) versehen
• bei vielen Absätzen: Absatzliste (Inhaltsverzeichnis mit Auflistung der Absatztitel)

Textauszeichnung

• ausgezeichnete Texte (fett, kursiv) haben höheres Gewicht bei den SuMas
• sparsam verwenden, vorzugsweise auf Schlüsselwörter anwenden
• keine Mehrfachauszeichnung des gleichen Wortes
  

weitere Themen:

• Schriftfarbe
• Schriftgrösse (Schriftgrad)
• Schriftart
• usw.
  

zurück   |   nach oben

Text ist wichtiger als Bilder, Flash / Videos, Audio / Sound und andere Animationen.

Auch in Seiten, in welchen der Schwerpunkt auf Multimedia liegt (wie z. B. Diashows), unbedingt einen einleitenden Text einbetten. Der Text sollte die bildhaft dargestellten Sachverhalte kurz und prägnant beschreiben.

Hier folgt später noch mehr ...

zurück   |   nach oben

Text dieses Absatzes in Arbeit. Stichwörter:

• Schlüsselwörter (Suchwörter) des Besuchers verwenden

• Fachbegriffe und technische Termini fürs Fachpublikum sowie auch fachliche "Mode-Termini" (Schlagwörter, Buzzwords) verwenden

• Schlüsselwörter auf Basis Suchwortanalyse

• idiomatische Termini

zurück   |   nach oben

Namen der Bilddateien

• sprechende Namen, die den Bildinhalt kurz beschreiben
• mehrere Wörter mit Bindestrich verbinden (nicht mit Unterstrich)

Bildbeschreibung: alt- und title-Attribut

• jedes Bild mit einer eindeutigen Bildbeschreibung in Textform versehen
• wo sinnvoll, Schlüsselwörter in die Bildbeschreibungen aufnehmen
• der Beschreibungs-Text kann Zeilenumbrüche enthalten
• maximale Länge: immer noch unklar, begrenzen auf 120 bis 150 Zeichen
• das alt-Attribut ist "wichtiger" als das title-Attribut

zurück   |   nach oben

• Links in Form von Ankertexten (keine www-Adressen, Ausnahmen möglich)
• Ankertexte: klare Beschreibung des Link-Ziels, mit Schlüsselwörtern des Ziels
• gleiche Schriftgrösse wie der sie umgebende Text
• gut lesbare Schriftfarbe
• Grafiken (anstelle von Ankertexten) vermeiden (Ausnahmen möglich)
• keine toten Links

zurück   |   nach oben

Liste in Arbeit.

• kurze Ladezeiten
• Anzahl und Grösse der von fremden Servern (z. B. Google, Facebook, Wetter-Sites usw.) geladenen Elemente minimieren
• Bilder nur in der benötigen Grösse laden (bzw. auf die benötigte Grösse reduzieren)
• Ressourcen (CSS, Javascript, Bilder usw.), wenn möglich, komprimiert ausliefern

zurück   |   nach oben

Name des Server-Verzeichnisses einer Webseite (hatten wir oben schon)

• kurzer sprechender Name, nach Möglichkeit keine Nummern
• wenn mehrere Wörter: mit Bindestrich verbinden (nicht mit Unterstrich)

Name des Quelltextes einer Webseite

• index.html oder zutreffenden Typ
• andere Namen: kurz und sprechend, nach Möglichkeit keine Nummern
• wenn aus mehreren Wörtern zusammengesetzt: Wörter mit Bindestrich verbinden

.htaccess

• für Umleitung mit / ohne "www." auf die andere Variante (welche, spielt keine Rolle)
• für Umleitung Startseite mit index.html auf Startseite ohne index.html, oder umgekehrt
• für Umleitung (permanent) von obsoleten Seiten auf neue Seiten-Versionen
• für HTTP-Statuscode 410 "Gone"
• für eigene Fehlerseiten

robots.txt

• mindestens eine leere robots.txt ins Root-Verzeichnis stellen (oder eine mit einem Kommentar)
• wird für Suchmaschinenausschluss nicht benötigt, siehe unten

sitemap.xml

• nice to have, bringt aus unserer Erfahrung keinen Vorteil, nur Update- und Verwaltungsaufwand

Subdomains

• unbedingt prüfen, ob der Hoster Subdomains auch als Subdomains und nicht als Unterverzeichnisse implementiert
• wenn nicht: Hoster wechseln

Suchmaschinenausschluss

• funktioniert sehr zuverlässig mittels des robots-Meta-Tag

eigene Fehlerseiten

• sind benutzerfreundlich
• wenn Fehlerseite für Statuscode 404, dann auch sicherstellen, dass die Fehlerseite Statuscode 404 zurückgibt - und keinen soft 404 (404 →   301/302 →   200 stiftet nur Verwirrung, nicht nur bei SuMas)

zurück   |   nach oben

• Scrolling minimieren
• Navigationselemente
• Schnellzugriffe
• Logo, Kopfbild
• mehr zu Kompression, Antwortzeiten; Benutzerreaktion
• Animationen
• Farben
• mehrsprachige Sites; Verwenden von Translators
• URL-Shortener

zurück   |   nach oben

Wird fortgesetzt.