Da ich oft genug gefragt werde, wie man eine richtig gute und valide Seite gestaltet, habe ich mir mal die Mühe gemacht und wichtige Aspekte aufgelistet und hier angesprochen. Vorweg möchte ich aber sagen, dass das hier Geschriebene meine Einstellung zum Thema Webdesign ist und es keine allgemeinen Vorschriften sind.
Jedem, der eine Website erstellt sollte sich zuerst klar machen, wozu eine Website eigentlich dient. Viele meinen, sie müssten eine besonders aufwändige mit Grafiken und JavaScript versehene Website basteln, die noch irgendwelche unnötigen PHP-Scripts enthält.
Für mich ist das Internet eine Methode um an Informationen zu kommen. Mich interessieren keine aufwändigen Grafiken, die monatelang mit Photoshop erstellt wurden.
Sinnvoll ist eine Seite, die in so gut wie allen gängigen Browsern und Bildschirmauflösungen fehlerfrei funktioniert. Eine gute Seite brauch eine klar verständliche Navigation und einen aussagekräftigen Inhalt.
Ich bin der Meinung, dass man bei den Standards immer die aktuellen nutzen sollte. Die wären XHMTL 1.0 Strict und HTML 4.01 Strict. Ganz einfach, weil die Wahrscheinlichkeit viel höher ist, dass es in vielen Browsern richtig angezeigt wird.
Viele Seiten werden von Browser falsch interpretiert. Schuld daran ist meistens die Optimierung für den Internet Explorer von Microsoft. Da dieser Browser nicht die vom W3C (www.w3.org) veröffentlichten und eingeführten Standards unterstützt oder oft einige Abwandlungen hat, werden die für Internet Explorer optimierten Seiten von anderen Browsern, die nach den Standards programmiert sind (Mozilla, Netscape...) falsch angezeigt.
Daher sollte man meiner Meinung nach eine Seite grundsätzlich für Mozilla optimieren und mit ein paar IE-Hacks, die Fehler im Internet Explorer beheben. Wenn dann auch noch alles in Opera funktioniert, läuft die Seite in den gängisten Browsern.
Man sollte vielleicht wissen, dass viele Firmen und Behörden immernoch den veralteten Netscape 4.x benutzen. Wenn man die Seite auch noch für diesen Browser funktionsfähig macht, brauch man sich keine großen Gedanken mehr über die Browser machen.
Flexibilität ist im Webdesign äußerst wichtig. Die Website sollte in den gängigen Bildschirmauflösungen angezeigt werden. Am wichtigsten sind die Auflösungen 1024x768 und 800x600. Diese Flexibilität erreicht man zum einen mit relativen Angaben und dem Verzicht auf absolute Angaben und zum anderen mit dem Verzicht auf Frames.
Wenn man auf Grund aufwändiger Grafiken doch feste Größen nutzt, sollte die Seite trotzdem nicht breiter als 760 Pixel sein, damit es zu keinen Problemen kommt.
Da bei WYSIWYG-Editoren (What You See Is What You Get) der Quelltext vollkommen daneben ist, nutze ich nur Text-Editoren, mit denen ich den HTML Code selbst schreibe.
Man kann den von Windows mitgelieferten Editor NotePad genau so gut verwenden wie z.B. einen Editor mit mehr Funktionen. Solche Editoren wären z.B. Phase 5 oder Weaverslave.
Warum soll man keine Frames nutzen? - Das wurde ich schon allzu oft gefragt. Die Antwort ist ganz einfach: Man hat nun eine Seite, die aus zwei Frames besteht. Ein Frame ist links mit der Navigation und ein Frame ist nebendran mit dem Inhalt.
Wenn man diese Seite in Suchmaschinen anmeldet, werden womöglich alle Seiten einzeln indexiert. D.h. dass ein Besucher eventuell nur die Navigation zu Gesicht bekommt, wenn er auf das Suchergebnis klickt, weil eben z.B. die Frameseite navigation.html aufgelistet ist und nicht die ganze Seite index.html.
Natürlich gibt es ein paar Einzelfälle, bei denen ich nicht auf Frames (besonders Iframes) verzichten würden. Einer dieser Einzelfälle wäre z.B. wenn man keine Möglichkeit hat Includes mit PHP zu erzeugen, kann man ein Gästebuch mittels Iframes in die Seite integrieren.
Aber was soll man denn anstelle von Frames nutzen? - Am besten wäre ein Layout mit Kombination aus <div>-Blöcken und CSS-Formatierung, da diese Strukturierungen sehr übersichtlich im Quelltext sind und sich für das Layout sehr eignen.
Die andere etwas unschönere, aber immernoch bessere Methode als Frames sind Tabellen. Mit Tabellen lassen sich auch flexible und schöne Designs gestalten. Viele Firmenseiten sind mit Tabellen gebaut. Allerdings wird es irgendwann sehr unübersichtlich, weil man sehr schnell dazu neigt, die Tabellen sinnlos zu verschachteln. Kommentieren hilft!
Eine Seite lässt sich, wenn man sich geschickt anstellt, mit einer einzigen Tabelle erstellen. Nun müssen noch ein paar CSS Anweisungen eingefügt werden und das Layout ist fertig.
CSS ist die beste Methode um seine Website zu gestalten. Das W3C empfielt, dass man nurnoch die Struktur einer Website mit HTML macht und das Design wird komplett mit CSS erledigt. Wenn man nun diese CSS Anweisungen in eine externe Datei auslagert, ist es ein Leichtes, das Design einer kompletten Seite in nur einer Datei zu ändern. Sogar so aufwändige Sachen wie z.B. das Menü von der linken zur rechten Seite zu bringen werden ganz einfach.
Da Cascading Style Sheets sehr einfach zu lernen sind, empfiehlt es sich natürlich diese zu verwenden.
Ein freundlich helles, einladendes Layout ist besonders für Firmen geeignet. Natürlich sollte es immer ein themenbezogenes Layout sein. Wer eine Seite über irgendein Shooter-Spiel macht, wird wahrscheinlich eher ein dunkleres Design vorziehen. Das Layout sollte natürlich immer zum Thema der Website passen.
Man sollte nicht vergessen, die richtige Schriftart zu verwenden. Schriften wie Times New Roman und so "Schnorkel"-Schriften mit viel Schwung sollte man nich nehmen. Dann lieber gut lesbare, wie z.B. die oft verwendeten Schriftarten Verdana, Arial oder auch Tahoma.
Damit die Schrift auch gut lesbar ist, sollte ein Kontrast zwischen Schriftfarbe und Hintergrund bestehen. Der klassische Kontrast ist schwarz-weiß. Natürlich kann man mit allen Farben Kontraste schaffen. Kreativ sein!
Furchtbar finde ich Seite, die eine winzige Schrift besitzen. Man sollte eine gut lesbare Schriftgröße verwenden, die am besten mit CSS in der Größeneinheit "em" angegeben ist, da die Schrift dadurch sehr flexibel ist.
Leute mit Sehschwäche, werden dankbar sein, da sie die Schriftvergrößerung des Browsers nutzen.
Ich verzichte bewusst auf sehr viele Grafiken, da in meinen Augen Grafiken nur richtigen Sinn machen, wenn sie aussagekräftig sind, d.h. wenn ich damit irgendeine Information darstellen will. Die ein oder andere Grafik für das Design ist auch nicht falsch, nur man sollte mit den Ladezeiten aufpassen. Im Design sollte meiner Meinung nach keine Grafik die Größe von 40kb überschreiten.
Ich verzichte grundsätzlich auf Meta-Tags, da die bekannteste Suchmaschine Google (www.google.de) keine Meta-Tags liest, sondern andere Suchalgorithmen besitzt. Ein Kriterium ist ein aussagender Titel der jeweiligen Seite. Als nächstes sucht Google nach häufig vorkommenden Wörtern im Dokument. Desweiteren spielt die Semantik eine große Rolle.
Bewusst verwende ich semantisch geeignete Tags wie z.B. <h1> bis <h6>, <p> usw. Einfach aus dem Grund, dass Suchmaschinen, wie Google nach solchen Tags suchen oder vielmehr nach dem Text, der zwischen diesen Tags steht. Eine Überschrift sollte man als Überschrift kennzeichnen, einen Absatz als Absatz und ein Liste als Liste. Die Suchmaschine sucht z.B. nach dem Überschriften-Tag <h1>, zwischen dem steht "Großer Hamburger Fischmarkt" und schon wird die Seite schnell mit den Begriffen "Fischmarkt Hamburg" gefunden.
Ein Projekt von Thors-Page.de