Grundregeln für gutes Webdesign

Hallo zusammen, da ich gerade etwas Zeit und Lust hatte mal wieder etwas zu schreiben, und mit den anderen beiden Artikel die ich noch vorbereite nicht weiter komme, dachte ich mir ich schreibe mal wieder schnell was zum o.g. Thema.

In einem aktuellen Fall, ist mir aufgefallen, das es wichtig ist, Neulingen zu vermitteln warum gewisse Grundregeln im Webdesign notwendig sind. Das allein reicht aber noch nicht, denn viele wissen nicht wie diese Regeln lauten, bzw. worauf es ankommt.

Ich kenne sicher auch nicht alle Regeln und Feinschliffe in dieser Beziehung, aber ich kenne ein paar Grundregeln, die die Arbeit und die Fehlersuche erleichtern und verkürzen, sowie die Interoperabilität für die Browser erhöht.

Wie immer gilt: Dieser Artikel (und somit auch ich) erhebt NICHT den Anspruch der Vollständigkeit und auch nicht den Anspruch Fehlerlos zu sein. Von daher würde ich darum bitten auf Fehler meinerseits hinzuweisen und mich eben ggf. eines besseren zu belehren.

So, aber und nun zum eigentlichen Thema.

Als Grundlage für diesen Beitrag nehme ich den aktuellen Webstandard der W3C, XHTML und CSS, heran. XHTML in Kombination mit CSS 2 hat HTML abgelöst. Dabei gingen einige Tags verloren bzw. wurden in den CSS Bereich verschoben.

HTML = Hypertext Mark-up Language - Textauszeichnungssprache (veraltet)
XHTML = Extensible Hypertext Mark-up Language - Textauszeichnungssprache
CSS = Cascading Style Sheets - Formatierungssprache, z. B. für (X)HTML-Dateien

Einen kleinen Einblick darüber welcher Vorrat an Tags in der jeweiligen Sprache zur Verfügung steht finden Sie hier:

HTML-Referenz: http://de.selfhtml.org/html/referenz/
XHTML-Referenz: http://de.selfhtml.org/html/index.htm
CSS: http://www.css4you.de/browsercomp.html/standardbrowser
Web References = http://www.w3schools.com/

Bevor wir aber nun zu weit vom Thema abkommen, sollten wir vielleicht zunächst einmal einige Grundlegende Regeln festlegen und diese auch erläutern. Diese Regeln sind meistens für XHTML sowieso verbindlich, können und sollten aber auch für HTML gelten.


1.) Immer eine <!DOCTYPE Angabe machen
2.) Sich auf groß oder klein geschriebene Tags und Attribute einigen
3.) Attribute mit quotes öffnen und schließen
4.) Geöffnete Tags auch wieder schließen
5.) Formatierung auslagern in den CSS Bereich, oder eine eigene CSS Datei
6.) Sonderzeichen gegen Entities ersetzen
7.) HTML und CSS Code validieren

Werden diese 7 einfachen Regeln beachtet, sind bereits viele Fehlerquellen ausgeräumt, welche für eine falsche Darstellung einer Webseite im Browser sorgen können.

Aber warum sind diese Punkt so wichtig? Ganz einfach, ich erkläre es so gut es mir möglich ist.

zu 1) Dieser Punkt ist wichtig für den Browser. Anhand der <!DOCTYPE Angabe erkennt der Browser mit welcher Auszeichnungssprache die Webseite erstellt wurde. Daraufhin interpretiert der Browser die Seite nach den jeweiligen Regeln der Auszeichnungssprache. Die Regeln zur Interpretation sind von Browser zu Browser sowie je nach Auszeichnungssprache verschieden. So kann es sein, das eine Webseite welche den gleichen HTML Code, aber eine andere <!DOCTYPE Angabe enthält im selben Browser etwas anders dargestellt wird. Noch schlimmer kommt es, wenn die <!DOCTYPE Angabe sogar ganz fehlt. Ist das der Fall wechselt der Browser spätestens dort in den QUIRK Modus. In diesem ist er durchaus Fehlertoleranter, weil er versucht, durch eigene Interpretation, den Fehler zu beheben. Das kann, muss jedoch nicht gut gehen. Der QUIRK Modus wird übrigens auch aktiviert, sollte die Seite zwar eine <!DOCTYPE Angabe besitzen, aber der HTML Code einen Fehler haben bzw. Tags verwenden, die in dieser Auszeichnungssprache nicht erlaubt sind.
DOCTYPE-Beispiele

zu 2) Diese Regel hat eigentlich nur eine rein psychologische Rolle. Solange man darauf achtet innerhalb eines Tags,
z.B. <a> </a> nicht Groß- und Kleinschreibung zu mischen ist alles in Ordnung (<a> </A> - so was ist nicht okay). Da das aber nicht immer so leicht ist, und man solche Fehler leicht übersieht, hat es sich als gut erwiesen, von vorn herein darauf wert zu legen, entweder ALLE Tags groß bzw. alle Tags klein zu schreiben.

zu 3) " sind ein beliebter Fehler, eigentlich sollte jedes Attribut damit geöffnet und geschlossen werden. Leider wird dies oft vergessen. Dadurch kann es leider passieren das gewisse Attributsangaben falsch bzw. gar nicht vom Browser abgearbeitet werden. Deshalb sollte man den Wert eines Attributes immer in " " setzen. Laut den Spezifikationen der W3C ist es nämlich nicht zwingend notwendig dies zu tun. Besser ist es aber in jedem Fall, und wie ich bereits erwähnte führt die Nichteinhaltung bei einigen Browsern ggf. zu Problemen. Mit XHTML wurde dieses vorgehen Pflicht.

zu 4) Genau wie bei Punkt 3) ist es auch hier. In HTML noch keine Pflicht (was aber einige Browser trotzdem dazu brachte Zicken zu machen.) in XHTML mittlerweile schon.

zu 5) Dies ist ebenfalls wieder eine psychologische Regel. Eigentlich hat es keinerlei Auswirkung ob die Formatierung eines Tags direkt vorgenommen wird, oder im CSS Bereich. Aber es hat sich gezeigt, dass es der Übersichtlichkeit und Leserlichkeit des HTML-Codes deutlich zuträglich ist. Außerdem ermöglicht der CSS Bereich z.B. Elemente zu gruppieren die die gleichen Eigenschaften haben sollen. Somit wird der Quelltext kleiner und das zahlt sich mehrfach aus. Erstens in der Ladezeit, und bei Hoch-frequentierten Seiten außerdem noch im Traffic.

zu 6) Sollte man diesen Punkt nicht beachten kann es schon mal vorkommen dass ein Browser der auf einen anderen Zeichensatz eingestellt ist, einem entweder falsche Sonderzeichen, oder gar nichts sagende Kästchen anzeigt. Wenn man Sonderzeichen verwendet, sollte man diese durch ihre HTML Entities ersetzten. Dadurch wird das Sonderzeichen unabhängig von der gewählten Textkodierung richtig angezeigt!
HTML-Entities oder Benannte Zeichen für ...

zu 7) Auch hier kommt wieder der Faktor Psychologie zum tragen. Wer sich absolut sicher ist keinen Fehler gemacht zu haben, der braucht diesen Punkt nicht beachtet zu haben, aber eine Bestätigung hat noch niemandem geschadet . Vielleicht ist einem ja doch ein Fehler durchgehuscht. Wenn nicht, umso besser!!!

Wenn man wie bereits erwähnt diese einfachen 7 Regeln beachtet, so hat man schon eine ganze Menge mögliche Fehlerquellen ausgemerzt. Noch dazu Fehlerquellen die meistens so plump sind, das man ewig sucht um sie zu finden.

Ansonsten lässt sich eigentlich pauschal sagen, das wer sich an Standards hält, zwar oftmals auf einige Features z.B. eines Browsers verzichten muss, aber seinen Besuchern ein einheitliches Bild der Seite präsentiert, egal mit welchem Browser diese besucht wird (was IMHO von Professionalität zeugt) und es damit z.B. behinderten Mitbürgern es leichter zu machen auch an ihrer Webseite teil zu haben. Stichwort Barrierefreies Internet. Solche Menschen haben schon im Realen Leben genug Hindernisse zu umschiffen. Machen Sie es ihnen wenigstens im Web etwas leichter!