Meine Vorstellungen einer minimalen Website
Die Seite war aber jetzt schnell da, was? Kunststück! Sind ja auch nur knapp 49KiB gewesen (Bilder 29,8Kib, Content-Text 11,7Kib und 718 Bytes die CSS-Datei und nur wenig Overhead). Das wars! Und – huch? – es gab auch nix nerviges wegzuklicken…
Warum mache ich so was?
Die meisten »modernen« Websites nerven mich total! Erst darf ich
dank fettem CMS und überlasteten Server eine gefühlte Ewigkeit auf die
Seite warten. Dann muss ich einen Urwald von bildschirmfüllenden
Anmelde-, Cookie-Genehmigungs- und Benachrichtigungs-Popups wegtreten,
um dann in der irgendwann sichtbar gewordenen unendlichen Werbewüste
nach dem bisschen Inhalt zu suchen der mich interessiert… bis mir vom
klicken und scrollen der Finger abgefallen ist.
Diese Seite verdeutlicht das sehr schön: Das Web Heute
Ich habe keinen Schimmer, was ihr so im InterWeb macht, aber ich suche fast ausschließlich nach Informationen (meist im Bereich Bildung und Wissen). Sei es unterwegs mit dem Smartphone oder zu Hause am Desktop; ich hasse alles, was sich zwischen mir und der gesuchten Information stellt (nämlich überflüssige Werbung, »cooles« Design und/oder Bürokratie)!
-
Die Werbebranche mit ihrer penetranten völlig uferlosen Werbebanner-Hölle und ihrem nachtragenden Tracking.
-
Die Webdesigner mit ihren bildschirmfüllenden Stockfotowüsten ohne Aussage mit drei Sätzen pro Seite, mehreren Megabyte unnützen Code- und potentiell gefährlichen Script-Unterbau!
-
Die Politik und Bürokratie mit größtenteils völlig hirnrissiger Reguliererei!
Design
Ich bemühe ich mich den Inhalt meiner Website möglichst einfach zu
halten und schnörkellos darzustellen (KISS-Prinzip). Ein
klarer Aufbau der Seite und eine übersichtliche und selbsterklärende
Navigation halte ich für wichtig.
Der Rahmen soll möglichst unsichtbar bleiben und nicht ablenken.
Ich möchte keine “schöne” Website machen, sondern Inhalte
darstellen!
Quellcode
Seit einigen Jahren versuche ich auch den Quellcode möglichst einfach und klein zu halten. Diese Website hier ist mein Experimentierfeld.
Warum denn den Quellcode klein halten? Schließlich haben wir alle genug Bandbreite, RAM und Speicherplatz, oder?
- Zuvor ein paar Fakten:
- Laut http archive ist eine durchschnittliche Website im Jahre 2019 etwa 2000KiB groß. Diese würde mich pro Klick mobil 1,2 Cent 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 mobil zahlt man noch immer für jedes Megabyte. Das laden dieser Website auf mein Handy kostet mich 0,03 Cent (1/40 einer durchschnittlichen Website des Jahres 2019).
- Ladezeiten:
- Je nachdem was auf dem Server sonst noch so los ist, kann es auch schon mal sein, das es eine nicht unerhebliche Zeit dauert, bis das CMS eine Seite zusammengebastelt hat. Und/oder es dauert ewig und drei Tage, bis man die fette Website durch irgendein Nadelöhr im Netz gezogen hat, weil man beispielsweise gerade in der Pampa im Zug sitzt.
- Umweltbelastung:
- Diesen Aspekt haben die meisten noch nicht so auf dem Schirm. Mittlerweile (Stand 2019) produziert das Internet soviel CO² wie der internationale Flugverkehr! Der Klick auf diese Website hat gerade mal 0,03g CO² produziert! Ich kann diese Seite über vierzig mal aufrufen, bis ich den CO² Wert eines Klicks auf eine durchschnittlichen Website des Jahres 2019 erreiche.
Welche Vorteile bietet ein minimaler Quellcode konkret?
Ich versuche diese Website also so zu gestalten, wie ich selber eine Website gerne vorfinden würde:
- blitzschnell geladen (auch wenn man gerade kein 100Mbit/s DSL/5G hat).
- einfache und selbsterklärende Navigation.
- keine Suche nach dem Inhalt.
- möglichst wenig Nervfaktor!
Daher:
- kein lahmes CMS dahinter.
- keine WERBUNG!
- kein ablenkendes Design.
- keine Scripte.
- keine Cookies/kein Tracking… also auch keine halbbildschirmfüllenden Genehmigung-Popups.
- die Website bettelt nicht darum Benachrichtigungen schicken zu dürfen.
- keine losplärrenden Videos.
- und einen Facebook- und Twitter-like-Button gibts auch nicht.
Dafür ist die Website so nebenbei:
- sicherer (die meisten Katastrophen beim surfen holt man sich über Scripte).
- passt sich an alle Bildschirme an (Responsive Web Design).
- rudimentär barrierefrei.
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 eine kleine Prise CSS
Ein Minimum Usability scheint mir aber 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 ganzer Browserbreite gelesen? Das ist verdammt anstrengend, weil man ständig die Zeile verliert (hier ein Beispiel). 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 (122 Byte):
nav ul li a { display:block; border-radius:1em; border:1px solid grey; font:700 1.1em; margin:.6em; padding:.4em .8em;}
Die Navigation auf dem Desktop am linken Rand und ein "Nach-oben-Button" sind nicht unbedingt nötig, können aber manchmal nützlich sein.
- Navigation auf der linken Seite:
-
Damit die Navigation am Desktop ab 50 em auf der linken Seite steht fügen wir noch folgendes in den CSS-Code ein (107 Byte) dazu:
@media(min-width:50em ) { body { display: flex} main { flex: 1; order: 2} nav { flex: 0 1 20em; order: 1}}
- Ein "Nach-oben-Button":
-
Damit man aus dem Text heraus schnell wieder an die Navigation kommt, ist ein "Nach-oben-Button" sinnvoll (76 Byte):
.nachoben { right: 0; bottom: 1em; position: fixed; background-color: #eee}
So sieht die gesamte CSS-Datei (579 Byte) aus.
Ich will mich aber nicht mit HTML beschäftigen
Okay… aber mit irgendwas muss man sich beschäftigen, wenn man was im Interweb publizieren will. Auch durch ein CMS (beispielsweise Wordpress) muss man erst mal durchblicken! Welche Möglichkeiten gibt es eine statische Websites zu erstellen:
- Den Code hier kopieren
- Das ist wohl tatsächlich der schnellste Weg zu einem Ergebnis… HTML-, CSS- und Bild-Dateien runter laden, das Bild wechseln und mit einem Texteditor den Text austauschen. Und dann bei Bedarf langsam Änderungen einarbeiten. Wobei HTML noch relativ übersichtlich ist; im Gegensatz zu CSS…
- Einen SSG verwenden
- Static Site Generatoren sind mächtige Tools. Ich habe mal eine Seite mit Hugo aufgesetzt. Sinnvoll wenn man einen oder mehrere Artikel pro Tag einstellt. Aber intuitiv ist was anderes!
- Publii oder lektor verwenden
- Diese Tools sind CMS sehr ähnlich, aber sie basteln nicht bei jeder Anfrage auf dem Server die Webseite neu, sondern erstellen statische Seiten auf deinem Desktop, die dann auf den Webspace hoch geladen werden.
Werkzeuge
Um den Ressourcenverbrauch und die Datensicherheit meiner Website zu testen sowie Schwachstellen zu finden nutze ich außer den browserinternen DevTools (speziell Lighthouse in Chrome) folgende Online-Services:
-
Webpage Test - teste die Leistung deiner Website.
-
Ecograder - Wie grün ist deine Website?
-
Webkoll - Prüfe die Datenschutzmaßnahmen deiner Website.
Andere Ufer
Auf der Suche nach Vorlagen und Anregungen bin ich leider nur auf wenige Seiten gestoßen, die einen ähnlichen KISS- und/oder 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 die erste 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, trotz Wordpress eine
erstaunlich ressourcenschonende Websites zu erstellen.
Größe=383KiB, mobile Kosten=0,226Cent, CO²=0,19g.
Kritik
Klar, es gibt eine Menge Seiten, wo mehr Aufwand durchaus gerechtfertigt ist. Ich nutze tatsächlich einige davon! Und ja, auch ich möchte nicht den Amazon-Shop in HTML/CSS pflegen müssen…
Bitte
- Wenn ihr Websites kennt, deren Code so minimal ist wie diese…
- Wenn ihr Foren, Mailinglisten oder Artikel kennt, die mein Thema (Minimal-Code/Energieverbrauch-Optimierung) behandeln…
- Wenn ihr eine Möglichkeit seht, den HTML- oder CSS-Code dieser Seite ohne Funktionsverlust weiter zu verschlanken…
Bitte gebt mir Bescheid! Danke! Ich fühle mich – was dieses Thema angeht – so alleine auf der Welt…
*Die CO²-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 (prepaid) 3€/Monat für 500Mb (2019). Jedes runtergeladene Megabyte kostet mich also 0,6 Cent.
H. Felder, Glasstr. 50, 51143 Köln, Mail: h-felder@h-felder.de