Webseiten mit Webstandards

Der Inhalt entscheidet, ob ein Besucher eine Website öfter besucht. Dazu gehört jedoch, dass die Informationen leicht auffindbar und gut strukturiert sind. Der Benutzer sollte sich auf einer Website schnell und intuitiv zurechtfinden können. Das erfordert Transparenz der Website, ein technisch schlankes und visuell überzeugendes Webdesign mit einfacher Navigation und leichte Bedienbarkeit.

Für jeden Betreiber einer Website ist es das angestrebte Ziel, eine größtmögliche Zahl von Nutzern zu erreichen. Die Website sollte den Nutzern aber auch den größtmöglichen Nutzen bringen.

Eine gut durchdachte Webstrategie soll diese Anliegen konkret unterstützen.
Das Wichtigste ist also die Botschaft. Daher steht an erster Stelle der Inhalt, dann kommt die Technik und dann das Design.

Wenn Sie Interesse haben, lesen Sie weiter über:

"Die Stärke: Inhalt und Struktur"

Um ein inhaltliches Konzept zu erarbeiten, ist die Beantwortung einiger Fragen wichtig.

"Die Entscheidung: CSS-basiertes Layout"

Eine Website muss einwandfrei funktionieren, damit Sie mit ihr erfolgreich sein können. Damit Ihre Website systemunabhängig und suchmaschinenfreundlich ist, müssen aktuelle Webstandards berücksichtigt werden. Standards sind deshalb so wichtig, weil die Nutzer Ihrer Website unterschiedliche Betriebssysteme (wie z.B. von Apple oder Microsoft) und Browser (wie z.B. Internet Explorer oder Firefox in verschiedenen Versionen) benutzen. Außerdem ist auf unterschiedliche Monitorauflösungen zu achten, auf Barrierefreiheit sowie auf neue Empfangsgeräte, wie z.B. Handys.

Die Standards für Architektur und Protokolle des WWW (u.a. HTML) entwickelt das World Wide Web Consortium (W3C).

HyperText Markup Language (HTML) und andere Auszeichnungs- und Formatierungssprachen mit der Websites beschrieben und gestaltet sind, werden leider von Betriebssystemen und Browsern unterschiedlich "verstanden".

Sie wollen aber, dass auf Ihrer Website einfach alles klappt. Sie wünschen, dass Ihre Website gut für Suchmaschinen lesbar ist, dass sich Ihre Website schnell aufbaut. Sie brauchen die Eindeutigkeit von Links und Unabhängigkeit von browserseitigen Scripts und Sie wollen Sicherheitsstandards für Ihre Nutzer einhalten.

Die Entscheidung für CSS-basiertes Layout ist gleichzeitig die Entscheidung für Accessibility und Usability sowie Flexibilität.

Cascading Style Sheets (CSS) trennt das Layout von den Inhalten der Site (wie Navigation, Texte, Bilder). Das Layout wird über ausgelagerte CSS-Dateien gesteuert. Änderungen sind deshalb einfach. Die Trennung von Inhalt und Gestaltung folgt den modernen Richtlinien für eine barrierefreie Website. CSS macht Ihre Website für ein breites Spektrum von Geräten zugänglicher. Durch eine zentrale CSS-Datei wird zudem weniger Quellcode geschrieben. Weniger Code bedeutet Vereinfachung, weniger Fehlerquellen, größere Kontrolle und leichtere Auffindbarkeit. Das sind klare Vorteile gegenüber der Verwendung von Tabellen zum Layouten. Ein optimierter Code sorgt darüber hinaus für Ersparnis der beanspruchten Bandbreite und kürzere Ladezeiten, von denen letztendlich sämtliche Nutzer profitieren.

HTML und CSS haben klar getrennte Aufgaben: "HTML ist der Maurer, CSS ist der Dekorateur". (Nach Peter Müller "little boxes", Band 01, S.9)

Eine der wichtigsten Grundlagen beim Gestalten mit CSS ist das Box-Modell. Ein XHTML-Dokument setzt sich aus mehreren unsichtbaren Boxen zusammen. Es soll hier erwähnt werden, weil es dem weiteren Verständnis für den Aufbau einer Website dient.

Eine schematische Darstellung einer solchen Box finden Sie bei Peter Müller auf little-boxes.de.

"Webseiten bestehen aus rechteckigen Kästchen, die übereinander, nebeneinander und ineinander gestapelt werden." (Peter Müller "little boxes", Band 01, S.9) Jeder Text und jede Grafik liegt in einem unsichtbaren Kästchen, auf Englisch in einer "box". Diese Boxen sind die Grundbausteine von Webseiten und sind nach einem gleichen Schema aufgebaut.

Lesetipp: "little boxes" von Peter Müller
Lesetipp: "Einführung in XHTML, CSS und Webdesign" von Michael Jendryschik

Bevor Sie sich weiter informieren, werden Sie die Frage stellen, warum Sie sich überhaupt mit technischen Details befassen sollten.

Mit diesen Informaionen möchte ich Ihnen die Entscheidung leicht machen, zugunsten einer schlanken, bandbreitensparenden Website auf JavaScript, Flash-Animationen, eingebettete Filme, Spiele und dgl. zu verzichten. Das heißt jedoch nicht, dass auf ästhetische Gesichtspunkte bei der Gestaltung verzichtet werden muss.

Lesen Sie dazu weiter auf der Seite Über diese Site / 5k

Auf der Seite Realisieren werden weitere technische Aufgaben und Möglichkeiten besprochen.

Wenn die Inhalte für eine Website ausgewählt und strukturiert sind, Entscheidungen für das technische Layout gefallen sind, kann nun das Design in Angriff genommen werden.

"Die Idee: visuelles Design"

Wie im Printwesen gilt auch für die Erstellung von Webseiten: Durch den Content, d.h. durch den Inhalt, wird die Form bestimmt. Der Inhalt bestimmt also grafische Designs, Farben und Typografie. Die visuelle Gestaltung wird neben den inhaltlichen Vorgaben z.B. durch Farbenlehre, Symbolik, Wahrnehmungspsychologie, Gestaltungstheorien und Ästhetik bestimmt.

Nichts prägt im Internet mehr, als der erste Eindruck. Damit ist das Erscheinungsbild einer Website gemeint. Es entscheidet, ob ein Nutzer verweilt oder gleich weiterklickt. Nutzer bleiben und kommen wieder, wenn die Site durch Übersichtlichkeit, Aktualität, Genauigkeit und Fehlerfreiheit überzeugt. Die Erwartungskonformität spielt beim Webdesign ebenfalls eine wichtige Rolle, d.h. der Nutzer sollte das erhalten, was ihm versprochen wird. (Weitere Informationen zur Software-Ergonomie: EN ISO 9241 (nach EU-Recht Standard zur Bewertung der Forderung nach Benutzerfreundlichkeit)

Eine Webseite sollte grafisch klar gegliedert sein, d.h. eine klare visuelle Hierarchie sowie klar definierte Bereiche besitzen. Hyperlinks sollten sofort erkennbar sein, aussagekräftige Bilder und Illustrationen den Inhalt unterstützen.

Bevor ein grafisches Konzept erstellt werden kann, ist es notwendig, dass Sie einige Fragen beantworten.

Die Gestaltungsideen werden so visualisiert, dass Benutzer auch komplexe inhaltliche Zusammenhänge schnell und einfach erfassen können. Für ein ansprechendes Design werden Schriften, Farben und Formen im Sinne von Konsistenz aufeinander abgestimmt.

Farben

Durch die Verbreitung von Grafikkarten und Monitoren, die 24 Bit oder mehr Farbtiefe darstellen können, ist die Palette der sogenannten "websicheren" Farben bedeutungslos geworden. (Vgl. Wikipedia)

Lesetipp "Farben auf Webseiten" von Michael Jendryschik
Außerdem können Sie das Tool zum Erzeugen von Farbschemata nutzen: Color Scheme Generator 2 bei wellstyled.com/tools

Schriften /Typografie

Browser können nur die Schriftarten anzeigen, die auf dem jeweiligen System des Benutzers installiert sind. Wenn die Schriftart dann nicht vorhanden ist, wird die Seite in der eingestellten Standardschriftart des Browsers angezeigt. Möglicherweise passt diese dann nicht mehr zum Layout.

Die Textgestaltung ist immer noch eines der wichtigsten Mittel überhaupt, um eine gute Struktur zu erstellen und eine Hierarchie für die Inhalte zu schaffen ( z.B. Seitentitel, Artikelüberschriften, Text).

Lesetipp "Typographie im Internet" von Matthias Kammerer mit Tipps, wie man Texte so gestalten kann, dass sie gut lesbar sind.

Layout

Die optimale Breite einer Website anzugeben, ist schwer. "Im Zusammenhang mit Barrierefreiheit wird gefordert, dass Websites sich dem sichtbaren Bereich des Browserfensters anpassen. D.h. es wird mit relativen Breitenangaben gearbeitet, die Seiten füllen den gesamten sichtbaren Bereich aus." Dieses und mehr dazu von Björn Seibert auf .

Das Problem für die optimale Länge einer Website ist nicht die Flexibilität wie bei der Breite, sondern die Benutzerfreundlichkeit. Beim Scrollen verschwinden irgendwann auch Navigation, Überschriften und dgl. Dieses Problem kann zum Teil dadurch gelöst werden, dass nach größeren Textabschnitten mit einem Link nach oben zurück gesprungen werden kann und die Navigationsleiste auch am unteren Seitenrand vorhanden ist.

Sind Breite und Länge festgelegt, kann ein Design-Raster (strukturierte Absätze, Spalten und dgl.) Ordnung und Struktur auf der Webseite bringen.

Lesetipp "Formen Grundlagen I bis V" von Silke Schümann Wissenswertes über Webseitenplanung finden Sie im Webhandbuch

Möglicherweise wollen Sie nachdem Sie die zusätzlichen Informationen auf den hier nachfolgenden Seiten gelesen haben, einen Versuch wagen, selbst eine Website aufzubauen. Dazu empfehle ich Ihnen als erstes das Buch von Peter Müller "little boxes". Der Band 01 gibt eine Einführung in HTML und CSS mit der Beschreibung der mehr oder weniger notwendigen Werkzeuge, didaktisch hervorragend aufgebaut, klar und verständlich, um Schritt für Schritt eine eigene Website zu realisieren.

Lesetipp "little boxes" Webseiten gestalten mit CSS. Grundlagen" von Peter Müller

Es gibt außerdem zahlreiche Angebote, wo Sie kostenlos fertige CSS-basierte Layouts zum Mitnehmen finden. Eine hervorragend Liste hierfür hat Dr. Web zusammengestellt.