Nachhaltiges Webdesign

Nachhaltigkeit im Webdesign,

das sollten sie über den Trend wissen.

Was genau ist nachhaltiges Webdesign? Wie können Sie herausfinden, welche Umweltauswirkungen Ihre Website hat? Was können Sie tun, um Ihre Website nachhaltiger zu gestalten, und wie werden die Verbesserungen Ihren Kunden zugute kommen? In diesem Artikel finden Sie Antworten auf all diese Fragen und lernen einige nützliche Tools für nachhaltiges Webdesign kennen.

Einige Fakten über das energieverschlingende Internet

Nach Angaben von Websitecarbon verbraucht das Internet 416,2 Terawattstunden (TWh) pro Jahr. Das ist ungefähr so viel, wie Deutschland allein verbraucht. Wäre das Internet ein Land, hätte es bereits heute den sechstgrößten Stromverbrauch der Welt.

Aber wie ist ein so hoher Energieverbrauch überhaupt möglich? War der Sinn der Digitalisierung nicht, die Umwelt zu schützen? Die Realität ist, dass digital nicht immer gleichbedeutend mit grün ist. Alles braucht Energie, um zu funktionieren, von Serverfarmen über Datenzentren bis hin zu den Geräten der Nutzer.

Eine durchschnittliche Website erzeugt schätzungsweise 1,76 Gramm CO2. Bei 10.000 Besuchern pro Monat sind das 211 kg CO2 pro Jahr – für eine einzige Website!

Haben Sie schon einmal darüber nachgedacht, wie viel Energie für Ihre Website benötigt wird? Es ist sicherlich viel mehr, als Sie erwarten würden! Jede Anfrage, die Ihre Website sendet, wird empfangen, verarbeitet, zurückgeschickt und möglicherweise irgendwo gespeichert. Das sind eine Menge Prozesse, die alle Energie benötigen.

Unsere Websites müssen umweltfreundlicher werden – aber wie?

1. Hosting

Viele Hosting-Anbieter haben die Auswirkungen des Internets auf die Umwelt verstanden und setzen nun auf erneuerbare Energien. Denn eines ist unbestritten: Webhosting verschlingt Energie und verursacht erhebliche CO2-Emissionen. 

2. Gestaltung

Mit dem richtigen Design lässt sich unnötiger Energieverbrauch vermeiden. Zum Beispiel, wenn Ihre Website unnötige Inhalte gar nicht erst lädt. Wie können Sie also Design und Nachhaltigkeit kombinieren, um Ressourcen zu sparen?

Mobil zuerst

Mit einem „Mobile-First“-Ansatz optimieren Sie Ihre Inhalte von Anfang an für Smartphones. Optimierte Websites laden zum Beispiel keine übergroßen Medien auf mobilen Geräten. Sie sind so programmiert, dass Desktop-Versionen nicht überschrieben werden müssen und stattdessen direkt für kleinere Nutzergeräte optimiert sind.

Benutzererfahrung

Über die Vorteile einer gut durchdachten Benutzerfreundlichkeit habe ich Ihnen schon einmal berichtet. Eine gut funktionierende Benutzererfahrung hilft Ihnen und Ihren Kunden, Ihre Website nachhaltiger zu gestalten. Sie minimieren unerwünschte Umwege Ihrer Nutzer. Denn im Idealfall werden nur die Seiten geladen, die der Nutzer tatsächlich besuchen möchte. Wenn Sie unerwünschte Klicks reduzieren, senden Sie weniger Datenanfragen und verbrauchen daher weniger Energie.

Anzahl der Seiten

Um die Nachhaltigkeit zu erhöhen, können Sie bei der Planung Ihrer Website auch in diesem Bereich ansetzen. Generell gilt: Je weniger Seiten geladen werden müssen, desto weniger Datenanfragen werden gesendet. Das macht Ihre Website nicht nur übersichtlicher, sondern es ist auch aus ökologischer Sicht sinnvoll, den Inhalt zusammenzufassen und die Anzahl der Seiten zu reduzieren.

Auch Medien wie Bilder, Animationen und Videos können wir bewusster einsetzen und gezielter nutzen. Bringen all die Bilder, Videos, Icons und Animationen, die Sie für Ihre Website geplant haben, wirklich einen Mehrwert? Oder könnten Sie auf einige von ihnen verzichten?

3. Entwicklung

Ich habe bereits erwähnt, wie Sie den Inhalt, den Sie anbieten, überdenken können. Jetzt geht es darum, die Bilder optimal einzubinden.

Tinypng eignet sich hervorragend, um Bilder zu komprimieren – und das in der Regel ohne nennenswerte Qualitätsverluste. Das gleiche Ergebnis erzielen Sie mit Photoshop und der Einstellung „Für Web exportieren“. Wenn Sie Ihre Bilder bereits in ein CMS, wie z.B. WordPress, integriert haben, können Sie die Auflösung auch nachträglich noch mit einem Plugin, wie z.B. Smush, optimieren.

Wenn Sie sehr viele Bilder oder Icons haben, können Sie sich mit CSS-Sprites beschäftigen. Sie funktionieren ähnlich wie Sprites in der Computerspielentwicklung. Hier werden die Bilder einmal pro Sprite Sheet eingebunden. Anschließend bestimmt CSS, unter welchen Koordinaten sich welches Bild befindet. Mehr zu diesem Thema finden Sie hier.

Sprite Sheets sind mehrere Bilder/Icons, die in einer einzigen Datei zusammengefasst werden. Designer gruppieren ihre Bilder oft nach Themen. Anhand der entsprechenden x- und y-Koordinaten werden die Blätter entsprechend aufgeteilt und eingebunden. Auf diese Weise wird ein einziges Dokument geladen, das verschiedene visuelle Komponenten anzeigt.

Lazy Loading ist eine weitere Möglichkeit, Bilder optimal zu laden. Mit dieser Funktion werden Bilder nur dann geladen, wenn der Benutzer sie benötigt. Es gibt unzählige WordPress-Plugins für Lazy Loading, sowohl in kostenlosen als auch in kostenpflichtigen Versionen.

Lass

uns

dir

helfen!