An publizierte Regeln für Web Design herrscht kein Mangel, sie beziehen sich in erster Linie auf eine sinnvolle visuelle Darstellung con Content.
Ein gewisses Defizit herrscht hingegen bei Leitlinien für deren technisch optimale Umsetzung.
Die hier aufgeführten Punkte sollen dem Webmaster helfen, eine gute Website auch über
einen langen Zeitraum effizient und mit Spass ausbauen und pflegen zu können.
Meine Regeln richten sich somit insbesondere an jene Webmaster, die viel Content zu Verwalten haben.
Manch einer der hier vorgestellten Punkte mag banal wirken, manch anderer zu radikal...
1) Strikte Trennung von
a. Inhalten,
b. DarstellungsKategorien und (Gliederung -> HTML/CSS tags)
c. DarstellungsStilen. (Formatvorlagen -> CSS Selektoren)
2) Gliederung / Formatvorlagen
Allen wichtigen Darstellungskategorien (z.B. ueberschriftEbene1, überschriftEbene2, ueberschriftEbene3, fliessText, infoText, hervorgehoben, link, fussnote, buttonEbene1, buttonEbene2, navBar, fussBar, etc....) muessen CSS Selektoren zugeordnet werden. Die Stildefinition dieser Kategorien erfolgt dann im externen Stylesheet.
Dies erfordert strukturelle Analyse der Dokumente, um einheitliche Gliederung erstellen zu können. Vgl. Formatvorlagen Word.
Beispiel: Eine Überschrift "4.Semester" erhaelt den generischen Selektor "überschriftEbene2". Keinesfalls jedoch einen Selektor der Art "üb4Semester" o.ae, da zur Formatierung nicht Inhalt, sondern Funktion massgebend.
3) CSS File
Es soll mindestens ein externes CSS File erstellt werden, welches alle nötigen Stil Definitionen enthält.
Daher: Inline CSS im HTML Quelltext nur in einzelnen Ausnahmefällen.
4) CSS Version
Modernes CSS verwenden, keine Ruecksichtnahme auf alte Browser. OK ab IE 4, Opera 5, Netscape 6.
Netscape 4 macht nur Aerger, daher ignorieren (<5% Marktanteil jetzt). Auf NN4 schaut es dann eben nicht perfekt aus, bleibt aber dennoch Lesbar.
5) Buttons
Keine Grafiken oder Tabellen. Definition (Rahmen, Abstände, Farben, Fonts...) wiederkehrender Elemente nur ueber CSS.
Dies fördert insbesondere bei grossen Sites eine leichtere Wart- bzw. Ausbaubarkeit.
Sofern Rollovereffekte gewünscht sind, auf CSS zurückgreifen. Javascript ist hierfür nicht notwendig.
6) Hintergrund GIF
Hintergrund gif der Seite klein (<<10k), wenn ueberhaupt.
Wir wollen kein Waschmittel verkaufen.
Grosse Hintergundbilder verlangsamen das Scrollen.
7) Grafiken
Nur als Icons zu verwenden (Corporate Logo, Bullets, Pfeile, Mail Symbole etc...), nicht aber als Schriften oder Linien etc.
8) Tabellen
Keine durchsichtigen GIFS als Platzhalter. Rahmen, Abstände, Farben, Fonts etc. in CSS definieren.
Cellspacing, cellpadding und border attribute durch CSS äquivalente ersetzen.
Insbesondere von Bedeutung bei Tabellen, dessen Design mehrfach verwendet wird, z.b. fuer Navigationsbars.
Tabellen "mit System" verwenden, keine Tabellenorgien ("Slice" Funktion von schlauen Generatoren) im Grundlayout. Weshalb muessen sich einige Webseiten aus tausenden von Puzzleteilen (= geslicte Tabellen) zusammenbasteln beim Laden?
9) Fonts
Ebenfalls ausschliesslich über CSS zu definieren. Keine GIF Titel/Buttons. Keine Downloadbaren Fonts.
Keine ausgefallenen M$ Fonts verwenden.
10) Positionierung
Fliessend, keine fixen x/y Positionen von Elementen (Layern). Fliesstext muss gesamte Bildschirmbreite einnehmen können.
Eine 800x600 Festformtattierte Seite sieht auf 1024x768 lächerlich aus. Die Zeit schreitet voran, Bildschirmauflösungen auch.
11) Links
Normale Links im Fliesstext standardmässig belassen (Unterstrichen). Verhalten von Links nach Geschmack in erster Linie mit CSS verändern.
12) Navigationsbars
Mag die Versuchung noch so gross sein: Kein Javascript für die Navigation.
Sicher muss man nicht auf Lynx und Konsorten Rücksicht nehmen, vielmehr aber auf die unzähligen Browser (Hersteller x Versionen x Betriebssysteme).
Und wer weiss schon, was IE in 2 Jahren verdaut, oder Opera, oder ... Wenn die Navigation nicht funktioniert, ist die Site für die Katz.
Links/Buttons als eigenständige Einheiten (Keine Image Maps).
13) Flash
Nein. Des Webmasters Stolz ist des Surfers Leid.
14) HTML Formatierung
Der HTML Code muss sauber Formatiert sein. D.h. Signifikante Container Tags einruecken, Zeilenumbruch wo Sinnvoll.
Keine redundanten Tags! (Vorsicht bei WYSIWIG Editoren. Wenig brauchbar sind z.B. FrontPage und GoLive.).
15) HTML Tags Syntax
XML konforme Tag Syntax verwenden. (Jedes Tag muss abgeschlossen sein, auch Atomare (<br /> oder <p>...</p> etc.).
Dies ermöglicht Arbeit mit XML Viewern/ Editoren. Wenngleich alle Browser auch die "alte" Syntax akzeptieren, sollte man sich bereits heute an die XML Rechtschreibreform halten.
16) Verbotene Tags
Tags, die durch CSS obsolet geworden sind, nicht verwenden (z.b. <font....>, Formatierungsattribute im <body> Tag.)
17) Tricks
Keine schlauen, aber oft unüberlegten Tricks im Grundlayout, modernes HTML/CSS machen diese zudem vielfach überflüssig.
Bei dynamisch generierten Webseiten kann der HTML Code vielfach nicht mit WYSIWIG Programmen erstellt werden. Vielmehr steht dieser oft zerstreut im
Quelltext des eigentlichen Programms...
18) Pagesize
Klein! Ballast muss begründbar sein.
19) Javascript
Nicht prinzipiell verboten. Soll jedoch minimiert werden. Z.b. verhindern Werbeblocker bzw. PopUp-Fensterblocker gewisse Codeteile, insbesondere zum Beispiel window.open(...).
20) Frames
Sind etwas verpönt, aber vielleicht doch nicht sooo schlecht? Ist Geschmacksache aber. Gerade bei "langsamen" Seiten mit umfangreicher Navigation stört es, wenn bei jedem Seitenaufbau auch die Navigationsleisten häppchenweise neu aufgabaut werden. Während der Ladezeit kann man in Framelosen Seiten nicht weiterclicken. Ist die Navigation hingegen statischen im Frame stets sichtbar, macht das zappen (und somit die gesamte Site) mehr Spass.
Mit Javascript kann man Frameseiten durchaus Bookmarkbar machen...
