Das Glossar für Nachhaltiges Webdesign – Alles, was du wissen musst
Erfahre mehr über die Schlüsselbegriffe und Konzepte, die das Fundament für nachhaltiges Webdesign bilden. Von energieeffizientem Hosting bis hin zu nutzerzentrierten Designprinzipien – entdecke, wie du deine Website umweltbewusster und zukunftsfähig gestalten kannst.
Alle Begriffe anzeigen
Geändert am:
15.12.2025
A/B-Test
Vergleicht zwei Varianten bei echten Nutzern und zeigt, welche besser funktioniert. Datenbasierte Entscheidungen.
A/B-Test
Geändert am:
15.12.2025
API-First
API zuerst designen, dann implementieren. Klare Schnittstellen vermeiden Over-Fetching und beschleunigen parallele Entwicklung.
API-First
Geändert am:
15.12.2025
ARIA
ARIA ergänzt HTML um Rollen/States für assistive Technologien. Nutze es nur, wenn semantisches HTML nicht reicht.
ARIA
Geändert am:
15.12.2025
AVIF-Bilder
Modernes Bildformat mit 50% kleineren Dateien als JPEG bei gleicher Qualität. Ideal für Performance.
AVIF-Bilder
Geändert am:
15.12.2025
Above the Fold
Der sichtbare Bereich einer Website ohne Scrollen. Relevante Inhalte hier reduzieren unnötiges Laden.
Above the Fold
Geändert am:
15.12.2025
Alternativtext
Fokus-Management hält den Tastaturfokus sichtbar und logisch. Verhindert Tastaturfallen, besonders bei Modals, Tabs und dynamischem Content.
Alternativtext
Geändert am:
15.12.2025
Atomic Design
Strukturiert UI in fünf Stufen: Atome, Moleküle, Organismen, Templates, Seiten. Systematisches Design.
Atomic Design
Geändert am:
15.12.2025
Bildoptimierung
Bilder komprimieren, richtige Formate (WebP/AVIF/SVG) und responsive Größen nutzen. Meist größter Hebel für PageWeight und LCP.
Bildoptimierung
Geändert am:
15.12.2025
Bounce Rate
Anteil der Besucher, die nach nur einer Seite gehen. Nicht jeder Bounce ist schlecht.
Bounce Rate
Geändert am:
15.12.2025
Breadcrumbs
Zeigt den Navigationspfad innerhalb der Website-Hierarchie. Verbessert Orientierung.
Breadcrumbs
Geändert am:
15.12.2025
Browser-Caching
Speichert Ressourcen lokal. Wiederkehrende Besucher laden weniger neu – spart Energie und Zeit.
Browser-Caching
Geändert am:
15.12.2025
Bundle Size
Gesamtgröße des ausgelieferten JavaScript-Bundles. Kleinere Bundles laden, parsen und laufen schneller – besonders mobil.
Bundle Size
Geändert am:
15.12.2025
CO₂-Budgetierung
Setzt ein CO₂-Limit pro Seite/Projekt und zwingt zu messbaren Optimierungen – ähnlich Performance-Budgets, nur für Emissionen.
CO₂-Budgetierung
Geändert am:
15.12.2025
CO₂-Fußabdruck
Treibhausgasemissionen pro Seitenaufruf. Tools wie Website Carbon messen und helfen bei der Optimierung.
CO₂-Fußabdruck
Geändert am:
15.12.2025
CSS-Variablen
Benannte Werte (Custom Properties) für wiederverwendbares CSS. Erleichtern Theming und zentrale Änderungen, ohne Werte überall zu duplizieren.
CSS-Variablen
Geändert am:
15.12.2025
Call-to-Action (CTA)
Handlungsaufforderung wie „Jetzt kaufen“. Klare CTAs führen Nutzer direkt zum Ziel.
Call-to-Action (CTA)
Geändert am:
15.12.2025
Canonical Tag
rel="canonical" markiert die bevorzugte URL bei Duplicate Content. Bündelt Ranking-Signale und verhindert Indexierungs-Duplikate.
Canonical Tag
Geändert am:
15.12.2025
Clean Code
Lesbarer, wartbarer Code mit klaren Namen, kleinen Funktionen und wenig Duplizierung. Spart Zeit bei Änderungen und reduziert Fehler.
Clean Code
Geändert am:
15.12.2025
Code Splitting
Code in mehrere Bundles aufteilen und nur bei Bedarf laden. Senkt initiale Ladezeit und JavaScript-Kosten.
Code Splitting
Geändert am:
15.12.2025
Code-Effizienz
Gleiche Aufgabe mit weniger CPU/RAM/Zeit lösen. Bessere Algorithmen und weniger Arbeit sparen Energie und Kosten.
Code-Effizienz
Geändert am:
15.12.2025
Component Library
Sammlung wiederverwendbarer UI-Komponenten (Buttons bis Formulare). Spart Zeit, erhöht Konsistenz und reduziert redundanten Code.
Component Library
Geändert am:
15.12.2025
Content Delivery Network (CDN)
Verteilt Inhalte auf Server weltweit. Kürzere Wege bedeuten schnellere Ladezeiten und weniger Energie.
Content Delivery Network (CDN)
Geändert am:
15.12.2025
Content-Audit
Inventar + Bewertung aller Inhalte nach Relevanz, Qualität und Performance. Hilft beim Zusammenlegen, Überarbeiten oder Löschen.
Content-Audit
Geändert am:
15.12.2025
Conversion Rate
Anteil der Besucher, die eine Zielaktion ausführen. Höhere Conversion bedeutet effizientere Ressourcennutzung.
Conversion Rate
Geändert am:
15.12.2025
Conversion Rate
Misst, wie viele Besucher eine gewünschte Aktion ausführen. Höhere Conversion bedeutet mehr Ergebnis bei gleichem Traffic – effizienter Ressourceneinsatz.
Conversion Rate
Geändert am:
15.12.2025
Core Web Vitals
Drei zentrale Google-Metriken für Nutzererfahrung: LCP, INP und CLS. Beeinflussen SEO-Ranking direkt.
Core Web Vitals
Geändert am:
15.12.2025
Critical Rendering Path
Schritte vom HTML-Empfang bis zur Darstellung. Optimierung verkürzt Ladezeit und Rechenleistung.
Critical Rendering Path
Geändert am:
15.12.2025
Cumulative Layout Shift (CLS)
Misst visuelle Stabilität – wie oft Layout-Elemente beim Laden springen. Unter 0,1 ist gut.
Cumulative Layout Shift (CLS)
Geändert am:
15.12.2025
Customer Journey
Der gesamte Weg eines Nutzers: von der ersten Berührung mit einer Marke bis zur Conversion und Loyalität.
Customer Journey
Geändert am:
15.12.2025
DOM-Größe
Anzahl der DOM-Nodes einer Seite. Zu groß macht Rendering und JS langsam; reduziere Wrapper und nutze Lazy/Virtualisierung.
DOM-Größe
Geändert am:
15.12.2025
DRY-Prinzip
Don't Repeat Yourself: Wissen/Logik nur einmal implementieren. Reduziert Bugs, hält Code schlank und erleichtert Änderungen.
DRY-Prinzip
Geändert am:
15.12.2025
Dark Mode
Dunkle Farbvariante der Oberfläche. Spart auf OLED-Bildschirmen bis zu 60% Energie.
Dark Mode
Geändert am:
15.12.2025
Datenübertragung
Menge der Bytes zwischen Server und Browser. Weniger Daten bedeuten weniger Energieverbrauch.
Datenübertragung
Geändert am:
15.12.2025
Design System
Ökosystem aus Tokens, Komponenten, Guidelines und Doku. Ermöglicht konsistentes Design, schnelleres Bauen und weniger Duplizierung.
Design System
Geändert am:
15.12.2025
Design Tokens
Kleinste Bausteine eines Design Systems – benannte Werte für Farben, Schriften, Abstände.
Design Tokens
Geändert am:
15.12.2025
Digital Decluttering
Digitales Aufräumen: unnötige Dateien, Mails, Content entfernen oder archivieren. Spart Speicher, Backups und Energie.
Digital Decluttering
Geändert am:
15.12.2025
Digitale Nachhaltigkeit
Praktiken für ökologisch und wirtschaftlich verantwortungsvolle digitale Produkte.
Digitale Nachhaltigkeit
Geändert am:
15.12.2025
Digitaler Fußabdruck
Der gesamte Ressourcenverbrauch digitaler Aktivitäten. Jede Website verursacht CO₂.
Digitaler Fußabdruck
Geändert am:
15.12.2025
Dwell Time
Zeit zwischen Suchklick und Rückkehr zur Suche. Längere Zeit signalisiert relevante Inhalte.
Dwell Time
Geändert am:
15.12.2025
E-Waste
Elektroschrott aus elektronischen Geräten. Nachhaltige Software verlängert die Hardware-Lebensdauer.
E-Waste
Geändert am:
15.12.2025
Ecograder
Tool, das Websites nach Nachhaltigkeit bewertet: PageWeight, Performance, UX und grünes Hosting. Liefert konkrete To-dos.
Ecograder
Geändert am:
15.12.2025
Edge Computing
Rechenlogik näher am Nutzer (CDN-Edge). Weniger Latenz und oft weniger Netz-Overhead durch lokale Verarbeitung.
Edge Computing
Geändert am:
15.12.2025
Energieeffizienz
Maximale Wirkung bei minimalem Ressourceneinsatz. Optimierte Bilder und Code sparen Energie.
Energieeffizienz
Geändert am:
15.12.2025
Energieeffizienz
Maximale Leistung mit minimalem Energieverbrauch. Je effizienter der Code, desto weniger Strom.
Energieeffizienz
Geändert am:
15.12.2025
Farbkontrast
Helligkeitsverhältnis zwischen Text und Hintergrund. WCAG AA: mindestens 4,5:1 für normalen Text.
Farbkontrast
Geändert am:
15.12.2025
Farbtheorie
Wirkung und Kombination von Farben. Berücksichtigt Kontrast für Barrierefreiheit und Dark Mode für Energieersparnis.
Farbtheorie
Geändert am:
15.12.2025
First Contentful Paint (FCP)
Zeit bis der erste sichtbare Inhalt erscheint. Ein guter Wert liegt unter 1 Sekunde.
First Contentful Paint (FCP)
Geändert am:
15.12.2025
First Input Delay (FID)
Altes Core Web Vital für erste Input-Verzögerung. Seit 2024 von INP ersetzt, das Interaktionen über die Session bewertet.
First Input Delay (FID)
Geändert am:
15.12.2025
Fokusmanagement
Sorgt für ausreichend Kontrast zwischen Text und Hintergrund. WCAG: mindestens 4,5:1 für normalen Text.
Fokusmanagement
Geändert am:
15.12.2025
Funnel Analysis
Verfolgt Nutzer durch definierte Schritte und zeigt, wo sie abspringen. Ideal für Conversion-Optimierung.
Funnel Analysis
Geändert am:
15.12.2025
Goldener Schnitt
Mathematisches Verhältnis (1:1,618) für harmonische Kompositionen. Sorgt für natürlich wirkende Layouts.
Goldener Schnitt
Geändert am:
15.12.2025
Graceful Degradation
Baut die volle Experience für moderne Browser, liefert aber eine funktionsfähige Basis für ältere. Features werden abgebaut statt zu brechen.
Graceful Degradation
Geändert am:
15.12.2025
Green Coding
Ressourcenschonend programmieren: weniger Energie, Daten und CO₂. Hebel: effiziente Algorithmen, Caching, kleinere Bundles, carbon-aware Betrieb.
Green Coding
Geändert am:
15.12.2025
Green Hosting
Webhosting mit erneuerbaren Energien. Webflow bietet Green Hosting automatisch inklusive.
Green Hosting
Geändert am:
15.12.2025
Green UX
Verbindet UX mit Nachhaltigkeit. Gute UX reduziert Suchzeit und unnötige Klicks – weniger Energieverbrauch.
Green UX
Geändert am:
15.12.2025
Green Web Foundation
Verzeichnis grüner Hoster plus Check-Tools. Die API zeigt, ob eine Website mit erneuerbarer Energie gehostet wird.
Green Web Foundation
Geändert am:
15.12.2025
Grid System
Rastersystem zur strukturierten Anordnung von Elementen. Konsistente Grids reduzieren Code-Redundanz.
Grid System
Geändert am:
15.12.2025
Grünes Hosting
Hosting mit erneuerbarer Energie und oft effizienter Infrastruktur. Reduziert den CO₂-Fußabdruck ohne Änderungen am Frontend.
Grünes Hosting
Geändert am:
15.12.2025
HTTP/2
Multiplexing und Header-Kompression über eine Verbindung. Reduziert Latenz und beschleunigt Seiten mit vielen Requests.
HTTP/2
Geändert am:
15.12.2025
HTTP/3
HTTP/3 nutzt QUIC statt TCP. Schnellere Verbindungen und weniger Head-of-Line-Blocking, besonders auf mobilen Netzen.
HTTP/3
Geändert am:
15.12.2025
Hamburger-Menü
Versteckt Navigation hinter drei Linien. Spart Platz, reduziert aber Entdeckbarkeit.
Hamburger-Menü
Geändert am:
15.12.2025
Hauptthread
Browser-Thread für Rendering, JS und Input. Wenn blockiert, wird die Seite träge; entlasten durch weniger JS/Long Tasks.
Hauptthread
Geändert am:
15.12.2025
Headless CMS
CMS ohne Frontend: Inhalte per API, Frontend frei wählbar. Flexibel, performant (SSG/CDN) und gut für Omnichannel.
Headless CMS
Geändert am:
15.12.2025
Heatmap
Visualisiert Nutzerverhalten als Farbflächen: Klicks, Scrolltiefe, Mausbewegungen auf einen Blick.
Heatmap
Geändert am:
15.12.2025
Human-Centered-Design-Ansatz
Stellt den Menschen in den Mittelpunkt der Entwicklung. Langfristig nutzbare Produkte verschwenden weniger.
Human-Centered-Design-Ansatz
Geändert am:
15.12.2025
Infinite Scroll
Lädt automatisch neue Inhalte beim Scrollen. Fließend für Feeds, problematisch für Navigation.
Infinite Scroll
Geändert am:
15.12.2025
Informationsarchitektur
Strukturierung und Organisation von Inhalten, damit Nutzer schnell finden, was sie suchen.
Informationsarchitektur
Geändert am:
15.12.2025
Interaction to Next Paint (INP)
Core Web Vital für Reaktionszeit auf Interaktionen. Schlechte Werte kommen von Long Tasks; optimiere Event-Handler und JS.
Interaction to Next Paint (INP)
Geändert am:
15.12.2025
Jamstack
Architektur aus JavaScript, APIs und vorgerendertem Markup. CDN-Delivery bringt Speed, Skalierung und oft weniger Serverlast.
Jamstack
Geändert am:
15.12.2025
JavaScript-Ausführung
Parsen/Compile/Execute blockiert den Main Thread. Weniger JS und kleinere Bundles verbessern Interaktivität und sparen Energie.
JavaScript-Ausführung
Geändert am:
15.12.2025
Komprimierung
Gzip/Brotli reduzieren Übertragungsgröße um 60-80%. Massive Datenersparnis bei minimalem Aufwand.
Komprimierung
Geändert am:
15.12.2025
Kontrastverhältnis
Helligkeitsunterschied zwischen Text und Hintergrund. Mindestens 4,5:1 (WCAG AA) sichert Lesbarkeit für alle.
Kontrastverhältnis
Geändert am:
15.12.2025
Largest Contentful Paint (LCP)
Zeit bis das größte sichtbare Element geladen ist. Unter 2,5 Sekunden ist gut.
Largest Contentful Paint (LCP)
Geändert am:
15.12.2025
Laufzeitperformance
Wie effizient Code während der Ausführung läuft: weniger CPU, weniger Reflows/DOM-Arbeit, flüssigere UX.
Laufzeitperformance
Geändert am:
15.12.2025
Lazy Loading
Lädt Bilder erst wenn sichtbar. Reduziert initiale Datenmenge und verbessert Performance.
Lazy Loading
Geändert am:
15.12.2025
Long Tasks
JS-Aufgaben >50ms blockieren den Hauptthread und verschlechtern INP. Aufteilen, auslagern oder reduzieren.
Long Tasks
Geändert am:
15.12.2025
Low-Code
Entwicklung mit minimalem Code-Aufwand. Visuelle Editoren ermöglichen schnelle, effiziente Projekte.
Low-Code
Geändert am:
15.12.2025
Meta-Tags
HTML-Tags im Head, v.a. Title & Description. Beeinflussen Snippet, CTR und indirekt SEO.
Meta-Tags
Geändert am:
15.12.2025
Microinteractions
Kleine Animationen bei Nutzeraktionen. Per CSS umgesetzt verbessern sie UX ohne Performance-Overhead.
Microinteractions
Geändert am:
15.12.2025
Minification
Entfernt überflüssige Zeichen aus Code. Reduziert Dateigrößen um 10-30% ohne Funktionsverlust.
Minification
Geändert am:
15.12.2025
Mockup
Ein detaillierter visueller Entwurf einer Website – mit Farben, Schriften und Bildern, aber ohne Funktionalität.
Mockup
Geändert am:
15.12.2025
Modal
Überlagerndes Dialogfenster, das Aufmerksamkeit erzwingt. Sparsam einsetzen – zu viele verschlechtern UX.
Modal
Geändert am:
15.12.2025
Modulare Architektur
System in klar getrennte Module mit definierten Schnittstellen. Bessere Wartbarkeit, Wiederverwendung und gezieltes Code-Splitting.
Modulare Architektur
Geändert am:
15.12.2025
Nachhaltiges Webdesign
Ansatz zur Minimierung der Umweltauswirkungen von Websites durch effizientes Design und grünes Hosting.
Nachhaltiges Webdesign
Geändert am:
15.12.2025
Open Graph
Meta-Tags für Social Previews (Titel, Beschreibung, Bild). Bestimmt, wie Links auf Facebook/LinkedIn etc. aussehen.
Open Graph
Geändert am:
15.12.2025
PageWeight / Seitengröße
Gesamtgröße aller Ressourcen einer Webseite. Unter 500 KB ist ideal – Bilder sind meist der größte Faktor.
PageWeight / Seitengröße
Geändert am:
15.12.2025
Pagination
Teilt lange Inhalte in nummerierte Seiten auf. Nutzer behalten Kontrolle und können gezielt navigieren.
Pagination
Geändert am:
15.12.2025
Performance Budget
Obergrenzen für Ladezeit und Dateigröße. Zwingt zu effizienten Entscheidungen.
Performance Budget
Geändert am:
15.12.2025
Persona
Fiktives, datenbasiertes Profil eines typischen Nutzers. Hilft bei nutzerzentrierten Entscheidungen.
Persona
Geändert am:
15.12.2025
Preconnect
Baut DNS/TCP/TLS-Verbindung früh auf, bevor Ressourcen geladen werden. Spart oft hunderte Millisekunden bei externen Domains.
Preconnect
Geändert am:
15.12.2025
Prefetch
Lädt wahrscheinlich benötigte Ressourcen später im Hintergrund vor. Hilft Navigation, kann aber Bandbreite verschwenden, wenn falsch eingesetzt.
Prefetch
Geändert am:
15.12.2025
Preload
Priorisiert kritische Ressourcen sofort (Fonts, Hero-Bilder, CSS). Zu viel Preload kann andere Downloads verdrängen.
Preload
Geändert am:
15.12.2025
Progressive Enhancement
Startet mit robuster HTML-Basis, ergänzt CSS/JS nur wenn unterstützt. Funktioniert überall und ist nachhaltig durch weniger Abhängigkeiten.
Progressive Enhancement
Geändert am:
15.12.2025
Progressive Web App (PWA)
Installierbare Website mit Offline-Caching via Service Worker. Schnell, wiederverwendbar und spart wiederholte Datenübertragung.
Progressive Web App (PWA)
Geändert am:
15.12.2025
Prototyping
Interaktive, klickbare Modelle einer Website zum Testen von Designideen – bevor Code geschrieben wird.
Prototyping
Geändert am:
15.12.2025
Refactoring
Code verbessern ohne Verhalten zu ändern. Macht Struktur, Lesbarkeit und Wartbarkeit besser – Voraussetzung: Tests.
Refactoring
Geändert am:
15.12.2025
Render-Blocking
Ressourcen (CSS/JS/Fonts), die Rendering verzögern. Lösung: Critical CSS, async/defer, sinnvolle Preloads.
Render-Blocking
Geändert am:
15.12.2025
Render-Strategie
Bestimmt, wann und wo HTML generiert wird: Server, Browser oder Build-Zeit. Beeinflusst Performance und Ressourcenverbrauch.
Render-Strategie
Geändert am:
15.12.2025
Resource Hints
Browser-Hinweise wie preload/prefetch/preconnect. Steuern Prioritäten für Ressourcen und können Ladezeiten spürbar verkürzen.
Resource Hints
Geändert am:
15.12.2025
Responsives Webdesign
Websites passen sich automatisch an Bildschirmgrößen an. Mobile-freundliche Seiten laden schneller.
Responsives Webdesign
Klimafakt
Wäre das Internet ein Land, läge es im Länderranking der größten CO2-Produzenten auf Platz 6.
Nachhaltiges Webdesign