Goldene Regeln

Aus Grossmann

Wechseln zu: Navigation, Suche

Browser-Unabhängigkeit

  • Nicht für spezielle Browser schreiben.
  • Zwinge niemanden, zur Betrachtung deiner Seiten ein bestimmtes Produkt zu verwenden.
  • Nicht jeder Betrachter benutzt einen PC mit Windows und Internet Explorer!
  • Das Geniale an HTML ist seine Plattformunabhängigkeit. Schließlich sind im Internet ja auch die unterschiedlichsten Rechner, Pads und SmartPhones mit verschiedenen Betriebssystemen (Linux, Windows, iOS, Android,...) miteinander verbunden. Setze dieses Konzept nicht aufs Spiel, indem du Elemente in deiner Seite verwendest, die den Betrachter dazu zwingen, ein bestimmtes Produkt einer bestimmten Firma zu verwenden - auch wenn diese Firma das gerne möchte.
  • Vermeide Seiten der Art "best viewed with MS Internet Explorer Version x.y". Betrachte deine Seiten vor Veröffentlichung mit möglichst vielen verschiedenen Browsern und mit älteren Versionen der verbreiteten Browser. So sehen viele Betrachter deine Seiten - weltweit!
  • Weitere Informationen zu dieser Thematik bei www.anybrowser.org und adf.wifak.uni-wuerzburg.de/browser (Aktion "Für alle Browser tauglich").

Unabhängigkeit von der Bildschirmauflösung

  • Entwirf deine Seiten auch für niedrige Bildschirmauflösung. Deine Seiten werden vielleicht auch auf 14-Zoll-Monitoren oder Smartphones betrachtet!
  • Häufig findet man leider im Web Seiten, die scheinbar an großen Monitoren (21 Zoll aufwärts) entwickelt wurden und nie in kleiner Auflösung betrachtet wurden. Solche Seiten zwingen den Betrachter zum lästigen horizontalen Scrollen.
  • Betrachte deine Seiten selbst in verschiedenen Bildschirm-Auflösungen, z.B. auch 640x480 oder verkleinere das Browser-Fenster.
  • Vermeide die Verwendung von Frames.
  • Durch Frames wird meist die informationstragende sichtbare Monitorfläche nur unnötig verkleinert.
  • Oft kommt die History-Funktion des Browsers durch die Verwendung von Frames ins Stolpern.
  • Frames verhindern ein korrektes Setzen von Bookmarks (Favoriten).
  • Manche Browser können Frame-Seiten gar nicht darstellen.
  • Seriöse Firmen bieten häufig eine NO-FRAMES-Version ihrer Seiten an.
  • Überlege, ob du Frame-Technik durch Verwendung von CSS und/oder JavaScript ersetzen kannst.

Verwendung von Links

  • Verwende aussagekräftige Links. Überlege genau, welche Wörter du als Link verwendest. Diese Wörter sollen möglichst genau kurz und präzise beschreiben, was den Betrachter nach dem Klick auf den Link erwartet.
  • Oft werden Web-Seiten nur überflogen (gescannt). Das Auge erfasst dabei als erstes (neben bewegten Grafiken) die Links, da sie farbig markiert sind.
  • Überlege genau, welche Wörter du als Link verwendest.
    Die Wörter zwischen <a href="..."> und </a> sollten möglichst genau kurz und präzise beschreiben, was den Betrachter nach dem Klick auf den Link erwartet.
  • Vermeide das HERE-SYNDROM.
  • Schlecht: Weitere Informationen über BliBlaBlu finden Sie hier.
  • Besser: Hier finden Sie weitere Informationen über BliBlaBlu. (Sicher findest du noch einen besseren Satzbau.)
  • Verwirre nicht durch farbige Markierung oder Unterstreichung von Wörtern, die keine Links sind.

Verwendung von Titeln und Überschriften

  • Verwende einen aussagekräftige Seitentitel.
  • Der Titel sollte die Seite einzigartig kennzeichnen.
  • Der Titel wird bei Bookmark-Listen (Favoriten) gespeichert.
  • Der Titel sollte den Inhalt der Seite kurz und treffend beschreiben, damit man sich anhand des Titels an den Inhalt der Seite erinnern kann.
  • Der Titel sollte die Seite weltweit eindeutig kennzeichnen.
  • Verwende für deine Homepage nicht den Titel "meine Homepage" oder den Dateinamen.
  • Verwende keine Umlaute im Titel.
  • Die Haupt-Überschrift <h1>Überschrift</h1> sollte sich am Titel orientieren.
  • Missbrauche keine Überschrift-Tags <h1>, <h2>, <h3>,... um Texte zu formatieren. Verwende besser CSS.
  • Verwende die Hierarchiestufen <h1>, <h2>, <h3>,... der Überschriften in der richtigen Reihenfolge.

Verwendung von Grafiken

  • Verwende kleine Grafiken.
  • Verzichte auf bewegte Grafiken (animierte GIFs) zur reinen Effekthascherei.
  • Verwende Grafiken, falls möglich, mehrfach.
  • Verwende die Attribute alt=..., width=... und height=... des <img>-Tags.
  • Denke an die Bandbreite / Ladezeiten. Grafiken sollten nur einige Kilobyte groß sein.
  • Biete bei größeren Grafiken Thumbnail-Versionen als Links an und gib hinter dem Link die Größe in kByte an.
  • Verwende JPG für fotoähnliche Bilder, GIF für comicähnliche Bilder.
  • Reduziere eventuell die Farbtiefe.
  • Verwende bei GIF das Unterformat "interlaced", dann wird die Grafik während des Ladens erst grob aufgebaut, dann verfeinert.
  • Verwende die Attribute width=... und height=.... Dann kann der Browser schon mal den Textteil der Seite aufbauen, während die Grafiken nachgeladen werden.
  • Verwende Grafiken von Icon-Größe, Trennlinien und Hintergrundbilder mehrfach. Sie werden sie nur einmal aus dem Web geholt und bei Bedarf aus dem Cache-Speicher des Browsers nachgeladen.
  • Manche Web-Surfer haben die automatische Anzeige der Grafiken abgeschaltet. Verwende das Attribut alt=... des <img>-Tags.
  • Zwinge den Betrachter nicht, die Grafiken zu laden, um navigieren zu können.
  • Verwende keine in Grafik umgewandelten Texte. Diese Unsitte ist gerade bei Navigationszeilen in Frame-Technik weit verbreitet. Suchprogramme finden keine Wörten, wenn sie in Grafik umgewandelt sind.
  • Denke an Blinde und Sehbehinderte, die sich die Seiten mittels Sprachausgabe vorlesen lassen. Betrachte deine Seiten selbst einmal mit abgeschalteter Grafik.

Korrektes HTML

  • Wandle Umlaute und Sonderzeichen um (zum Beispiel &szlig; für ß)
  • Verwende Anfangs- und Ende-Tags.
  • Verwende HTML-Befehle nicht zweckentfremdet.
  • Verwende HTML nach Spezifikation, sonst riskierst du Darstellungsfehler oder Unlesbarkeit auf manchen Browsern. Nicht alle Browser sind so fehlertolerant wie die Marktführer.
    Siehe z.B. HTML 4.01-Spezifikation
  • Maskiere Umlaute und verwende zu öffnenden Tags auch die schließenden Tags. (Ausnahmen: BR, LI, HR,...)
  • Achte auf korrekte Verschachtelung. Manche Web-Editoren machen hier Fehler...
  • Verwende logische Tags nicht zweckentfremdet, also z.B. ein Überschriften-Tag nicht zur Hervorhebung.
  • Verwende keine Web-Editoren, die kaum lesbaren, schlecht editierbaren, voluminösen HTML-Code produzieren. WYSIWYG und HTML widersprechen sich vom Grundkonzept. Oder willst du dazu beitragen, dass WWW schließlich doch für "world wide wait" steht?
  • Für den von FrontPage produzierten Code gibt es das Perl-Script Demoroniser (moron: Schwachkopf, Depp)

Eine Vorgänger-Version dieser Seite von 1998 findet sich hier: www.grossmann.info/regeln0.htm (archiviert bei web.archive.org)