Nachhaltiges Webdesign - ökologisch, ökonomisch, verantwortungsbewusst
Als unternehmerisch tätige und umweltbewusst handelnde Person hast du dir zum Ziel gesetzt, nicht nur mit deinem nachhaltigen Angebot, sondern auch mit deiner Website einen Beitrag zum Klimaschutz zu leisten. Du bist dir im Klaren, dass deine Kundschaft für das Thema Nachhaltigkeit in besonderem Maße empfänglich ist. Sie achtet darauf, in welchem Umfang du mit deiner Marke soziale Verantwortung übernimmst, Nachhaltigkeitsziele definierst und umsetzt. Du weißt, je umfassender und schlüssiger du dein unternehmerisches Handeln an diesen Zielen ausrichtest, desto authentischer wirkt deine Marke. All das soll sich auf deiner Website sowohl inhaltlich, als auch technisch widerspiegeln. Du fragst dich, wie all das bewerkstelligt werden kann?
Hast du schon von nachhaltigem Webdesign gehört? Nachhaltiges Webdesign ist die konsequente Antwort auf den Klimawandel und bietet darüber hinaus zahlreiche ökonomische Vorteile, die ich dir näherbringen möchte.
hej, ich bin Ralf, freiberuflicher Webdesigner und Konzepter. Ich kann dich bei vielen Themen rund um deine Website unterstützen. Nachhaltigkeit und nachhaltiges Webdesign liegen mir besonders am Herzen. Hypes, die gerade im Internet kursieren, nehme ich kritisch unter die Lupe. Mein Motto lautet: "Ich muss nicht jede Welle reiten".
Ich freue mich auf unsere Zusammenarbeit.
1. Der immense Stromverbrauch des Internets
Wie dir bestimmt bekannt ist sind die CO2-Emmissionen, die das Internet und internetfähige Geräte verursachen, gewaltig. Auch wenn es zahlreiche Untersuchungen gibt, das genaue Ausmaß kann niemand beziffern. Doch in einem Punkt sind sich alle Studien einig: Der stark steigende Stromverbrauch des Internets wirkt sich nachteilig auf unser Klima aus, und er wird zukünftig weiter steigen. Nachhaltiges Webdesign kann helfen, Strom zu sparen.
Lass mich ein paar Zahlen herausgreifen, die das Ausmaß nach meiner Einschätzung gut veranschaulichen.
Eine Fahrt von München nach Rosenheim
Eine Internetseite mit einer Datenmenge von 2,39 MB (Durchschnittswert Stand 2023) verursacht ca. 0,86 g CO2 pro Seitenaufruf (PV = page view). 10.000 Seitenaufrufe erzeugen demnach CO2-Emissionen in Höhe von 8,6 kg. Im Vergleich stößt ein PKW mittlerer Größe 150 g CO2 pro Kilometer aus. Du kannst also entweder 10.000 Internetseiten durchschnittlicher Größe aufrufen, oder 57,3 km mit einem Mittelklassewagen fahren. Eine Strecke von 57,3 km entspricht etwa einer Fahrt von München nach Rosenheim.
Im Gegensatz zu 57 km Wegstecke sind 10.000 Seitenaufrufe ein Wert, der schwer fassbar ist. Deshalb ziehe ich zur Veranschaulichung eine aktuelle Contentsquare-Studie heran. Laut dieser Studie beträgt die durchschnittliche Verweildauer auf einer Internetseite 47 Sekunden. Eine 2022 erschienene ARD/ZDF-Onlinestudie kommt zu dem Ergebnis, dass eine das Internet nutzende Person in Deutschland durchschnittlich 37 Minuten pro Tag Textinhalte abruft. [Anmerkung: Bei meiner Berechnung berücksichtige ich keine Video und Audio-Inhalte, weil die übertragenen Datenmengen hier weit über dem Durchschnittswert von 2,39 MB pro Internetseite liegen.]
Ausgehend von den genannten Durchschnittswerten ruft eine das Internet nutzende Person in Deutschland 47,23 Seiten pro Tag auf. Bei täglicher Internetnutzung werden 10.000 Seitenaufrufe nach circa 6 Monaten und 29 Tagen erreicht.
10 Monate und 10 Tage benötigt ein Baum, um CO2-Emissionen, die durch 10.000 Seitenaufrufe beziehungsweise 57,3 gefahrene Kilometer entstehen, auszugleichen.
Nehmen wir an, du würdest einen Baum pflanzen, um Textinhalte im Internet CO2-neutral abrufen zu können. Unter diesen Bedingungen stünden dir täglich 25 Minuten für die Internetrecherche zur Verfügung. Das sind 12 Minuten weniger als die durchschnittliche Zeit, die eine das Internet nutzende Person in Deutschland aktuell dafür verwendet.
Solche Zahlen sprechen eine deutliche Sprache und fordern uns auf, in nachhaltiges Webdesign zu investieren.
Um mit deiner Website einen Beitrag zu einer besseren Klimaverträglichkeit zu leisten, solltest du ein Webhosting wählen, das seinen Strom zu 100% aus erneuerbaren Energien bezieht.
Als Grundlage für meine Berechnungen habe ich unterschiedliche Quellen genutzt. Links zu diesen Quellen findest du am Ende dieses Artikels.
2. Technische Website-Optimierung
Du denkst, dass eine Website allein nicht viel zum Klimaschutz beitragen kann? Weit gefehlt. Es gibt viele unterschiedliche Stellschrauben, die du nutzen kannst, um deine Website klimafreundlich zu gestalten. Nachhaltiges Webdesign berücksichtigt auch alle technischen Aspekte einer Website.
Für den weitaus größten Teil der CO2-Emissionen ist die Übertragung von Bild-, Audio- und Video-Dateien verantwortlich. Doch andere Elemente einer Website tragen ebenfalls zur Vergrößerung des Datenvolumens bei. Dazu zählen umfangreiche JavaScript-Bibliotheken, Webfonts und Website-Erweiterungen. Umso problematischer ist es, wenn Websites nur einen Bruchteil der Funktionen nutzen, welche durch die zusätzlich geladenen Dateien bereitgestellt werden. Dies verlängert die Ladezeit einer Website. Längere Ladezeiten erhöhen den Energieverbrauch und führen zu einem höheren CO2-Ausstoß.
Komprimierung von Bilddateien
Gerade bei der Bereitstellung von Bilddateien wird oft zu wenig auf die passenden Dateiformate und die Qualität der Komprimierung geachtet. Du solltest deshalb besonderes Augenmerk auf diese beiden Aspekte legen. Aktuelle Dateiformate sind zum Beispiel WebP und SVG (Salable Vector Graphics):
Das WebP-Format vereint die Eigenschaften dreier Bilddateiformate: JPG (verlustbehaftete Komprimierung), PNG (verlustfreie Komprimierung und Transparenz) sowie GIF (Transparenz und Animation). Zudem übertrifft das WebP-Format die anderen Bilddateiformate hinsichtlich Dateigröße. Das WebP-Format wird mittlerweile von den meisten modernen Browsern unterstützt.
TIPP: Zum Thema Bildoptimierung (PNG, JPG, WebP) empfehle ich dir meinen Artikel: Bilder komprimieren - Stets beste Ergebnisse mit Squoosh?
Du erfährst, wie du mit optimalen Komprimierungsraten Ladezeiten und CO2-Emissionen reduzierst - ohne Abstriche bei der Bildqualität. Bewährte Desktop-Software, kostenlose Alternativen und ein webbasiertes Tool sind im Rennen. - Mein Test liefert überraschende Ergebnisse.
Das SVG-Format ist nicht wie das WebP-Format pixel- sondern vektorbasiert. Es eignet sich für Logos, Infografiken, Symbole und sonstige grafische Elemente auf einer Website. SVG-Grafiken sind beliebig skalierbar und werden in jeder Auflösung gestochen scharf dargestellt. Daher entfällt bei Vektorgrafiken - anders als bei Pixelbildern - die Notwendigkeit, mehrere Versionen einer Bilddatei für unterschiedliche Bildschirmgrößen bereitzustellen. Zudem besteht die Möglichkeit, SVG-Dateien mit Hilfe von CSS, SMIL und JavaScript zu animieren.
TIPP: Zum Thema Vektorgrafiken empfehle ich dir meine beiden Artikel
DRY KISS
"Don't repeat yourself" und "keep it simple and smart" sind Prinzipien, die bei der Entwicklung einer Website eine zentrale Rolle spielen. Bereits bei der Planung der technischen Umsetzung werden unterschiedliche Einflussfaktoren wie Zugänglichkeit, Dark und Light Mode-Eignung, Cross Browser und Cross Plattform-Kompatibilität sowie Flexibilität mitberücksichtigt. Dabei gilt es, das Verhältnis von Aufwand und Nutzen stets im Blick zu behalten. Denn der Aufwand für jedes optische Extra potenziert sich schnell, wenn es in unterschiedlichen Kontexten einwandfrei funktionieren soll. Die Devise lautet: mit geringem Aufwand größtmögliche Wirkung erzielen.
Komponentensparsamkeit
Um das Ziel einer ressourcenschonenden Website zu erreichen, solltest du schon bei der Planung die vorgesehenen Website-Komponenten auf ihre Nachhaltigkeit hin überprüfen. Eine auf Nachhaltigkeit ausgerichtete Konzeption hinterfragt die Sinnhaftigkeit jeder Website-Komponente im Hinblick auf das Gesamterscheinungsbild. In diesem Zusammenhang spielt der Begriff der Komponentensparsamkeit eine wichtige Rolle: Hierbei liegt dein Hauptaugenmerk auf der Kernaussage deiner Marke. Davon ausgehend verwendest du nur Designelemente, die deine Markenbotschaft optimal zum Ausdruck bringen.
Ressourcenschonende Technologie
Neben der Komponentensparsamkeit gilt es ebenfalls die ressourcenschonende technische Realisierung der einzelnen Websitekomponenten im Blick zu haben. Diese beginnt bei der Auswahl des passenden Content Management Systems und endet bei der Optimierung des Bild-, Audio- und Videomaterials.
Ich empfehle dir, bereits im Zuge der Website-Konzeption über die mögliche Einbindung eines Dark Mode-Designs, nachzudenken. Auf mobilen Geräte mit OLED-Displays sorgt ein Dark Mode-Design für eine Reduktion des Stromverbrauchs und damit für längere Akkulaufzeiten. Deine Besucher*innen werden dankbar sein, dass deine Website ihre Akkus schont.
Modularisierung ist eine weitere wichtige Technik, die du kennen solltest. Dabei werden Website-Komponenten in voll funktionsfähige Module zerlegt. Diese Vorgehensweise ermöglicht es, im Sinne einer schlanken Umsetzung ausschließlich Use Case-relevante Module einzubinden. Unnötiger Ballast fällt weg.
Nachhaltigkeitsprüfung und Optimierung
Auf die Konzeption und Umsetzung deiner klimafreundlichen Website folgt als nächster Schritt eine Nachhaltigkeitsprüfung mit anschließender Optimierung. Dabei kommen Tools wie Ecograder, Digital Beacon, PageSpeed Insights und Core Web Vitals zum Einsatz. Nachhaltiges Webdesign lässt sich auf diese Weise an Hand klar definierter, technischer Vorgaben bewerten.
3. Ökonomische Vorteile einer nachhaltigen Website
Eine technische Optimierung deiner Website verringert nicht nur den CO2-Fußabdruck, sondern geht auch mit zahlreichen ökonomischen Vorteilen einher: Eine nachhaltige Website ist leichter erreichbar und besser auffindbar. Sie sorgt für geringere Absprungraten und eine stärkere Bindung der Kundschaft.
Barrierefreie Website
Eine nachhaltige Website ist ebenfalls eine barrierefreie bzw. barrierearme Website, weil sie die Bedürfnisse von Menschen mit Behinderung berücksichtigt. Sie ist übersichtlich aufgebaut. Ihre Inhalte sind mit wenigen Klicks erreichbar. Angemessene Kontraste zwischen Hintergrund und Vordergrund gewährleisten eine gute Lesbarkeit der Texte. Mit deiner nachhaltigen Website erreichst du einen weiteren Personenkreis und erhöhst damit den Bekanntheitsgrad deiner Marke auch in sozialer Hinsicht.
Optimiert für Suchmaschinen
Suchmaschinen bevorzugen Websites mit einem klar strukturierten Aufbau, gut verständlichen Inhalten und kurzen Ladezeiten. Eine nachhaltige Website erfüllt alle genannten Kriterien, welche sich positiv auf die Platzierung in den organischen Suchergebnissen auswirken. Ein besseres Suchmaschinen-Ranking steigert die Besuchszahlen. Besuchende einer nachhaltigen Website finden direkt zum gewünschten Inhalt. Dadurch verringert sich die Absprungrate. Für dich auf Anbietendenseite bedeutet das: Steigende Besuchszahlen, und das schnelle Auffinden relevanter Inhalte, führen zu steigenden Umsätzen.
Tue Gutes und rede darüber
Indem du auf deiner Website über die von dir ergriffenen Nachhaltigkeitsmaßnahmen informierst, wirkt dein Angebot auf deine umweltbewusste Kundschaft noch überzeugender. Sie kann direkt erkennen, dass du das Thema Nachhaltigkeit vielseitig betrachtest und entsprechend umsetzt. Maßnahmen für eine nachhaltige Website sind zum Beispiel:
- Green Hosting: Nutzung eines Webhosting-Anbieters, der Ökostrom nutzt
- Umweltsiegel: Zertifizierung als klimafreundliche Website
- Website Carbon: Top-Ranking in der CO2-Emissionsreduktion
Damit vermittelst du deiner Kundschaft, dass sie guten Gewissens deine Produkte und Dienstleistungen kaufen kann. Das Vertrauen in deine Marke wird gestärkt.
4. Wie eine Zusammenarbeit mit mir aussehen kann
Bei meinem Beratungs- und Designansatz habe ich mir zum Ziel gesetzt, das Nachhaltigkeitsprinzip gleich zu Beginn des Design-Prozesses einzubeziehen. Nur ein bis ins Detail durchdrungenes Konzept und dessen konsequente Umsetzung ist in der Lage, die Botschaft der eigenen Marke treffsicher zu transportieren und die volle Überzeugungskraft gegenüber der Kundschaft zu entfalten.
Gerne helfe ich dir bei deinem Website-Projekt, bei welchen Themen und in welchem Umfang entscheidest du.
Mein Angebot beginnt bei einem Nachhaltigkeitscheck, der dir einen detaillierten Bericht über das Optimierungspotenzial deiner Website liefert. Wenn du die Optimierung deiner Website lieber abgeben möchtest, kann ich dich dabei gerne unterstützen.
Solltest du noch keine eigene Website haben, kann ich den gesamten Entwicklungsprozess begleiten oder auch ganz übernehmen. Mein nachhaltiges Webdesign-Angebot beginnt, wenn gewünscht bei der Definition deines Alleinstellungsmerkmals inkl. Konkurrenzanalyse, gefolgt von Konzeption, Website-Layout und Realisierung.
Du willst klimaschonend handeln und den CO2-Fußabdruck deiner Website auf Basis eines Gesamtkonzepts reduzieren? Gleichzeitigt möchtest du die sich daraus ergebenden, ökonomischen Vorteile nutzen? Dann bietet sich jetzt die richtige Gelegenheit für nachhaltiges Webdesign.
