Windows 98, Windows XP & Windows 7 für die eigene Webseite

Spaß mit CSS oder „Wo bin ich denn hier gelandet?“

„Früher war nicht alles schlecht“ gilt auch für das Design von Betriebssystem-GUIs und Webseiten. Kürzlich stolperte ich über einen Social-Media Post, welcher das Design von Windows 7 darstellte. Bei genauerem Hinsehen erwies sich das als komplettes CSS-Framework, was sogar ARIA-Attribute berücksichtigt bzw. als Selektoren benutzt. Das musste ich mir genauer ansehen, als jemand der mit allen Betriebssystemen schon gearbeitet hat (Windows 3.11 und Windows 95 kommen noch aus der Vergangenheit dazu, leider gibt es hierfür (noch) keine CSS-Bibliotheken). Ich fand weitere „Abkömmlinge“ und habe auch diese mal näher betrachtet.

Wenn man das „alte“ Look & Feel wieder aufleben lassen will, sind diese Bibliotheken die perfekte Grundlage. Für den Bezug zur damaligen Zeit (mein Gott, bin ich alt) nenne ich auch die damaligen PC-Anforderungen an die Betriebssysteme. Willkommen bei einer (komprimierten) Zeitreise durch die „Design“-Geschichte von Windows und wie ihr sie auf eure Webseite(n) bringt.

Vorsicht bei bestehenden CSS-Bibliotheken: Wie bei jeder CSS-Datei erweitern die hier genannten „Ergänzungen“ die eigentlichen Eigenschaften. Hier sollte man ein paar Tests mit seiner Lieblings CSS-Umgebung machen bevor man sich entscheidet damit zu arbeiten. Achtet auch auf die Reihenfolge beim Einbinden!

98.css – Windows 98

Screenshot eines typischen Windows-98-Desktops

Was war das damals doch alles schön „schlicht“ und so (mehr oder weniger) „einfach“. Eine einfache GUI ohne „Schnick & Schnack“ und jeder kam damit zurecht. Mit Windows 98 (Release-Datum: 25.08.1997 – Support-Ende: 11.06.2006) konnte man keinen „Designpreis“ gewinnen. Eigentlich war es optisch identisch mit Windows 95. Alles war technisch, schlicht und funktional (abgesehen von den ständigen Abstürzen – wir erinnern uns vage). Die Anforderungen an die Hardware waren (für heutige Verhältnisse) minimalistisch, aber damals sehr Kostenintensiv. Einen PC konnte sich nicht jeder leisten. Bei einem Preis von 3000 – 4000 DM (Deutsche Mark … Nicht EURO) überlegte man sich das nicht nur Zweimal.

Min.-Anforderungen Windows 98

x86 Prozessor (486DX oder 486SX) mit mindestens 66MHz Bustakt
16 MB Arbeitsspeicher
max 295 MB Festplatten-Speicherplatz (Je nach installierten Zusatzpaketen)
VGA Kompatible Grafikkarte
Maus (mechanisch, optische gab es noch nicht)

Auf heutigen Systemen würde Windows 98 mit Lichtgeschwindigkeit laufen, während wir damals nach dem Einschalten des Computers erstmal gemütlich Kaffee trinken konnten. Man nutzte diese Zeit dann gerne auch um die (mechanische) Maus zu reinigen. Also ich hab das gemacht, während der Kaffee durchlief.

Die CSS-Datei „98.css“

Kommen wir aber nun zur eigentlichen CSS Bibliothek, die nur aus einer Datei besteht und mit 4,35 KB kaum ins Gewicht fällt.

<div class="window" style="width: 320px">
  <div class="title-bar">
    <div class="title-bar-text">A Window With A Status Bar</div>
  </div>
  <div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
    <li>A Task Manager</li>
    <li>A Notepad</li>
    <li>Or even a File Explorer!</li>
</ul>
  </div>
  <div class="status-bar">
    <p class="status-bar-field">Press F1 for help</p>
    <p class="status-bar-field">Slide 1</p>
    <p class="status-bar-field">CPU Usage: 14%</p>
  </div>
</div>

<div class="sunken-panel" style="height: 120px; width: 240px;">
  <table class="interactive">
    <thead>
      <tr>
        <th>Name</th>
        <th>Version</th>
        <th>Company</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>MySQL ODBC 3.51 Driver</td>
        <td>3.51.11.00</td>
        <td>MySQL AB</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

Wie man sieht, benötigt man keine tausend CSS Klassen und schon einfaches HTML bringt den gewünschten Effekt. Leider ist es (noch) nicht responsiv, weshalb hier ggf. ein wenig Nacharbeit erforderlich sein wird, um das auch für mobile Endgeräte zugänglich zu machen. Die meisten Elemente beziehen sich hier auf die eigentlichen „Fenster“ weniger auf die gesamte Oberfläche. Für eine wirklich vollständige Abbildung eines WIN 98 Webseiten-Klons würde man noch weitere CSS-Bibliotheken und Icon-Sets benötigen.

Alle „Fenster“- & Formular – Designelemente sowie Beispiele findet man hier: https://jdan.github.io/98.css/

Ein „komplettes“ Windows 98 als Webseite findet man hier: https://98.js.org/

XP.css – Windows XP

Screenshot eines typischen Windows-XP (SP3)-Desktops

Mit Windows XP (Release-Datum: 25. Oktober 2001, Support-Ende: 8. April 2014) kam „Design“ ins Spiel. Es wurde wesentlich „fröhlicher“ und nicht mehr so „technisch“ wie es Windows 98/2000 gewesen ist. Die Anforderungen stiegen dementsprechend.

Min.-Anforderungen Windows XP

Prozessor: mindestens ein Pentium-Prozessor mit 233 MHz, für die 64-bit-Version ein Intel „Itanium“-Prozessor
Arbeitsspeicher: Ab 64 MByte RAM (für einen flüssigen Betrieb mindestens 128 MByte)
Festplatte: mindestens 1,5 GB – für die Installation von SP3, zusätzliche 1,8 GB freier Speicherplatz
Grafikkarte: mindestens 800×600 SVGA (S = Super)

Auch XP nervte mit „gelegentlichen Abstürzen“. Stabiler wurde es mit den entsprechenden Service-Packs. Auch dieses Windows würde mit unseren heutigen Konfigurationen wesentlich schneller und flüssiger laufen.

Die CSS-Datei „XP.css“

Kommen wir aber nun zum CSS: XP.css erweitert die vorgenannte 98.css, benötigt aber diese nicht um das Design auf die Webseite zu bringen. Auch hier finden wir alles auf einem entsprechenden github Repository (Link am Ende des Abschnitts)

Wer z.B. mal das alte „Command Prompt“ (Eingabeaufforderung) nachbilden möchte, braucht nur ein wenig HTML-Text und besagte CSS-Datei.

Command Prompt (Eingabeaufforderung) mit CSS umgesetzt

<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">Command Prompt</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <pre>Microsoft&#10094;R&#10095; Windows DOS 
&#10094;C&#10095; Copyright Microsoft Corp 1990-2001.
      <br>C:&#92;WINDOWS&#92;SYSTEM32> You can build a command line easily with a window and pre tag
    </pre>
  </div>
</div>

Wie man hier gut erkennen kann, werden die ARIA-Labels auch für das Aussehen der Buttons benutzt. Somit werden sie sogar den Ansprüchen für die Barrierefreiheit gerecht. Alle Elemente aus der XP-GUI werden hier ausschließlich per CSS und ohne zusätzliche Grafiken umgesetzt. Der Speicherverbrauch (bei lokaler Installation) liegt bei gerade mal 38,2 KiB und fällt somit kaum ins Gewicht. Auch hier gilt: Es sind nur „Fenster“ & Formular Elemente gestyled worden, nicht die gesamte GUI. Es ist ebenso wie 98.css NICHT Responsive ausgelegt, was Nacharbeit bedeutet.

Alle „Fenster“- & Formular – Designelemente sowie Beispiele findet man hier: https://botoxparty.github.io/XP.css/

7.css – Windows 7

Bildschirmaufnahme von Windows 7 Ultimate SP1

Fast ein wenig „zerbrechlich“ kommt die Windows 7 (Release Datum: 22. Oktober 2009 – Support-Ende: 14. Januar 2020 – Extended Security Updates bis 10. Januar 2023) Oberfläche daher. Das AERO Design zielte auf wirklich „schöne“ Effekte ab und „glänzte“ mit vielen (mehr oder weniger) nützlichen „Widgets“. Wie mit jeder Windows-Version stiegen auch hier die Anforderungen:

Min.-Anforderungen Windows 7

Prozessor: 1-GHz-x86-Prozessor (32 Bit) / 1-GHz-x64-Prozessor (64 Bit)
Arbeitsspeicher: 1 GB (32 Bit) / 2 GB (64 Bit)
Festplattenspeicher: 16 GB (32 Bit) bzw. 20 GB (64 Bit)
Grafikkarte: DirectX-9-Grafik-Prozessor mit WDDM 1.0 (Aero)

Es hieß also wieder (mehr oder weniger) tief in die Tasche greifen um dem Betriebssystem die nötigen Ressourcen zur Verfügung zu stellen. Mit Windows 7 hielt das „Windows-Snapping“ Einzug. Es war also erstmals möglich die Fenster so anzuordnen, das sie sich nicht nur im Bezug auf die Position sondern auch auf die Größe anpassten. 2 Fenster nebeneinander war also kein Problem mehr und man musste nicht jedes für sich passend zurecht ziehen. Dieses Feature finden wir auch heute noch in Windows 11. Im Vergleich zu den Vorgängern wurde Windows 7 fast 14 Jahre supportet und mit Security-Updates versorgt und gilt damit zu den Betriebssystemen mit der längsten „Verweildauer“ auf heimischen Rechnern. Nachfolgende Windows-Versionen hielten sich nicht so lange:

Windows 8 (Release-Datum: 26. Oktober 2012 – Support-Ende: 12. Januar 2016)
Windows 8.1 (Release-Datum: 18. Oktober 2013 – Support-Ende: 10. Januar 2023)
Windows 10 (Release-Datum: 29. Juli 2015 – voraussichtliches Support-Ende: 14. Oktober 2025)

Wie lange sich Windows 11 halten wird (Gerüchten zu Folge, wird an einem neuen Windows gearbeitet) bleibt abzuwarten. Hierzu aber mehr in einem gesonderten Artikel.

Die CSS-Datei „7.css“

Dieses fast schon „zerbrechliche“ Design kann per „7.css“ auf die eigene Webseite gebracht werden. Auch hier wird mittels Klassen und ARIA-Roles das entsprechende Aussehen gesteuert. Auch diese CSS Datei basiert im Kern auf „98.css“ welche nicht zusätzlich benötigt wird. Mit 19KB fällt auch diese nicht wirklich ins Gewicht und wie die anderen beiden „Eltern“ benötigt sie keine zusätzlichen Grafiken.

<div class="win7">
  <button>A Win7-styled button</button>
</div>

Auch andere Designelemente aus der alten GUI wie z.B. die AERO – Fensterrahmen / Titlebars werden mit viel Liebe zum Detail umgesetzt.

Im Gegensatz zu „98.css“ und „XP.css“ wurden allerdings hier auch Menüs mit berücksichtigt. Hierbei handelt es sich sowohl um „Fenster“ Menüs als auch „Kontext-Menüs“

Was zusätzlich besonders ist: Es ist möglich eine „Dialog Box“ ohne zusätzliches JavaScript zu erstellen. Sie öffnet sich per Link und lässt sich dann auch über den „Close“ Button oder das „rote X“ in der Fenster-Ecke wieder schließen. Was die Responsivität angeht, sind einige Elemente so ausgelegt, das sie (zumindest vom Design) einigermaßen passend auf mobilen Endgeräten angezeigt werden können. Aber auch hier sollte zumindest ein wenig Hand angelegt werden, damit der Besucher auf dem Smartphone, ein erstauntes „OH“ herausbringt.

Alle „Fenster“- & Formular – Designelemente sowie Beispiele findet man hier: https://khang-nd.github.io/7.css/

Zusammenfassung

Design Matters, sagt man so schön und wer wirklich mal etwas „Besonderes“ abseits von Bootstrap und Co. haben möchte, ist mit diesen „Bibliotheken“ bestens bedient. Sie sind zudem Kostenlos und leicht implementier- und umsetzbar. Auch für Entwickler die z.B. an Backends arbeiten, lässt sich hier eine „schicke“ und schlichte Oberfläche gestalten, was sicher den Benutzer freuen wird. Zumindest wenn er schon etwas älter ist 😉

Wie immer gilt: Ich freue mich über Rückmeldungen und Kommentare und hoffe das Ihnen/Dir dieser Beitrag gefallen hat.