{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "kolophon-footer", "name": "Kolophon: Schriften, Bildnachweis, Stand, Gewicht", "name_en": "Colophon footer / colophon page", "kurz": "Footer eines Studios mit der ruhigen Zeile „Stand 3. November 2026 · Kolophon“; dahinter eine Kolophon-Seite mit Schriftmustern, benannten Farben, Bildnachweis je Bild und gemessenem Seitengewicht ohne CO2-Wert.", "kategorie": "Footer", "kategorie_slug": "footer", "kategorie_nr": 13, "bau_chat": "C6", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 5, "stimmung": [ "ruhig", "editorial", "präzise" ], "stimmung_roh": [ "editorial", "ruhig", "präzise" ], "technik": [ "css", "html" ], "technik_gruppen": [ "css", "andere" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Am Ende der Seite steht eine ruhige Zeile „Kolophon“ mit Stand der Seite, daneben ein Link auf eine eigene Seite. Dort stehen wie im Buch die Schriften mit ihren Gestalterinnen und Gestaltern, die Farben, Bildnachweise je Foto, Werkzeuge und Hosting, Mitwirkende und das gemessene Seitengewicht mit Datum. Keine Bewegung, gesetzt als Definitionsliste.", "warum_es_wirkt": "Der Kolophon zeigt Sorgfalt, ohne zu werben, und löst nebenbei eine Pflicht: den Bildnachweis für Fotos mit Nutzungsrecht. Für Studios und Kulturhäuser ist er ein Zeichen von Handwerk, wie die Impressumsseite eines guten Buchs.", "wann_einsetzen": "Kreativstudios, Freelancer, Fotografie, Architektur, Kultur, Manufakturen. Überall, wo Bildnachweise nötig sind und die Gestaltung Teil des Angebots ist.", "wann_nicht": "Pflegedienst, Bestattung, Kfz: Dort genügt eine Zeile Bildnachweis im Impressum. Nie als Ersatz für Impressum oder Datenschutz. Keine CO2-Angaben pro Seitenaufruf und keine Badges wie „sauberer als x % aller Websites“: Seit 27.09.2026 sind Umweltaussagen ohne Nachweis riskant, vom Kunden prüfen lassen. Generik-Gefahr: Eine Zeile „Made with Framer“ ist kein Kolophon.", "varianten": [ "zeile: nur „Stand: November 2026 · Kolophon“ im Footer, die Seite dahinter", "seite: eigene Seite /kolophon mit dl (Schrift, Farbe, Bild, Technik, Dank) und Bildnachweis je Foto", "gewicht: Seitengewicht in KiB und Zahl der Anfragen, beim Bau gemessen und datiert, ohne Umweltbezug" ], "umsetzung": "1. Footer: eine Zeile mit time datetime für den Stand und Link „Kolophon“ (in mega-footer-sitemap bzw. studio-visitenkarte-footer). 2. Seite /kolophon: h1, dann dl-Gruppen Schrift, Farbe, Bild, Technik, Dank; Schriftmuster in der jeweiligen Schrift gesetzt. 3. Bildnachweis je Foto aus derselben Datenquelle wie die Bilder (z. B. bilder.json), damit nichts fehlt; im Impressum darauf verweisen. 4. Seitengewicht beim Bau messen (Summe der Übertragungsgröße der Startseite, kalt geladen) und mit Datum eintragen; live gemessene transferSize ist bei Cache und Fremdquellen 0. 5. Farben als Liste mit Namen und Wert, Kontrast der Musterflächen zum Text prüfen. 6. Kein JS nötig.", "mobil": "dl einspaltig, Schriftmuster brechen um.", "reduzierte_bewegung": "Keine Bewegung.", "barrierefreiheit": "Reiner Text, echte dl, Kontrast 4,5:1 auch für die Footer-Zeile (nicht Grau auf Grau). 320 px und 200 % Zoom ohne Abschneiden. Farbmuster nie nur über Farbe benannt." }, "messwerte": { "easing": "", "dauer_ms": "", "stagger_ms": "", "distanz": "", "sonstiges": "Low-tech Magazine zeigt 76,23 KiB als eigene Angabe", "herkunft": "beobachtet", "quelle": "solar.lowtechmagazine.com/power/ (Wert der Seite selbst)" }, "kurve": { "bezier": [ 0.16, 1.0, 0.3, 1.0 ], "css": "cubic-bezier(0.16, 1, 0.3, 1)", "name": "expo.out", "dauer_ms": 200 }, "gesehen_bei": [ { "seite": "Una Kravets: Colophon", "url": "https://una.im/colophon", "auszeichnung": "", "beobachtung": "Abgerufen 03.11.2026: eigene Seite, im Footer neben „Get in touch“ verlinkt; Abschnitte Typografie (Schrift je Rolle), Farbe (13 benannte Töne), Dank; Framework und Hosting im Einleitungstext.", "art": "website" }, { "seite": "Jock Kinneir Library: Colophon", "url": "https://jockkinneirlibrary.org/colophon", "auszeichnung": "", "beobachtung": "Abgerufen 03.11.2026: „Typeset in“ mit zwei Schriften und Herkunft, Gestaltung und Umsetzung durch SB-PH, Livegang 2017 und Aktualisierung 2019.", "art": "website" }, { "seite": "Art & Soul (Studio): Colophon", "url": "https://artandsoul.co.uk/colophon/", "auszeichnung": "", "beobachtung": "Abgerufen 03.11.2026: Schrift mit Gestaltern, CMS und Theme, Illustratorin als Bildnachweis, „relaunched in April 2022“, keine CO2-Angabe.", "art": "website" }, { "seite": "Low-tech Magazine: Power", "url": "https://solar.lowtechmagazine.com/power/", "auszeichnung": "", "beobachtung": "Abgerufen 03.11.2026: Seitengewicht direkt angezeigt („Page Size: 76.23 KiB“), im Footer „Server Stats“.", "art": "website" }, { "seite": "City of Chicago Design System: Colophon", "url": "https://design.chicago.gov/colophon", "auszeichnung": "", "beobachtung": "Abgerufen 03.11.2026: Stand Mai 2019, Schriften, Werkzeuge, Hosting und Bildquelle.", "art": "website" } ], "tutorials": [ { "titel": "MDN: PerformanceResourceTiming.transferSize", "url": "https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/transferSize" } ], "kombinierbar_mit": [ "mega-footer-sitemap", "studio-visitenkarte-footer", "footer-cta-riesen-wortmarke", "firmendaten-strukturiert", "barrierefreiheit-seite" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/", "meta": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/meta.json", "demo": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/demo" }, "herkunft": { "quelldateien": [ "Techniken-Recherche 03.11.2026" ], "pruefnotizen": [ "Bei keinem Beleg ist eine Auszeichnung belegt; die Seiten sind sehr gute Studio- und Bibliotheksseiten, keine Award-Gewinner.", "Variante gewicht bewusst ohne CO2-Angabe und ohne Umwelt-Badge: Gramm CO2 je Aufruf ist ein Schätzmodell, kein Messwert, und Umweltaussagen ohne Nachweis sind seit 27.09.2026 riskant (UWG-Umsetzung der EmpCo-Richtlinie; Einordnung nach CMS und IHK Potsdam, keine Rechtsberatung, vom Kunden prüfen lassen). Gezeigt werden nur Messwerte mit Datum: Übertragungsgröße in KiB und Zahl der Anfragen.", "Nützlich für den offenen Punkt „Bildnachweis im Impressum“ der Starter." ] }, "bau": { "status": "fertig", "kurz": "Footer eines Studios mit der ruhigen Zeile „Stand 3. November 2026 · Kolophon“; dahinter eine Kolophon-Seite mit Schriftmustern, benannten Farben, Bildnachweis je Bild und gemessenem Seitengewicht ohne CO2-Wert.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "keine Bewegung im Muster; Link-Farbe beim Hover 200 ms cubic-bezier(0.16, 1, 0.3, 1) (Rezept-Kurve)", "dauer_ms": "200 (nur Hover-Farbe)", "stagger_ms": "", "distanz": "", "zeile": "DM Mono 500, 0,75rem, Versal, +0.04em, Weiß auf #0B0B0B (19,8 : 1); time datetime=\"2026-11-03\"; Link „Kolophon“, auf der Seite selbst aria-current=\"page\"", "seite": "h1 TikTok Sans 800 wdth 75 clamp(3.5rem, 13vw, 13rem); Gruppen Schrift, Farbe, Bild, Technik, Dank als section mit h2 (DM Mono) und dl, Raster 3/9, Einträge 2/5", "schriftmuster": "„Aa“ in TikTok Sans wdth 75/800 und wdth 150/300, „Aa 01“ in DM Mono 400; Gestalter und Lizenz aus schriften.json (Grilli Type mit Contrast Foundry; Colophon Foundry; OFL 1.1)", "farben": "5 Flächen mit Name, Hexwert, Rolle und Kontrast: Nachtschwarz #0B0B0B, Weiß #FFFFFF, Kreide #F2F2F2, Schiefer #6B6B6B, Signal #FF5A1F", "bildnachweis": "aus derselben Liste wie die Bilder (JS-Array BILDER: Datei, Titel, alt, Nachweis); figure mit figcaption je Bild", "gewicht": "153 KiB in 4 Anfragen (Schriften 3 × = 119,0 KiB, HTML 33,7 KiB, Bilder 0), Summe transferSize aus Navigation und Resource Timing, kalt geladen, Chromium 153, 1280 × 800, lokaler Server ohne Kompression, gemessen am 03.11.2026; im Footer zusätzlich „153 KiB, 4 Anfragen“", "ohne_co2": "kein Gramm-CO2-Wert, kein Umwelt-Badge; Begründung als Kasten auf der Seite", "schrift": "TikTok Sans (wdth 75–150, wght 300–900), DM Mono 400/500", "raster": "Rand clamp(16px, 2.6vw, 40px), Footer 4 Spalten (2 unter 900 px, 1 unter 360 px), Wortmarke clamp(3.5rem, 19.4vw, 19rem)" }, "ausloeser": "laden", "touch": "Kein eigenes Touch-Verhalten nötig: Links und Footer-Einträge stehen untereinander, die Unterzeile bricht in zwei Zeilen, Schriftmuster und Farben werden ein- bzw. zweispaltig.", "reduziert": "Nichts zu reduzieren: Der Kolophon bewegt sich nicht. Nur die Vorführung scrollt, bei reduzierter Bewegung springend.", "korrekturen": {}, "geprueft": "03.11.2026", "notiz": "Rezept kreativstudio-buehne: erfundenes Hallraum Studio aus Kaiserslautern, Schwarz und Weiß mit Signal #FF5A1F, Wortmarke auf volle Breite (footer-cta-riesen-wortmarke) über der Kolophon-Zeile. Varianten: zeile (Grundvariante: Seitenende mit Anfrage, Footer, Zeile „Stand · Kolophon“; der Link führt im Demo zur Variante seite), seite (Kolophon-Seite mit dl-Gruppen und Bildnachweis je Bild; Bilder aus medien: typo-plakat, magazin-doppelseite, marke-roestkontor, marke-eselsohr, im Demo als Arbeiten des Studios), gewicht (Seitengewicht dieser Demo beim Bau gemessen und datiert, Anteile als Balken, Messprotokoll, Kasten „Bewusst ohne CO2-Wert“). Hosting ist ein markierter Platzhalter. Umweltaussagen vom Kunden prüfen lassen. Vorführung scrollt zur Zeile und hebt den Link hervor bzw. fährt die Gruppen ab. Selbsturteil 4.", "varianten": [ { "id": "zeile", "name": "Zeile im Footer", "wann": "Jede Studio-, Architektur- oder Kulturseite mit Kolophon-Seite: nur der Stand und ein Link, unauffällig in der Unterzeile.", "werte": { "zeile": "Stand