So geht nachhaltiges Web Design
Das Internet ist aus unserem Alltag nicht mehr wegzudenken, doch sein ökologischer Fussabdruck wird oft unterschätzt. Sustainable Web Design setzt genau hier an: Es zielt darauf ab, Websites effizienter und umweltfreundlicher zu gestalten. Ein zentrales Element dabei ist das UX-Design, das nicht nur durch ressourcenschonende Gestaltung und intuitive Bedienung, sondern auch durch Ansätze wie positives Nudging und Behavioral Design nachhaltige Verhaltensweisen fördern kann.
Obwohl digitale Technologien oft leicht und immateriell wirken, haben sie erhebliche Umweltauswirkungen.
- Bis 2040 könnte die Informations- und Kommunikationstechnik (IKT) für mehr als 14% der globalen Treibhausgasemissionen verantwortlich sein.
- Auch der Wasserverbrauch, insbesondere durch die Kühlung von Rechenzentren, ist enorm.
Trotz dieser Herausforderungen gibt es zahlreiche Ansätze, die digitale Welt nachhaltiger zu gestalten. Jede Massnahme hilft dabei, den Energieverbrauch zu senken und die Umweltbelastung des Internets zu reduzieren. Und wbwohl es mehr Aufwand erfordert, ist es mit den richtigen Entscheidungen möglich, online umweltfreundlich zu agieren. Tools wie GreenIT Analysis und Ecograder helfen dabei, den Einfluss von Websites und Web-Applikationen zu messen. Mehr Informationen dazu finden Sie hier.
Schlüsselaspekte und konkrete nachhaltige Massnahmen
1. Effizienter Code und schlanke Websites
Im Kontext von Sustainable Web Design spielt die Code-Optimierung eine zentrale Rolle. Websites bestehen aus Code, der von Servern verarbeitet und an Geräte ausgeliefert wird. Umfangreicher oder ineffizienter Code treibt den Energieverbrauch unnötig in die Höhe, was negative Auswirkungen auf die Umwelt hat. Eine schlanke und optimierte Programmierung ist ein entscheidender Schritt in die richtige Richtung, um nicht nur die Nutzererfahrung zu verbessern, sondern auch den ökologischen Fussabdruck zu verringern – und so das Potenzial für eine nachhaltigere Webpräsenz auszuschöpfen.
- Unnötigen Ballast entfernen: Nicht benötigte CSS- oder JavaScript-Dateien sollten eliminiert werden. Tools wie Minifier helfen dabei, den Code zu bereinigen und zu komprimieren.
- Caching nutzen: Zwischenspeicherung reduziert die Anzahl der Serveranfragen und beschleunigt das Laden von Daten, da sie direkt aus dem Cache abgerufen werden können.
- Dateien komprimieren: Technologien wie Gzip verringern die Dateigrösse erheblich und verbessern so die Ladegeschwindigkeit.
- Überflüssige Features vermeiden: Funktionen, die die Performance belasten, wie aufwendige Animationen oder unnötige interaktive Elemente, sollten sparsam eingesetzt oder weggelassen werden.
- Effiziente Web-Frameworks: Bei komplexeren Webapplikationen sollten effiziente Web-Frameworks verwendet werden, welche die serverseitige Prozessorlast und RAM-Auslastung minimieren.
2. Optimierung von Medien
Bilder und Videos machen durchschnittlich 60–80 % der gesamten Datenmenge einer Website aus. Ihre Optimierung bietet eine einfache Möglichkeit, Speicherplatz zu sparen und den Energieverbrauch zu senken.
Bilder
- Bildkomprimierung: Tools wie TinyPNG oder das WebP-Format können Dateigrössen erheblich reduzieren, ohne die Qualität merklich zu beeinträchtigen.
- Passendes Format wählen:
- PNG: Ideal für einfache Grafiken mit wenigen Farben.
- JPG: Besser für detailreiche Fotos.
- SVG: Optimal für skalierbare Vektorgrafiken, insbesondere bei einfachen Motiven.
- WebP: Effizienter als PNG, bessere Farben als JPG — die weitaus beste Lösung.
- Lazy Loading: Bilder werden nur dann geladen, wenn sie im sichtbaren Bereich erscheinen. Dies spart Ladezeit und Energie.
- Überflüssige Animationen vermeiden: Automatische Bilderkarusselle werden oft als störend empfunden und verursachen Datenverkehr, der vermieden werden könnte.
Videos
- Bewusster Einsatz: Da Videos den grössten Teil des Datenverkehrs verursachen, sollten sie nur genutzt werden, wenn sie einen echten Mehrwert bieten, der mit Text, Bild oder Audio nicht erreicht werden kann.
- Autoplay vermeiden: Automatisch abspielende Videos erhöhen den Datenverbrauch und stören eher, als dass sie einen Mehrwert bieten.
- Datenvolumen reduzieren: Auflösung begrenzen (z. B. 480p statt HD) und Videos mit Tools wie „Handbrake“ komprimieren, um die CO₂-Bilanz zu verbessern.
- Barrierefreiheit fördern: Alternativen wie Transkripte und Downloads ermöglichen eine umweltfreundlichere und inklusivere Nutzung.
- Videokonferenzen optimieren: Die Kamera nur bei Bedarf aktivieren, um Datenverkehr und Energieverbrauch zu minimieren.
3. Optimierung von Text
Gut gestalteter Text ist nicht nur benutzerfreundlich, sondern trägt auch zur Nachhaltigkeit von Websites bei. Weniger Daten bedeuten einen geringeren CO₂-Fussabdruck, optimierte Schriften spielen dabei ebenfalls eine Rolle.
Weitere Informationen zum effizienten Texten finden Sie in unserem Artikel zum Thema Microcopy.
Lesbarkeit und Struktur
- Lesbarkeit verbessern: Klare, gut lesbare Schriftarten wählen, auf ausreichenden Kontrast achten und die Zeilenlängen sowie Abstände optimieren. Tests wie der Lesemodus im Browser helfen bei der Bewertung.
- Effiziente Texte: Schreiben Sie prägnant und zielgerichtet, abgestimmt auf die Bedürfnisse der Nutzer:innen. Das spart Zeit und reduziert die Verweildauer im Netz.
- Strukturierte Inhalte: Nutzen Sie Zusammenfassungen, Zwischenüberschriften und eine klare Gliederung, um Kerninformationen schnell erfassbar zu machen.
Schriftarten und Nachhaltigkeit
- Systemschriften bevorzugen: Vorinstallierte Schriften wie „San Francisco“ (Apple), „Roboto“ (Google) oder „Segoe UI“ (Microsoft) benötigen keine Datenübertragung und sind die nachhaltigste Wahl.
- Lokale Einbindung: Schriftdateien direkt vom Server laden, um DSGVO-konform zu sein und die Abhängigkeit von Drittanbietern zu vermeiden.
- Effiziente Formate: Das Format woff2 verwenden, das im Vergleich zu Standardformaten bis zu 75 % kleinere Dateien ermöglicht.
- Webfonts optimieren: Vermeiden Sie unnötige Schriftschnitte und verwenden Sie nur die Varianten, die für Ihre Website wirklich nötig sind.
4. Benutzerfreundlichkeit und Effizienz
Eine durchdachte Benutzerführung ist nicht nur angenehm für Nutzer:innen, sondern trägt auch zur Energieeffizienz von Websites bei. Je schneller Informationen gefunden werden, desto weniger unnötige Klicks und Seitenaufrufe entstehen – das spart Zeit, Ressourcen und Energie. So wird nicht nur die IT grüner, sondern auch der/die Nutzer:in glücklicher.
- Intuitive Navigation: Auf bekannte Symbole, klare Menüstrukturen und konventionelle Designelemente setzen, um die Orientierung zu erleichtern und die kognitive Belastung zu verringern.
- Storytelling im Design: Farben, Formen und eine klare inhaltliche Hierarchie lenken den Fokus der Nutzer:innen, ohne sie zu überfordern. So wird die Benutzerführung sowohl informativ als auch angenehm.
- Übersichtliche Seitenarchitektur: Eine gut strukturierte Seite sorgt für schnelle Orientierung und minimiert unnötige Klicks.
- Vermeidung von Ablenkungen: Störende Pop-ups, blinkende Werbung oder andere Elemente, die den Lesefluss unterbrechen, minimieren. Der Fokus sollte stets auf den wesentlichen Inhalten liegen.
- Zielführendes Design: Die Benutzeroberfläche so gestalten, dass Nutzer:innen ihr Ziel schnell und ohne Umwege erreichen. Dies unterstützt eine effiziente Navigation und erhöht die Wahrscheinlichkeit, dass Konversionsziele erreicht werden.
5. Bewusstes Design und Nutzerführung
Sustainable Web Design bedeutet nicht nur technische Optimierungen, sondern auch ein Umdenken bei der Gestaltung. Ziel ist es, Effizienz, Inklusion und Nachhaltigkeit zu fördern – für eine digitale Welt, die allen zugänglich ist und gleichzeitig Ressourcen schont.
Energieeffiziente Gestaltung
- Dark Mode: Dunklere Farben können bei OLED-Bildschirmen Energie sparen. Der Dark Mode reduziert beispielsweise den Energieverbrauch, da OLED-Pixel bei dunkleren Farben weniger Strom benötigen. Das funktioniert bei den (noch) gängigen LCDs („liquid crystal display“) allerdings nicht.
- Minimalistisches Design: Weniger komplexe und reduzierte Designs verringern den Ressourcenverbrauch und verbessern gleichzeitig die Performance.
- Vermeidung von unnötigen Animationen: Animationen, die lange Ladezeiten oder hohe Rechenleistung erfordern, steigern den Energieverbrauch und können die Nutzererfahrung beeinträchtigen.
Barrierefreiheit und Inklusion
- Lesbarkeit und Kontraste: Ausreichender Farbkontrast und Zoomfunktionen erleichtern Menschen mit Sehbeeinträchtigungen das Navigieren.
- Alt-Attribute und Untertitel: Bilder sollten stets beschreibende Alt-Texte enthalten, während Videos mit Untertiteln oder Transkripten ausgestattet sein sollten, um sie barrierefrei zu machen.
- Navigation und Struktur: Eine klare Seitenarchitektur, semantische Überschriften (H1, H2, H3) und Tastaturbedienbarkeit erleichtern allen Nutzer:innen, einschliesslich Personen mit motorischen Einschränkungen, den Zugang.
- Diversität und Geschlechtergerechtigkeit: Eine inklusive Sprache und diverse Bildsprache fördern ein respektvolles Nutzererlebnis und sprechen auch LGBTQAI+ Personen an.
Effizienz und Nachhaltigkeit im Betrieb
- Optimierung des Datenvolumens: Websites sollten schlank gehalten werden, um auch in Regionen mit langsamer Internetverbindung zugänglich zu bleiben.
- Offline-Zugänglichkeit: Progressive Web Apps ermöglichen die Nutzung von Inhalten auch ohne aktive Internetverbindung – das spart Daten und Energie.
Minimalismus im Fokus: Websites können als minimal existenzfähiges Produkt (MVP) starten und durch iterative Optimierung verbessert werden. Dies spart Ressourcen und ermöglicht flexible Anpassungen. Ein zu ambitionierter Perfektionismus kann Projekte behindern. Ein MVP erlaubt es, mit einer soliden Basis zu starten und Erkenntnisse schrittweise zu integrieren.
6. Grünes Hosting
Die Wahl des richtigen Hosting-Anbieters hat einen wichtigen Einfluss auf den ökologischen Fussabdruck einer Website. Um einen grünen Hosting-Anbieter zu finden hilft der Green Web Check. Mit diesem Tool geprüft werden, ob die Website eines Anbieters als “grün” gelistet ist. Dies ist allerdings nur ein Indikator, nicht alle Anbieter, die grüne Energie nutzen, sind bereits gelistet.
- Nachhaltiges Hosting: Wenn Sie sich für einen Hosting-Anbieter entscheiden, der auf erneuerbare Energiequellen setzt, tragen Sie aktiv zur Reduzierung des Energieverbrauchs bei. Anbieter wie Cyon nutzen zum Beispiel Strom aus grünen Energiequellen für den Betrieb ihrer Server. Moderne Rechenzentren setzen zudem auf effiziente Kühlungssysteme und energieoptimierte Hardware, um den Stromverbrauch so gering wie möglich zu halten.
- Rechenzentren und Effizienz: Der PUE-Wert (Power Usage Efficiency) eines Rechenzentrums gibt an, wie gut es arbeitet. Ein niedriger PUE-Wert bedeutet, dass weniger Energie verloren geht, was eine nachhaltigere Infrastruktur zur Folge hat.
- Lokales Hosting: Wenn Sie ein Rechenzentrum in der Nähe Ihrer Nutzer:innen wählen, können Sie nicht nur die Ladegeschwindigkeit verbessern, sondern auch den Stromverbrauch durch geringere Latenzzeiten senken.
7. Reduktion von Datenmengen
Weniger Daten bedeuten weniger Energieverbrauch.
- Content Delivery Networks (CDNs): CDNs verteilen Inhalte auf Server weltweit, wodurch Ladezeiten verkürzt und der Energieverbrauch gesenkt wird.
- Responsive Design: Wenn Websites so gestaltet werden, dass sie sich automatisch an verschiedene Bildschirmgrössen anpassen, können unnötige Datenmengen vermieden werden, die sonst für das Skalieren oder Nachladen von Inhalten benötigt würden.
8. Suchmaschinenoptimierung (SEO)
Sustainable Web Design geht weit über ansprechende Optik und Funktionalität hinaus – es umfasst auch die Aspekte der Suchmaschinenoptimierung (SEO).
- Fokus auf Nützlichkeit: Bei der Suchmaschinenoptimierung sollte der Fokus auf dem Mehrwert für die Nutzer:innen liegen, nicht nur auf technischen Aspekten. Eine gute Platzierung in Suchmaschinen erfordert vor allem nützliche und relevante Inhalte, die den Menschen wirklich weiterhelfen.
- SEO von Anfang an: Die Optimierung sollte schon in der Konzeptphase beginnen und den gesamten Erstellungsprozess begleiten. SEO ist ein kontinuierlicher Prozess, der auch nach dem Launch einer Website weiter gepflegt werden sollte, um langfristig Erfolg zu sichern.
- Keyword-Recherche: Schon in der Planungsphase ist es wichtig, die Zielgruppe, ihre Suchintentionen und die verwendete Sprache zu verstehen. Keywords sollten natürlich in die URL-Struktur, Überschriften und Texte eingebaut werden – ohne dabei auf Überoptimierung zu setzen.
- Backlink-Aufbau: Die Relevanz einer Website wächst durch qualitativ hochwertige Backlinks von vertrauenswürdigen Quellen. Dies lässt sich durch aktive Bekanntmachung, zum Beispiel durch Gastbeiträge oder Social-Media-Erwähnungen, erreichen.
- Alternative Suchmaschinen: Neben Google bieten auch nachhaltige Suchmaschinen wie Ecosia und DuckDuckGo eine gute Alternative, die sich durch ihren umweltbewussten und datenschutzfreundlichen Ansatz auszeichnen.
- Green IT: Eine schnell ladende Website spart nicht nur Energie und reduziert den CO2-Fussabdruck, sondern verbessert auch das Suchmaschinenranking. Weniger Ladezeiten und eine optimierte Nutzerführung führen zu besseren Platzierungen, da Google Websites bevorzugt, die effizient und ressourcenschonend arbeiten.
Fazit: Gemeinsam für ein besseres Internet
Sustainable Web Design ist mehr als nur ein Trend – es ist eine Notwendigkeit in einer Welt, in der digitale Dienste ständig wachsen. Mit effizientem Code, optimierten Medien, grünem Hosting und einem durchdachten Design können wir den Energieverbrauch erheblich reduzieren. Jede noch so kleine Massnahme leistet einen wertvollen Beitrag, um den ökologischen Fussabdruck des Internets zu verringern und eine nachhaltigere digitale Zukunft zu gestalten. Weitere Inputs zum Thema finden Sie hier.