Gestaltung meiner Website (2003/2010)

XHTML und CSS

Bei der Erstellung meiner Website ist es mir besonders wichtig, diese für möglichst viele unterschiedliche Ausgabemedien nutzbar zu machen. Um dies zu erreichen, sind aus meiner Sicht zwei Voraussetzungen zu erfüllen:

1. Valider, das heißt fehlerfreier Quellcode; diese Webseite validiert nach den W3C-Standards XHTML 1.0 strict und CSS 2.

2. eine saubere Trennung zwischen Struktur und Form einer Webseite. Während für die Strukturierung der Inhalte XHTML zum Einsatz kommt, wird die Formatierung ausschließlich mittels CSS bewerkstelligt. Da der strukturierte Inhalt unabhängig von deiner bestimmten Form erstellt wird, kann dieser problemlos in verschiedenen Ausgabemedien wiedergegeben werden. Der Einsatz von CSS hat überdies die Vorteile, dass der eigentliche Quellcode verschlankt wird, und somit Ladezeiten verringert werden, sowie dass eine eventuell spätere Änderung des Layouts vergleichsweise wenig Aufwand erfordert.

Tabellen - Layer - Frames

In der Praxis der Webseitenerstellung gibt es drei unterschiedliche Arten der Positionierung von Elementen auf einer Webseite: durch den Einsatz von Framesets, Design-Tabellen oder CSS-Layern. Sogenannte Blinde Tabellen werden verwendet, um Textabschnitte oder Grafiken zu positionieren, aber ihr Einsatz als Design-Element ist eine Zweckentfremdung, da eine Tabelle im eigentlichen Sinne ein Struktur-Element zur Wiedergabe von tabellarischen Daten ist. Insbesondere verschachtelte Design-Tabellen sind für nichtgrafische Ausgabemedien unnützer Datenmüll, Barrieren in der Zugänglichkeit einer Webseite. Im Gegensatz hierzu steht der Gebrauch von CSS-Layern, wie ich sie auch auf dieser Seite verwende und welche eine konsequente Trennung zwischen Struktur und Form und in dieser Hinsicht ein barrierefreies Design ermöglichen.

Ein weiteres Mittel der Positionierung sind Framesets, deren Frames erst im Browser des Anwenders zusammengefügt werden. Nachteile dieser Technik sind, dass unerfahrene User oft nicht wissen, wie innerhalb eines Framesets ein Frame als Bookmark gespeichert oder verlinkt werden kann, und dass die Navigation über ein JavaScript erst nachgeladen werden muss, wenn ein einzelner Frame z.B. über eine Suchmaschine aufgerufen wird; und auch die Vorteile lassen sich auf andere Weise realisieren: eine einfach zu pflegende Navigation als PHP-Include und die feststehende Navigationsleiste durch einen als position:fixed definierten CSS-Layer (auch wenn der Internet Explorer 6 dies noch nicht beherrscht, setze ich dies für andere Browser bereits um).

Browser-Optimierung

Ich optimiere meine Homepage weder für einen bestimmten Browsertypen noch für eine bestimmte Bildschirmauflösung. Um verschiedenen Bildschirmauflösungen gerecht zu werden, definiere ich den Hauptlayer mit einer flexiblen Breitenangabe, so dass sich die Seite der Größe des Browserfensters anpasst. Anzeigefehler von Browsern korrigiere ich ab folgenden Versionen aufwärts: Firefox 3.5, Internet Explorer 7, Opera 10.6, Safari 5.0 und Google Chrome 6.0.