Recherchen · abyss · 20.10.2026

Recherchen zur Gestaltung von Websites

Berichte über Gestaltung und Technik von Websites, alle nach demselben Verfahren erhoben und in derselben Schrift gesetzt. Jeder Bericht steht im Original, mit den Screenshots aus der Aufnahme und den Messwerten, die dabei entstanden sind.

Berichte1 veröffentlicht
VerfahrenHeadless Chrome, 1440 × 900
StilPapier, Serife, keine Webfonts
Umfang15 bis 20 Seiten je Bericht
01

Die Berichte

Vollständige Berichte mit Aufbau der untersuchten Seiten, Messwerten, Screenshots und Quellen.

02

Wie ein Bericht entsteht

Fünf Schritte, für jeden Bericht dieselben. Sie stehen hier, damit die Zahlen in den Berichten vergleichbar bleiben.

  1. AuswahlZehn bis zwanzig Adressen aus einem Feld, in dem die Auswahl etwas beweist. Für den Fotobericht waren das Praktiken mit Museums- und Verlagsausstellungen, nicht die kommerziellen Hochzeits- und Eventportfolios. Was nicht antwortet, steht am Ende des Berichts mit Grund.
  2. AufnahmeJede Seite in einem Headless-Chrome-Fenster bei 1440 × 900 Pixeln, sechs Sekunden Wartezeit, ein Scroll-Durchlauf, dann ein Screenshot. Mobil zusätzlich bei 390 × 844 Pixeln mit doppelter Pixeldichte.
  3. MessungAus dem DOM gelesen: berechnete Schrift, Farben, Bildanzahl, Dokumenthöhe, Navigation, Lazy-Loading. Last über die Performance-API, gegengeprüft durch Nachladen der Bilddateien im Browser.
  4. SchreibenEin Abschnitt pro Seite mit Datenleiste, Abbildung, zwei Absätzen und einem Verdikt. Dazu die Kapitel Muster, Regeln, Werkzeuge und Messwerte. Jeder Text geht durch die Prüfung aus humanizer-lite.
  5. PrüfenLayout bei 1440 und 390 Pixeln kontrolliert, jeder Bildpfad einzeln abgerufen, Zahlen gegen die Rohdaten gelesen. Grenzen der Messung stehen im Bericht, nicht im Kleingedruckten.
03

Der Stil für alle Berichte

Papier statt Weiß, Serife für den Text, Groteske nur für Labels, Rost als einziger Akzent. Keine Webfonts, kein Tracking, kein Cookie-Banner.

Papier#f4f2ec
Papier tief#ece9e0
Tinte#1a1917
Grau#5f5b52
Rost#a4421f
Linie#d5cfc0
Rahmen#b8b0a0

Ein Bild pro Bildschirm, eine Textspalte links, Papiergrau statt Reinweiß.Iowan Old Style, Palatino, Georgia, serif

Text
Serife 17 bis 19 Pixel, Zeilenlänge 64 Zeichen, Zeilenhöhe 1,62. Abschnittstitel 25 bis 36 Pixel, Kapitelnummern in Monospace.
Labels
Groteske, 10 bis 12 Pixel, gesperrt und in Versalien. Nur für Datenleisten, Bildunterschriften und Navigationsleisten.
Raster
Seite 1220 Pixel, Inhaltsleiste 172 Pixel, Textspalte 902 Pixel bei 1440 Pixeln Fensterbreite. Mobil eine Spalte, Inhaltsleiste als Zweispalter mit 38-Pixel-Zielhöhe.
Bilder
Screenshots als JPEG, 1280 Pixel breit, Qualität 82, Rahmen in #b8b0a0, Bildunterschrift in Groteske 11,5 Pixel.
Farben
Papier, Tinte, Grau, Rost. Ein Akzent für Nummern, aktive Links und Verdikte, sonst keine Farbe.
Gewicht
Ein Bericht bleibt unter 3 MB. Der Fotobericht liegt bei 2,5 MB inklusive 23 Screenshots.

Bausteine: tokens.css · report.css · hub.css
Gerüst für neue Berichte: template/