Überflüssiger Müll im Code kann weg
Überflüssiger Müll im Code kann weg

Eine wirklich minimale Website

Die Seite war aber jetzt schnell da, was? Kunststück! Sind ja auch nur 60KiB gewesen! Das Bild macht 55Kb, der Text 4,2Kb (davon 3,9Kb reiner Content-Text) und 0,6Kb die CSS-Datei. Das wars!

Warum mache ich so was?

Viele »moderne« Websites nerven mich! Bildschirmfüllende Stockfotowüsten ohne Aussage mit drei Sätzen pro Seite. Oft muss ich auf die Seite warten und auf der Suche nach dem Inhalt fällt mir regelmäßig vom scrollen der Finger ab! Aber Hauptsache sie sehen »cool« aus!

Ich bin ein Anhänger des KISS-Prinzips. Daher bemühe ich mich den Inhalt meiner Website möglichst einfach und schnörkellos darzustellen. Die Website soll möglichst unsichtbar bleiben. Ich möchte keine “schöne” Website machen, sondern Inhalte darstellen! Der Rahmen soll möglichst im Hintergrund bleiben und nicht ablenken. Seit einigen Jahren versuche ich auch den Quellcode möglichst klein zu halten. Diese Website hier ist mein extremes Experimentierfeld.

Warum denn den Quellcode klein halten? Schließlich haben wir alle genug Bandbreite, RAM und Speicherplatz, oder?

Laut http archive ist eine durchschnittliche Website im Jahre 2019 etwa 2000KiB groß. Diese würde mich mobil 1,2 Cent pro Klick kosten** und die Umwelt mit etwa 1,3g CO² belasten*.

Ich sehe da mehrere Aspekte:

Mobile Kosten:
Über 60% der Zugriffe auf meine Websites kommen mittlerweile von mobilen Geräten. Und dort zahlt man noch immer für jedes Megabyte. Das laden dieser Website auf mein Handy hat mich 0,035 Cent gekostet**.
Ladezeiten:
Und je nachdem was auf dem Server sonst noch so los ist, kann es auch schon mal sein, das es 10 Sekunden dauert, bis das CMS eine Seite zusammengebastelt hat. Oder es dauert ewig und drei Tage, bis man die fette Website durch das lahme Netz gezogen hat, weil man gerade irgendwo in der Pampa im Zug sitzt.
Umweltbelastung:
Diesen Aspekt hat man noch nicht so auf dem Schirm. Mittlerweile (Stand 2019) produziert das Internet soviel CO² wie der internationale Flugverkehr! Zeit umzudenken! Der Klick auf diese Website hat gerade mal 0,04g CO² produziert*!
Zugänglichkeit der Information
Ich habe keinen Schimmer, was ihr so im Web macht, aber ich suche im Web fast ausschließlich nach Informationen. Sei es unterwegs mit dem Smartphone oder zu Hause am Desktop; ich hasse alles, was sich zwischen mir und der gesuchten Information stellt. Ich will einfach nur die Infos!

Ich versuche diese Website also so zu gestalten, wie ich selber eine Website gerne vorfinden würde; schnell geladen, einfache und selbsterklärende Navigation, keine Suche nach dem Inhalt. Das heißt:

Außerdem:

Dafür ist die Website so nebenbei:

Und? Fehlt euch hier wirklich etwas essenzielles um diesen Artikel bequem lesen zu können (abgesehen vom »Coolness-Faktor«)?

Eigentlich reicht schon HTML

HTML bietet alles was man für einen Artikel braucht. Ich kann:

Überschriften setzen, Absätze/Umbrüche erstellen, Text fett und kursiv auszeichnen, mit Hyperlinks auf eine andere Seite/einen anderen Artikel verweisen, es gibt geordnete und ungeordnete Listen, Zitate, Codeblöcke, Definitionslisten, Tabellen, und Bilder kann ich auch einbinden.

Das einzige was einem Vielschreiber fehlen könnte, wären Fußnoten. Aber auch das lässt sich mit Links und IDs verwirklichen, ohne weitere Hilfsmittel leider nur mit Gefummel (Hilfsmittel: Man verwendet – wie ich – markdown+pandoc). Im Großen und Ganzen hat man aber eigentlich alles um einen Artikel zu schreiben.

So würde diese Seite in reinem HTML aussehen! Vielleicht ein wenig rustikal, aber alle Informationen sind erreichbar.

Jetzt kommt noch die kleine Prise CSS

Ein minimum Usability scheint sinnvoll. Neben ein paar Kleinigkeiten finde ich vor allem folgendes wichtig:

Die Zeilenlänge begrenzen:

Habt ihr schon mal einen längeren Text in normaler Schriftgröße auf 1920px Breite gelesen? Das ist verdammt anstrengend, weil man ständig die Zeile verliert (nochmal das Beispiel von eben). Natürlich könnte man auch das Browserfenster kleiner machen – aber wer macht das schon? CSS-Gegenmittel (37 Byte):

body{
margin: 0 auto;
max-width: 48em;}
Bildergröße anpassen:

Damit sich Bilder auch an kleine Bildschirme wie Smartphones anpassen können, nehmen wir folgenden CSS-Code (38 Byte) dazu:

img {  
max-width: 100%; 
height: auto;}
Menu-Links zu großen Schaltflächen machen:

Das Menu soll auf einem Smartphone mit den Fingern bedienbar sein (131 Byte):

nav ul li a {  
display:block;
border-radius:1em;
border:1px solid grey;
font-size:1.4em;
font-weight:700;
margin:.6em;
padding:.4em .8em;}

So sieht die gesamte CSS-Datei (600 Byte) aus.

Werkzeuge

Um den Ressourcenverbrauch meiner Website zu testen und Schwachstellen zu finden nutze ich folgende Tools:

Andere Ufer

Auf der Suche nach Vorlagen und Anregungen bin ich leider nur auf wenige Seiten gestoßen, die einen ähnlichen KISS- und Minimal-Code-Ansatz verfolgen wie ich. Die meisten Seiten die ich finde, wenn ich »minimale Website« oder ähnliche Suchbegriffe verwende, sind höchstens vom Design her minimal (meistens nicht mal das). Möglicherweise habe ich aber auch einfach noch nicht die richtigen Such-Phrasen gefunden…

Motherfucking Website
Das ist die minimalste Website die ich gefunden habe. Pur HTML ohne CSS. Abgesehen von der fehlenden Textbreiten-Begrenzung, kann man sie doch gut lesen, oder? Leider wurde die Navigation völlig ausgeblendet. Ja, ich weiß, das dass eine Satire ist… ich finde, er hat trotzdem recht!
Größe=22KiB, mobile Kosten=0,012Cent, CO²=0,01g.
Fefes Blog
Den Blog kenne ich schon länger. Info pur! Das einzige was mich stört, ist das die Zeilen über die ganze Browserbreite gehen. Übrigens ein gutes Gegenbeispiel zu der Theorie, das man ohne ansprechendes Layout keine Reichweite aufbauen könne.
Größe=6KiB, mobile Kosten=0,003Cent, CO²=0,001g.
LOW←TECH MAGAZINE
Diese Seite wird auf einem kleinen Einplatinencomputer ala Raspberry Pi betrieben, der an einer Batterie hängt, die mit einem 50W-Solar-Panel geladen wird. Nicht ganz mein Minimal-Ansatz (alleine die CSS-Datei könnte man – meiner Meinung nach – noch mal locker halbieren, ohne viel Funktion zu verlieren), aber einige interessante Ideen. Und bisher die einzige Website die ich gefunden habe, die auf Energieverbrauch optimiert ist.
Größe=346KiB, mobile Kosten=0,202Cent, CO²=0,21g.
Wholegrain Digital
Diese Webdesign-Agentur hat es geschafft, mit Wordpress eine erstaunlich ressourcenschonende Websites zu erstellen.
Größe=383KiB, mobile Kosten=0,226Cent**, CO²=0,19g*.

Dann noch etwas entfernter.

Brutalist Websites
Ich bin erst relativ spät auf den Designtrend Brutalism-Webdesign gestoßen. Leider bezieht sich das wohl zumeist nur auf das Design. Einer dieser Brutalism-Webdesigner sagte: »Die Kunst ist dabei, die Seiten so zu bauen, das sie nicht perfekt aussehen.«.
Ich möchte dagegen Seiten bauen, die mit minimalstem Aufwand möglichst funktional sind…
Cool or Not
Nebenbei bin ich noch auf die kleinste Website der Welt gestoßen… auch nicht ganz das was ich suchte, aber irgendwie witzig… :)

Kritik

Klar, es gibt eine Menge Seiten, wo mehr Aufwand durchaus gerechtfertigt ist. Ich nutze tatsächlich einige davon!

Bitte

Bitte gebt mir Bescheid! Danke! Ich fühle mich – was dieses Thema angeht – so alleine auf der Welt…

*Die Werte wurden mit dem Tool Website Carbon Calculator errechnet.

**Was mich ein Klick auf eine Website mobil kostet, hab ich folgendermaßen berechnet. Ich zahle mobil 3€/Monat für 500Mb. Jedes runtergeladene Megabyte kostet mich also 0,6 Cent.

H. Felder, Glasstr. 50, 51143 Köln, Mail: h-felder@h-felder.de