Goldene Regeln zur Homepage-GestaltungGolden Rules for Homepage Design
Browser-Unabhängigkeit
Browser Independency
Nicht für spezielle Browser schreiben.
Nicht jeder Betrachter benutzt einen Windows-PC!
Zwinge niemanden, zur Betrachtung deiner Seiten ein bestimmtes Produkt zu verwenden.
Das Geniale an HTML ist seine Plattformunabhängigkeit. Schließlich sind im Internet die unterschiedlichsten Rechner,
Tablets 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 Microsoft 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 (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 640×480 oder verkleinere das Browser-Fenster.
Keine Frames verwenden
Frames wurden ca. 1995 bis 2010 verwendet. Sie sind obsolet und in HTML5 (2014) nicht mehr enthalten.
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örter, 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 ß für ß) oder gib
im Header der Seite den verwendeten Zeichensatz an, z.B. <meta charset="utf-8">
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 fehlertolerant. Siehe z.B. HTML 4.01-Spezifikation oder
HTML5-Spezifikation
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. Du willst doch nicht dazu beitragen, dass WWW schließlich doch für „world wide wait“ steht!
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.
Titel 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.
Goldene Regeln zur Homepage-GestaltungGolden Rules for Homepage Design