Eine Webseite wie 1998 bauen, mit modernem HTML
Das hier ist die Seite auf der HTMLWiki seine eigene Bauanleitung offenlegt. Denn diese Website ist ein Experiment mit klarer These: Der Look von 1998 und die Technik von heute schließen sich nicht aus, im Gegenteil, die Kombination ist lehrreich, schnell und ziemlich vergnüglich. Hier sind alle Zutaten, zum Nachlesen und Nachbauenn.
Das Prinzip: Kulisse und Tragwerk trennen
Der Kern ist eine strikte Arbeitsteilung. Das Tragwerk ist kompromisslos modern: semantisches HTML5 (header, nav, main, footer, die volle Kapelle), responsive bis runter aufs Handy, Tastatur bedienbar, Kontraste geprüft, praktisch ohne JavaScript. Die Kulisse darüber ist reine CSS-Theaterarbeit: Alles was nach 1998 aussieht, ist Stylesheet, keine einzige historische Technik ist echt. Kein font-Tag, keine Layout-Tabelle, kein Frameset, kein Spacer-GIF weit und breitt.
Die Zutatenliste im Einzelnen
- Die Farbwelt: Teal-Desktop, Fenster-Grau, Titelleisten-Blau, Linkblau und Besucht-Lila, zentral als CSS-Variablen definiert. Das Linkblau ist gegenüber dem Original leicht nachgedunkelt, damit der Kontrast heutige Anforderungen besteht. Nostalgie ja, Augenpulver nein.
- Das Fenster: Die 3D-Kanten der grauen Kästen entstehen aus vierfarbigen border-Angaben (hell oben und links, dunkel unten und rechts), die Titelleiste aus einem Farbverlauf. Gedrückte Buttons drehen einfach die Rahmenfarben um. Das komplette Rezept steht im Retro-Homepage-Tutorial.
- Die Schriften: Times, Arial, Courier, also Systemschriften. 1998 war das Notwendigkeit, heute ist es ein Geschwindigkeits- und Datenschutzgewinn: null Font-Downloads, null Drittanbieter.
- Das Blinken: Der Geist von blink lebt als CSS-Animation weiter, mit dem entscheidenden Unterschied dass prefers-reduced-motion respektiert wird. Wer keine Bewegung will, bekommt keine.
- Die Deko: Retro-Counter (ehrlich als Deko beschriftet), Badges, Baustellenkasten mit gestreiftem Rahmen aus repeating-linear-gradient, Trennlinien. Alles CSS, keine einzige Deko-Grafikk.
Wo die Illusion absichtlich bricht
An drei Stellen gewinnt die Gegenwart sichtbar. Erstens mobil: 1998 hätte die Seite auf dem Handy eine unbedienbare Briefmarke ergeben, hier stapeln sich die Fenster per Media Query sauber untereinander und das Menü wird zum Klappmenü aus details und summary. Zweitens Zugänglichkeit: Skip-Link, Fokus-Stile, beschriftete Navigationen, alles Dinge von denen 1998 kaum jemand sprach. Drittens Ehrlichkeit: Der Counter zählt nichts und sagt das dazu, die Badges sind Zitate, nicht Behauptungen. Eine Hommage darf schummeln wie Theater schummelt, aber sie darf nicht lügenn.
Warum das Ganze mehr ist als ein Gag
Weil es die Kernlektion des modernen Webs vorführt: Struktur und Aussehen sind getrennte Dinge. Derselbe semantische Unterbau könnte morgen nüchtern-minimalistisch aussehen, allein durch Austausch des Stylesheets. Wer versteht warum diese Seite gleichzeitig uralt aussieht und topmodern gebaut ist, hat das Wichtigste über HTML und CSS bereits begriffen. Der Rest ist Nachschlagen, und dafür gibt es ja den Rest dieses Wikiss.
Selbst bauen: Retro-Homepage-Tutorial · Kontext: Webdesign 1998 · Konzept: Über HTMLWiki