Sustainable Web Design

So geht nachhaltiges Web Design

Das Inter­net ist aus unserem All­t­ag nicht mehr wegzu­denken, doch sein ökol­o­gis­ch­er Fuss­ab­druck wird oft unter­schätzt. Sus­tain­able Web Design set­zt genau hier an: Es zielt darauf ab, Web­sites effizien­ter und umwelt­fre­undlich­er zu gestal­ten. Ein zen­trales Ele­ment dabei ist das UX-Design, das nicht nur durch ressourcenscho­nende Gestal­tung und intu­itive Bedi­enung, son­dern auch durch Ansätze wie pos­i­tives Nudg­ing und Behav­ioral Design nach­haltige Ver­hal­tensweisen fördern kann.

Obwohl dig­i­tale Tech­nolo­gien oft leicht und imma­teriell wirken, haben sie erhe­bliche Umweltauswirkungen.

  • Bis 2040 kön­nte die Infor­ma­tions- und Kom­mu­nika­tion­stech­nik (IKT) für mehr als 14% der glob­alen Treib­haus­gase­mis­sio­nen ver­ant­wortlich sein.
  • Auch der Wasserver­brauch, ins­beson­dere durch die Küh­lung von Rechen­zen­tren, ist enorm.

 

Trotz dieser Her­aus­forderun­gen gibt es zahlre­iche Ansätze, die dig­i­tale Welt nach­haltiger zu gestal­ten. Jede Mass­nahme hil­ft dabei, den Energie­ver­brauch zu senken und die Umwelt­be­las­tung des Inter­nets zu reduzieren. Und wbwohl es mehr Aufwand erfordert, ist es mit den richti­gen Entschei­dun­gen möglich, online umwelt­fre­undlich zu agieren. Tools wie Green­IT Analy­sis und Ecograd­er helfen dabei, den Ein­fluss von Web­sites und Web-App­lika­tio­nen zu messen. Mehr Infor­ma­tio­nen dazu find­en Sie hier.

 

Schlüsselaspekte und konkrete nachhaltige Massnahmen

 

1. Effizienter Code und schlanke Websites

Im Kon­text von Sus­tain­able Web Design spielt die Code-Opti­mierung eine zen­trale Rolle. Web­sites beste­hen aus Code, der von Servern ver­ar­beit­et und an Geräte aus­geliefert wird. Umfan­gre­ich­er oder inef­fizien­ter Code treibt den Energie­ver­brauch unnötig in die Höhe, was neg­a­tive Auswirkun­gen auf die Umwelt hat. Eine schlanke und opti­mierte Pro­gram­mierung ist ein entschei­den­der Schritt in die richtige Rich­tung, um nicht nur die Nutzer­erfahrung zu verbessern, son­dern auch den ökol­o­gis­chen Fuss­ab­druck zu ver­ringern – und so das Poten­zial für eine nach­haltigere Webpräsenz auszuschöpfen.

  • Unnöti­gen Bal­last ent­fer­nen: Nicht benötigte CSS- oder JavaScript-Dateien soll­ten eli­m­iniert wer­den. Tools wie Mini­fi­er helfen dabei, den Code zu bere­ini­gen und zu komprimieren.
  • Caching nutzen: Zwis­chen­spe­icherung reduziert die Anzahl der Server­an­fra­gen und beschle­u­nigt das Laden von Dat­en, da sie direkt aus dem Cache abgerufen wer­den können.
  • Dateien kom­prim­ieren: Tech­nolo­gien wie Gzip ver­ringern die Dateigrösse erhe­blich und verbessern so die Ladegeschwindigkeit.
  • Über­flüs­sige Fea­tures ver­mei­den: Funk­tio­nen, die die Per­for­mance belas­ten, wie aufwendi­ge Ani­ma­tio­nen oder unnötige inter­ak­tive Ele­mente, soll­ten sparsam einge­set­zt oder wegge­lassen werden.
  • Effiziente Web-Frame­works: Bei kom­plex­eren Webap­p­lika­tio­nen soll­ten effiziente Web-Frame­works ver­wen­det wer­den, welche die ser­ver­seit­ige Prozes­sor­last und RAM-Aus­las­tung minimieren.

 

2. Optimierung von Medien

Bilder und Videos machen durch­schnit­tlich 60–80 % der gesamten Daten­menge ein­er Web­site aus. Ihre Opti­mierung bietet eine ein­fache Möglichkeit, Spe­icher­platz zu sparen und den Energie­ver­brauch zu senken.

Bilder

  • Bild­kom­prim­ierung: Tools wie TinyPNG oder das WebP-For­mat kön­nen Dateigrössen erhe­blich reduzieren, ohne die Qual­ität merk­lich zu beeinträchtigen.
  • Passendes For­mat wählen:
    • PNG: Ide­al für ein­fache Grafiken mit weni­gen Farben.
    • JPG: Bess­er für detail­re­iche Fotos.
    • SVG: Opti­mal für skalier­bare Vek­tor­grafiken, ins­beson­dere bei ein­fachen Motiven.
    • WebP: Effizien­ter als PNG, bessere Far­ben als JPG — die weitaus beste Lösung.
  • Lazy Load­ing: Bilder wer­den nur dann geladen, wenn sie im sicht­baren Bere­ich erscheinen. Dies spart Ladezeit und Energie.
  • Über­flüs­sige Ani­ma­tio­nen ver­mei­den: Automa­tis­che Bilderkarus­selle wer­den oft als störend emp­fun­den und verur­sachen Daten­verkehr, der ver­mieden wer­den könnte.

 

Videos

  • Bewusster Ein­satz: Da Videos den grössten Teil des Daten­verkehrs verur­sachen, soll­ten sie nur genutzt wer­den, wenn sie einen echt­en Mehrw­ert bieten, der mit Text, Bild oder Audio nicht erre­icht wer­den kann.
  • Auto­play ver­mei­den: Automa­tisch abspie­lende Videos erhöhen den Daten­ver­brauch und stören eher, als dass sie einen Mehrw­ert bieten.
  • Daten­vol­u­men reduzieren: Auflö­sung begren­zen (z. B. 480p statt HD) und Videos mit Tools wie „Hand­brake“ kom­prim­ieren, um die CO₂-Bilanz zu verbessern.
  • Bar­ri­ere­frei­heit fördern: Alter­na­tiv­en wie Tran­skripte und Down­loads ermöglichen eine umwelt­fre­undlichere und inklu­si­vere Nutzung.
  • Videokon­feren­zen opti­mieren: Die Kam­era nur bei Bedarf aktivieren, um Daten­verkehr und Energie­ver­brauch zu minimieren.

 

3. Optimierung von Text

Gut gestal­teter Text ist nicht nur benutzer­fre­undlich, son­dern trägt auch zur Nach­haltigkeit von Web­sites bei. Weniger Dat­en bedeuten einen gerin­geren CO₂-Fuss­ab­druck, opti­mierte Schriften spie­len dabei eben­falls eine Rolle.

Weit­ere Infor­ma­tio­nen zum effizien­ten Tex­ten find­en Sie in unserem Artikel zum The­ma Micro­copy.

Lesbarkeit und Struktur

  • Les­barkeit verbessern: Klare, gut les­bare Schrif­tarten wählen, auf aus­re­ichen­den Kon­trast acht­en und die Zeilen­län­gen sowie Abstände opti­mieren. Tests wie der Lese­modus im Brows­er helfen bei der Bewertung.
  • Effiziente Texte: Schreiben Sie präg­nant und ziel­gerichtet, abges­timmt auf die Bedürfnisse der Nutzer:innen. Das spart Zeit und reduziert die Ver­weil­dauer im Netz.
  • Struk­turi­erte Inhalte: Nutzen Sie Zusam­men­fas­sun­gen, Zwis­chenüber­schriften und eine klare Gliederung, um Kern­in­for­ma­tio­nen schnell erfass­bar zu machen.

 

Schriftarten und Nachhaltigkeit

  • Sys­tem­schriften bevorzu­gen: Vorin­stal­lierte Schriften wie „San Fran­cis­co“ (Apple), „Roboto“ (Google) oder „Segoe UI“ (Microsoft) benöti­gen keine Datenüber­tra­gung und sind die nach­haltig­ste Wahl.
  • Lokale Ein­bindung: Schrift­dateien direkt vom Serv­er laden, um DSG­VO-kon­form zu sein und die Abhängigkeit von Drit­tan­bi­etern zu vermeiden.
  • Effiziente For­mate: Das For­mat woff2 ver­wen­den, das im Ver­gle­ich zu Stan­dard­for­mat­en bis zu 75 % kleinere Dateien ermöglicht.
  • Web­fonts opti­mieren: Ver­mei­den Sie unnötige Schriftschnitte und ver­wen­den Sie nur die Vari­anten, die für Ihre Web­site wirk­lich nötig sind.

 

4. Benutzerfreundlichkeit und Effizienz

Eine durch­dachte Benutzer­führung ist nicht nur angenehm für Nutzer:innen, son­dern trägt auch zur Energieef­fizienz von Web­sites bei. Je schneller Infor­ma­tio­nen gefun­den wer­den, desto weniger unnötige Klicks und Seit­e­naufrufe entste­hen – das spart Zeit, Ressourcen und Energie. So wird nicht nur die IT grün­er, son­dern auch der/die Nutzer:in glücklicher.

  • Intu­itive Nav­i­ga­tion: Auf bekan­nte Sym­bole, klare Menüstruk­turen und kon­ven­tionelle Designele­mente set­zen, um die Ori­en­tierung zu erle­ichtern und die kog­ni­tive Belas­tung zu verringern.
  • Sto­ry­telling im Design: Far­ben, For­men und eine klare inhaltliche Hier­ar­chie lenken den Fokus der Nutzer:innen, ohne sie zu über­fordern. So wird die Benutzer­führung sowohl infor­ma­tiv als auch angenehm.
  • Über­sichtliche Seit­e­nar­chitek­tur: Eine gut struk­turi­erte Seite sorgt für schnelle Ori­en­tierung und min­imiert unnötige Klicks.
  • Ver­mei­dung von Ablenkun­gen: Störende Pop-ups, blink­ende Wer­bung oder andere Ele­mente, die den Lese­fluss unter­brechen, min­imieren. Der Fokus sollte stets auf den wesentlichen Inhal­ten liegen.
  • Zielführen­des Design: Die Benutze­r­ober­fläche so gestal­ten, dass Nutzer:innen ihr Ziel schnell und ohne Umwege erre­ichen. Dies unter­stützt eine effiziente Nav­i­ga­tion und erhöht die Wahrschein­lichkeit, dass Kon­ver­sion­sziele erre­icht werden.

 

5. Bewusstes Design und Nutzerführung

Sus­tain­able Web Design bedeutet nicht nur tech­nis­che Opti­mierun­gen, son­dern auch ein Umdenken bei der Gestal­tung. Ziel ist es, Effizienz, Inklu­sion und Nach­haltigkeit zu fördern – für eine dig­i­tale Welt, die allen zugänglich ist und gle­ichzeit­ig Ressourcen schont.

Energieeffiziente Gestaltung

  • Dark Mode: Dun­klere Far­ben kön­nen bei OLED-Bild­schir­men Energie sparen. Der Dark Mode reduziert beispiel­sweise den Energie­ver­brauch, da OLED-Pix­el bei dun­kleren Far­ben weniger Strom benöti­gen. Das funk­tion­iert bei den (noch) gängi­gen LCDs („liq­uid crys­tal dis­play“) allerd­ings nicht.
  • Min­i­mal­is­tis­ches Design: Weniger kom­plexe und reduzierte Designs ver­ringern den Ressourcenver­brauch und verbessern gle­ichzeit­ig die Performance.
  • Ver­mei­dung von unnöti­gen Ani­ma­tio­nen: Ani­ma­tio­nen, die lange Ladezeit­en oder hohe Rechen­leis­tung erfordern, steigern den Energie­ver­brauch und kön­nen die Nutzer­erfahrung beeinträchtigen.

 

Barrierefreiheit und Inklusion

  • Les­barkeit und Kon­traste: Aus­re­ichen­der Far­bkon­trast und Zoom­funk­tio­nen erle­ichtern Men­schen mit Sehbeein­träch­ti­gun­gen das Navigieren.
  • Alt-Attribute und Unter­ti­tel: Bilder soll­ten stets beschreibende Alt-Texte enthal­ten, während Videos mit Unter­titeln oder Tran­skripten aus­ges­tat­tet sein soll­ten, um sie bar­ri­ere­frei zu machen.
  • Nav­i­ga­tion und Struk­tur: Eine klare Seit­e­nar­chitek­tur, seman­tis­che Über­schriften (H1, H2, H3) und Tas­taturbe­di­en­barkeit erle­ichtern allen Nutzer:innen, ein­schliesslich Per­so­n­en mit motorischen Ein­schränkun­gen, den Zugang.
  • Diver­sität und Geschlechterg­erechtigkeit: Eine inklu­sive Sprache und diverse Bild­sprache fördern ein respek­tvolles Nutzer­erleb­nis und sprechen auch LGBTQAI+ Per­so­n­en an.

 

Effizienz und Nachhaltigkeit im Betrieb

  • Opti­mierung des Daten­vol­u­mens: Web­sites soll­ten schlank gehal­ten wer­den, um auch in Regio­nen mit langsamer Inter­netverbindung zugänglich zu bleiben.
  • Offline-Zugänglichkeit: Pro­gres­sive Web Apps ermöglichen die Nutzung von Inhal­ten auch ohne aktive Inter­netverbindung – das spart Dat­en und Energie.

 

Min­i­mal­is­mus im Fokus: Web­sites kön­nen als min­i­mal exis­ten­zfähiges Pro­dukt (MVP) starten und durch iter­a­tive Opti­mierung verbessert wer­den. Dies spart Ressourcen und ermöglicht flex­i­ble Anpas­sun­gen. Ein zu ambi­tion­iert­er Per­fek­tion­is­mus kann Pro­jek­te behin­dern. Ein MVP erlaubt es, mit ein­er soli­den Basis zu starten und Erken­nt­nisse schrit­tweise zu integrieren.

 

6. Grünes Hosting

Die Wahl des richti­gen Host­ing-Anbi­eters hat einen wichti­gen Ein­fluss auf den ökol­o­gis­chen Fuss­ab­druck ein­er Web­site. Um einen grü­nen Host­ing-Anbi­eter zu find­en hil­ft der Green Web Check. Mit diesem Tool geprüft wer­den, ob die Web­site eines Anbi­eters als “grün” gelis­tet ist. Dies ist allerd­ings nur ein Indika­tor, nicht alle Anbi­eter, die grüne Energie nutzen, sind bere­its gelistet.

  • Nach­haltiges Host­ing: Wenn Sie sich für einen Host­ing-Anbi­eter entschei­den, der auf erneuer­bare Energiequellen set­zt, tra­gen Sie aktiv zur Reduzierung des Energie­ver­brauchs bei. Anbi­eter wie Cyon nutzen zum Beispiel Strom aus grü­nen Energiequellen für den Betrieb ihrer Serv­er. Mod­erne Rechen­zen­tren set­zen zudem auf effiziente Küh­lungssys­teme und energieop­ti­mierte Hard­ware, um den Stromver­brauch so ger­ing wie möglich zu halten.
  • Rechen­zen­tren und Effizienz: Der PUE-Wert (Pow­er Usage Effi­cien­cy) eines Rechen­zen­trums gibt an, wie gut es arbeit­et. Ein niedriger PUE-Wert bedeutet, dass weniger Energie ver­loren geht, was eine nach­haltigere Infra­struk­tur zur Folge hat.
  • Lokales Host­ing: Wenn Sie ein Rechen­zen­trum in der Nähe Ihrer Nutzer:innen wählen, kön­nen Sie nicht nur die Ladegeschwindigkeit verbessern, son­dern auch den Stromver­brauch durch gerin­gere Latenzzeit­en senken.

 

7. Reduktion von Datenmengen

Weniger Dat­en bedeuten weniger Energieverbrauch.

  • Con­tent Deliv­ery Net­works (CDNs): CDNs verteilen Inhalte auf Serv­er weltweit, wodurch Ladezeit­en verkürzt und der Energie­ver­brauch gesenkt wird.
  • Respon­sive Design: Wenn Web­sites so gestal­tet wer­den, dass sie sich automa­tisch an ver­schiedene Bild­schir­m­grössen anpassen, kön­nen unnötige Daten­men­gen ver­mieden wer­den, die son­st für das Skalieren oder Nach­laden von Inhal­ten benötigt würden.

 

8. Suchmaschinenoptimierung (SEO)

Sus­tain­able Web Design geht weit über ansprechende Optik und Funk­tion­al­ität hin­aus – es umfasst auch die Aspek­te der Such­maschi­nenop­ti­mierung (SEO).

  • Fokus auf Nüt­zlichkeit: Bei der Such­maschi­nenop­ti­mierung sollte der Fokus auf dem Mehrw­ert für die Nutzer:innen liegen, nicht nur auf tech­nis­chen Aspek­ten. Eine gute Platzierung in Such­maschi­nen erfordert vor allem nüt­zliche und rel­e­vante Inhalte, die den Men­schen wirk­lich weiterhelfen.
  • SEO von Anfang an: Die Opti­mierung sollte schon in der Konzept­phase begin­nen und den gesamten Erstel­lung­sprozess begleit­en. SEO ist ein kon­tinuier­lich­er Prozess, der auch nach dem Launch ein­er Web­site weit­er gepflegt wer­den sollte, um langfristig Erfolg zu sichern.
  • Key­word-Recherche: Schon in der Pla­nungsphase ist es wichtig, die Ziel­gruppe, ihre Such­in­ten­tio­nen und die ver­wen­dete Sprache zu ver­ste­hen. Key­words soll­ten natür­lich in die URL-Struk­tur, Über­schriften und Texte einge­baut wer­den – ohne dabei auf Überop­ti­mierung zu setzen.
  • Back­link-Auf­bau: Die Rel­e­vanz ein­er Web­site wächst durch qual­i­ta­tiv hochw­er­tige Back­links von ver­trauenswürdi­gen Quellen. Dies lässt sich durch aktive Bekan­nt­machung, zum Beispiel durch Gast­beiträge oder Social-Media-Erwäh­nun­gen, erreichen.
  • Alter­na­tive Such­maschi­nen: Neben Google bieten auch nach­haltige Such­maschi­nen wie Ecosia und Duck­Duck­Go eine gute Alter­na­tive, die sich durch ihren umwelt­be­wussten und daten­schutzfre­undlichen Ansatz auszeichnen.
  • Green IT: Eine schnell ladende Web­site spart nicht nur Energie und reduziert den CO2-Fuss­ab­druck, son­dern verbessert auch das Such­maschi­nen­rank­ing. Weniger Ladezeit­en und eine opti­mierte Nutzer­führung führen zu besseren Platzierun­gen, da Google Web­sites bevorzugt, die effizient und ressourcenscho­nend arbeiten.

 

Fazit: Gemeinsam für ein besseres Internet

Sus­tain­able Web Design ist mehr als nur ein Trend – es ist eine Notwendigkeit in ein­er Welt, in der dig­i­tale Dien­ste ständig wach­sen. Mit effizien­tem Code, opti­mierten Medi­en, grünem Host­ing und einem durch­dacht­en Design kön­nen wir den Energie­ver­brauch erhe­blich reduzieren. Jede noch so kleine Mass­nahme leis­tet einen wertvollen Beitrag, um den ökol­o­gis­chen Fuss­ab­druck des Inter­nets zu ver­ringern und eine nach­haltigere dig­i­tale Zukun­ft zu gestal­ten. Weit­ere Inputs zum The­ma find­en Sie hier.

Das könnte Sie auch interessieren

Kategorie
Alle entfernen
Craft CMS: Flexibilität und Benutzerfreundlichkeit für moderne Websites

Craft CMS: Flexibilität und Benutzerfreundlichkeit für moderne Websites

Mehr erfahren
Microcopy – kleine Wörter, grosser Einfluss für ein besseres Nutzererlebnis

Microcopy – kleine Wörter, grosser Einfluss für ein besseres Nutzererlebnis

Mehr erfahren

Suchbegriff eingeben