Webdesign-Tutorial | Webmasterparadies.de

Eine Site mit einem guten Inhalt zu haben, ist heute bei weitem nicht mehr alles. Auch das Auge muss auf seine Kosten kommen. Und vor allem: Die Site muss übersichtlich sein, so dass eine Navigation in ihr nicht schwer fällt. Und um genau dies zu erreichen, habe ich dieses Tutorial für Sie geschrieben.

Überlegen Sie sich von Anfang an, wie Ihre Site später einmal aussehen soll. Lassen Sie sich dabei von Ihren Lieblingssites inspirieren, falls Sie nicht auf Anhieb eine eigene Idee finden sollten. Kopieren Sie aber nicht einfach das Design anderer Pages, sondern erstellen Sie Ihr eigenes.
Auch das Satzlayout muss stimmen. Durchgehender Text ist genau so schwer zu lesen, wie Text in GROSSBUCHSTABEN oder extrem kleiner Text.
Wenn Sie aber auf einen kleinen Text nicht verzichten möchten, benutzen Sie dazu die Schriftart "Verdana".
Mit ihr ist auch kleiner Text einigermaßen gut zu lesen.

Überlegen Sie sich am Anfang auch, für welche Bildschirmauflösung Sie Ihre Site gestalten möchten, und für welchen Browser Sie Ihre Site optimieren wollen (dazu weiter unten mehr).
Wenn alles steht und geht, sollten Sie mal so tun, als wären Sie ein beliebiger Surfer. Finden Sie sich auf Ihren Seiten zurecht?
Wenn Sie sich das nicht so gut vorstellen können, fragen Sie in Foren und/oder entsprechenden Chats, ob nicht jemand Ihrer Seite einen kleinen Test unterziehen möchte. So können Sie in aller Ruhe Feedback sammeln.
Von Bekannten oder Freunden sollten Sie Ihre Site nicht testen lassen. Meistens hören Sie nur Antworten wie: "Hey, deine Website ist wirklich super! Weiter so!" obwohl sie in Wirklichkeit eher mies ist.

Wenn das Grunddesign steht, können wir uns weiter vertiefen.

Optimieren Sie Ihre Seite nicht auf eine bestimmte Bildschirmauflösung. Ansonsten können Sie davon ausgehen, dass die Webseite nicht bei allen Besuchern korrekt dargestellt wird. Versuchen Sie daher das Layout variabel zu gestalten. Das Gleiche lässt sich übrigens auch für Text realisieren. So erreichen Sie, dass die Seite bei jedem Ihrer Besucher auch so aussieht, wie Sie sich das vorstellen.
Wenn Sie Ihre Webseite dennoch auf eine bestimmte Auflösung optimieren möchten, sollten Sie Ihre Besucher darauf aufmerksam machen und ihnen eine Alternative anbieten, sollte das Layout Ihrer Webseite durch eine andere Auflösung komplett "zerschossen" werden.

Browser-Optimierungen sind auch heute leider noch immer ein großes Thema. Jeder Browser interpretiert (x)HTML oder CSS-Code noch immer etwas auf die eigene Weise. Leider unterstützen manche Browser nicht einmal die aktuellen Web-Standards zu 100%. Dennoch sollten Sie versuchen (oder gerade deswegen) validen HTML-Code zu erzeugen. Wie genau das funktioniert und warum valider Code so wichtig ist, können Sie in unseren Webdesign-Tipps nachlesen.

Auf den übermäßigen Einsatz von Java, JavaScript und DHTML sollten Sie weitestgehend verzichten. Es kann zu viele Probleme mit den verschiedenen Browsern und Browserversionen geben. Wenn Sie dennoch unbedingt diese ganzen netten Sachen einsetzen möchten, testen Sie Ihre Page vorher sehr, sehr gut.
Auf den Einsatz von großen Java Applets (z.B. für Navigation o.Ä.) sollten Sie generell verzichten, da diese oft ziemlich lange zum Laden brauchen. Wenn Sie dennoch nicht darauf verzichten möchten, bieten Sie eine Alternative an für diejenigen unter uns, die Java in ihrem Browser nicht aktiviert haben, oder deren Browser dabei Probleme macht.

Achten Sie auf jeden Fall darauf, Ihre Website so übersichtlich wie nur möglich zu gestalten. Dies erleichtert für Ihre Besucher nicht nur die Auffindung von Informationen, sondern sieht auch noch sehr gut aus.
Wenn es praktisch angebracht ist, stellen Sie verschiedene Satzteile nebeneinander (z.B. pro und contra). Das können Sie sehr leicht mit Tabellen erstellen.
Achten Sie darauf, keinen durchgehenden Text zu schreiben - machen Sie zwischendurch ein paar Absätze. Auch Text in Großbuchstaben oder Text in extrem kleiner Schrift ist ziemlich schwer zu lesen.
Achten Sie darauf, dass Ihre Schriftfarbe im Kontrast zum Hintergrund steht. Verwenden Sie keine grellen Schriftarten auf hellem Hintergrund (z.B. grün auf gelb). Umgekehrt dürfen Sie auch keine dunklen Schriftfarben auf einem dunklen Hintergrund verwenden (z.B. dunkelblau auf schwarz). Sorgen Sie immer für genügend Kontrast.
Eine Website kann unendlich lang werden. Führen Sie dies nach Möglichkeit nicht Ihren Besuchern vor. Wenn Sie sehr viel Text zu einem Thema haben, verteilen Sie ihn auf mehrere Seiten.

Die Qual der Wahl liegt meistens bei einem Hintergrundbild. Wenn Sie ein seriöses Webangebot aufbauen möchten, sollten Sie auf sehr dunkle Hintergründe verzichten - nehmen Sie hierzu lieber helle Farben. Ein schwarzer Hintergrund erweckt immer den Eindruck einer "Hacker-Page", besonders dann, wenn Sie eine private Homepage haben.
Achten Sie darauf, dass der Hintergrund im Kontrast zur Schriftart und -farbe steht, der Hintergrund sollte auch im Hintergrund bleiben.
Wenn Sie eine Hintergrundgrafik nehmen möchten, verzichten Sie auf großflächige Grafiken, die die Aufmerksamkeit auf sich ziehen. Auch sollten Sie einen Text im Hintergrund vermeiden, da dieser meistens nur ablenkt und beim lesen stört.
Wenn Sie unbedingt eine Hintergrundgrafik verwenden möchten, greifen Sie zu Mustern (z.B. Mauern oder Netze), die aber nicht auffällig sind, sondern wirklich im Hintergrund bleiben. Auch sollten Sie auf einen mehrfarbigen Hintergrund verzichten.

Es finden sich immer wieder Webseiten, auf denen der Webmaster mit seinem angeblichen Können angibt, er habe seine komplette Site nur mit dem Windows-Texteditor erstellt. Das ist aber völliger Unsinn!
Den Besuchern Ihrer Site kommt es nicht darauf an, ob Sie Ihre Site mit einem Texteditor oder einem WYSIWYG-Editor (WYSIWYG = What you see is what you get) erstellt haben.
Sie sollten zu einem WYSIWYG-Editor greifen. Dort sehen Sie Ihre Website so, wie sie später im Browser aussieht. Dieser große Vorteil erspart Ihnen eine Menge Arbeit und so auch eine Menge Zeit, da Sie nicht immer wieder verschiedene Attribute ausprobieren müssen, bis Ihre Website so aussieht, wie Sie das haben möchten. Desweiteren müssen Sie so nicht Ihren ganzen HTML-Code selbst stricken, was auch wieder eine Menge Arbeit spart.
Leider hat ein WYSIWYG-Editor auch einen entschiedenen Nachteil: Oft wird der HTML-Code mit unnötigen Tags aufgebläht - somit wird kein valider Code erzeugt. Wenn Sie die überflüssigen Tags manuell aus der Datei entfernen, sie anschließend wieder neu laden und mit dem Editor abspeichern, ist alles wieder so wie vorher.
Inzwischen gibt es aber einige Tools, die Ihnen die Arbeit nach der Suche überflüssiger Tags abnehmen und den HTML-Code selbst entschlacken.

Wenn Sie PHP-Scripte und Datenbanken verwenden können, empfiehlt sich auch der Einsatz eines Content Management Systems (CMS). Ein solches CMS funktioniert dabei im Grunde wie ein WYSIWYG-Editor, bietet dabei jedoch viele nützliche Funktionen. Einige CMS erzeugen dabei auch weitestgehend validen Code und sind somit zukunftssicher.