At its heart, web design should be about words. Words don’t come after the design is done. Words are the beginning, the core, the focus.

Start with words.

Da juckt es mir gleich wieder in den Fingern mein Blog-System in Rente zu schicken und durch einfache HTML-Seiten zu ersetzen. Denn so nett WordPress und Co auch sind, sie drängen zu Unnötigkeiten.

Ein Kommentarbereich, der im Monat 10.000 Spam-Kommentare untersucht, um zwei richtige durchzulassen. Tag- und Kategorienseiten, die dank Google niemand nutzt. Eine Seitenleiste für Kommentare, Artikel oder Websites, damit der Besucher sich nicht auf den Inhalt konzentriert. Und stets die Neuberechnung von eigentlich statischen Seiten; den Nutzer zehnmal länger warten lassen, damit die Ablenkung von dem was er sehen will auch immer aktuell ist.

Das Web ist ein bisschen wie das Verhältnis der Menschen zu ihrem Auto. Sicher kann man mit dem Geländewagen Brötchen holen, aber viel öfter als mancher glaubt sind Fahrradfahren und Zufußgehen die bessere Lösung.

Für einen Blog braucht man nicht viel. Ein Verzeichnis mit Markdown-Dokumenten und Bildern. Ein Parser der diese in HTML umformt und eine Übersichtsseite erzeugt. Ein Rsync auf den Server. Eine E-Mail-Adresse oder ein Konto bei einem sozialen Netzwerk für Rückmeldungen der Leser.

Eine schöner Ansatz, der zumindest einen großen Teil dieses Gebietes abdeckt, bietet Adaptive Images. Die Software habe ich nicht getestet und sie dürfte für viele ohnehin nicht nutzbar sein, da sie PHP und einen Apache Webserver erfordert. Die Idee ist aber gut und einfach umsetzbar.

Client: Cookie mit Bildschirmdimensionen setzen

Wer generell gegen Cookies und Javascript ist kann jetzt aufhören zu lesen. Via JS setzen wir im Head ein(en?) Cookie mittels JS, in dem die maximale Bildschirmgröße gespeichert wird:

document.cookie = 
    'resolution=' + Math.max(screen.width,screen.height) + '; path=/';

Da wir das Maximum wählen, können wir sicher sein, dass Bilder auch nach dem Kippen des Gerätes ins Querformat noch ordentlich aussehen.

Das war es auch schon. Der Browser sendet ab sofort bei jedem Aufruf die Auflösung mit. Auch bei Bildern, ob aus Img-Element oder CSS.

Server: Bildanfrage abfangen, Bild in neuer Größe erzeugen und umleiten

Serverseitig muss die Anfrage nun auf irgend ein Serverprogramm umgeleitet werden. Dieses kennt den Pfad zum Bild und die gewünschte Dimension. Es nimmt also das Bild, skaliert es herunter und speichert es. Nun schickt es dem Client eine Weiterleitung auf die optimierte Datei. Diese kann sogar permanent sein, da sich die Dimensionen eines Browsers in aller Regel nicht ändern.

Die Skalierung des Bildes ist nur beim ersten mal für eine bestimmte Größe nötig. Später wird auf die bereits erzeugten Varianten verwiesen.

Nur ein Ansatz

Dies ist natürlich nur ein Ansatz. Welche Bilder skaliert werden sollen und wodurch diese vom Server erkannt werden muss für jede Website geklärt werden. Zudem sollte man sich Normgrößen überlegen, damit nicht unzählige Varianten ein und der selben Datei wegen zwei Pixeln Unterschied auf der Platte landen.

Gegenüber verbreiteten Ansätzen gibt es einen zentralen Vorteil. Browser müssen nicht erst alle kleinen Bilder laden um im Nachhinein via Javascript zu erfahren, dass sie diese durch für ihre Größe angemessene Varianten ersetzen sollen. Hier lädt der Client ein Bild und der Server liefert ihm was er braucht.

Der Ansatz funktioniert nicht ohne Javascript und Cookies. Sind diese deaktiviert oder nicht vorhanden, erhält der Browser eine Standardversion des jeweiligen Bildes. Die Website funktioniert somit dennoch wie erwartet, nur die Optimierung fehlt.

Der nette Helfer lässt sich auf der Website von Benjamin Keen individuell konfigurieren und dann als einfaches Lesezeichen speichern.