Nachhaltiges Webdesign: Ihr Weg zur Gestaltung einer grüneren Website
Webneo Blogbeitrag
Nachhaltigkeit ist auch beim Thema Webdesign ein wichtiger Stichpunkt. Der ökologische Fußabdruck soll immer weiter verringert werden. Doch kaum ein Nutzer denkt beim Surfen an die riesigen Datenmengen, die durch Onlineaktivitäten hin und her befördert werden.
Deshalb ist es wichtig, nicht nur die Betriebsabläufe zu verändern, sondern auch die Auswirkungen der eingesetzten Technologien zu überprüfen. Eine ökologische Unternehmensphilosophie ist mittlerweile jedem ein Begriff und regelmäßiges Gesprächsthema. Allerdings gibt es häufig noch Unklarheiten bei der richtigen Umsetzung.
Wir möchten Ihnen einen Überblick über nachhaltiges Webdesign verschaffen. Was Sie als Unternehmen machen können, um Ihren ökologischen Fußabdruck zu verringern, erfahren Sie in diesem Blogbeitrag.
Webneo Blogbeitrag
Inhaltsübersicht
- Eine „grüne“ Website – wieso?
- Vorteile des ökologischen Webdesigns
- Methoden für ein nachhaltiges Webdesign
-
- 1. Informationsflut reduzieren
- 2. Reuse – alles mehrfach verwenden
- 3. Recycle – vorhandene Materialien nutzen
-
EINE GRÜNE WEBSEITE – WIESO?
„Wäre das Internet ein Land, wäre es der weltweit sechstgrößte Umweltverschmutzer.“
(https://main-spessart.bund-naturschutz.de/klimatipps/stromverbrauch-durchs-internet)
„Das Internet, Rechenzentren und private Computer sind gemeinsam für mehr CO₂-Emissionen als der globale Flugverkehr verantwortlich.“
Solche Aussagen geben Anlass zur Sorge darüber, wie stark sich die digitale Industrie auf unseren Planeten auswirkt.
Die Kommunikations- und Informationstechnologie hat im Jahr 2017 allein in Deutschland ungefähr 47 Milliarden Kilowattstunden Strom verbraucht, Tendenz ganz klar steigend. Um unsere Umweltbelastung zu messen, geben wir gefahrene Kilometer an, oder wie gesund wir uns ernähren. Doch unserer Internetpräsenz, wie lang wir online arbeiten, surfen oder streamen, schenken wir dabei meist weniger Beachtung.
Aus diesem Grund müssen wir entsprechende Veränderungen vornehmen, um den gesellschaftlichen Wandel hin zu mehr Nachhaltigkeit zu bewegen – dies spiegelt sich auch in den Online Marketing Trends wider.
VORTEILE EINES ÖKOLOGISCHEN WEBDESIGNS
Ein großer Vorteil einer grüneren Website ist weitestgehend selbsterklärend – wir helfen damit unserem Planeten. Es gibt aber noch weitere Gesichtspunkte, welche einen Onlineshop attraktiver machen.
Durch den geringeren Ressourcenverbrauch und die reduzierten Emissionen verringert sich auch die Energie, die für Ihren Betrieb benötigt wird. Das kann auf lange Sicht etwa zu erheblichen Einsparungen bei Entwicklungskosten und Hosting führen.
Sie können durch umweltbewusstes Webdesign zudem dazu beitragen, die Benutzeroberfläche schneller und leichter zugänglich zu machen, was sich wiederum positiv auf das SEO-Ranking auswirkt. Diese verbessert damit das Nutzererlebnis und sorgt dafür, dass gern mit Ihrer Seite interagiert und auf die Website zurückgekehrt wird.
Ein weiterer klarer Vorteil des nachhaltigen Webdesigns für Ihr Unternehmen besteht darin, dass mehr als ein Drittel der Verbraucher weltweit bereit sind, mehr für nachhaltige Produkte zu zahlen. Sie können sich also auf diese Weise von der Masse abheben und langfristig geschäftlich profitieren.
Trotzdem soll Umweltschutz nicht aus reinem Profitinteresse stattfinden, auch wenn er sich für Sie in diesem Falle positiv auswirken kann.
METHODEN FÜR EIN NACHHALTIGES WEBDESIGN
Folgende Punkte kennzeichnen die wichtigsten Faktoren einer viel besuchten und informativen Website für die Nutzenden:
- Seitengeschwindigkeit – wie schnell lädt die Seite?
- Zielfindung – wie einfach findet man, was man sucht?
- Responsive – wie gut funktioniert die Seite auf dem Gerät?
- Usability – wie findet man sich auf der Seite zurecht?
- Aussehen – ist die Seite optisch ansprechend?
Durch diese Auflistung wird klar, dass vor allem Geschwindigkeit und Einfachheit eine große Rolle für die Benutzeroberfläche spielen, welche durch SEO Onpage Aktionen leicht zu optimieren sind.
Folgende Maßnahmen helfen bei der Umsetzung des Prinzips und bieten ein erhebliches Einsparungspotenzial.
1. REDUCE – INFORMATIONSFLUT REDUZIEREN
Ansprechende Websites sollen vor allem eines bieten: Information. Das heißt, sie werden vorrangig für Nutzer und nicht für das Unternehmen entwickelt. Wichtige Gesichtspunkte sollten also leicht auffindbar sein und auf das wesentliche reduziert werden.
Je besser die Navigation durch Suchmaschinenoptimierung gestaltet wird, desto kürzer ist die Zeit, die eine Person benötigt, um das zu finden, was sie sucht. Sie bieten Ihren Kunden hiermit volle Transparenz und können dazu noch Einsparungen bei Foto- oder Videomaterial erzielen. Hochwertige Fotos und Videos sind zwar beeindruckend, aber diese Medien wirken sich auch auf den ökologischen Fußabdruck der Website aus. Voraussichtlich kann zudem mit komprimiertem Bild- und Videomaterial ein bleibender Eindruck erzielt werden. Große Bilder verlangsamen Ihre Website, was zu einem negativeren Benutzererlebnis führt. Die Dateigröße kann durch ein Plug-in oder ein Skript verändert werden. Es geht vor allem darum, ein Gleichgewicht zwischen visuell ansprechenden, hochwertigen Inhalten und ökologischer Nachhaltigkeit zu finden.
Ein anschauliches Beispiel dafür ist das Lazy Loading von Bildern. Dabei werden nur die Dateien geladen, die im Moment angezeigt werden. Das spart eine Menge an Daten. Ähnliches wird auch durch die Nutzung verschiedener Endgeräte erzielt. Durch eine ansprechendere mobile Ansicht, lassen sich auch hier Emissionen einsparen und trotzdem wird dem Kunden ein benutzerfreundliches Website-Erlebnis angeboten.
2. REUSE – ALLES MEHRFACH VERWENDEN
Durch wiederholende Muster in der Benennung lässt sich bei der Frontend-Entwicklung viel Zeit und Code sparen – was zudem den Technischen Support für Ihre Website erleichtert. Eine Methode, um Code entsprechend zu strukturieren, nennt sich BEM – Block, Element, Modifier.
Blöcke sind alleinstehend, wie zum Beispiel Header, Container oder Menüs und können auch innerhalb anderer Blöcke existieren. Elemente befinden sich immer innerhalb eines Blocks, wie zum Beispiel Header-Titel, Textfelder oder Menüpunkte und hängen semantisch mit den Blöcken zusammen. Modifier ermöglichen verschiedene Optionen für Blöcke oder Elemente, wie zum Beispiel Größe, Sichtbarkeit oder feste Position.
Durch Namenskonventionen werden die CSS-Hierarchien flach gehalten und komplizierte Spezifizierungen vermieden. Wer daraufhin seinen Code mit entsprechenden Tools wie zum Beispiel G-Zip noch komprimiert, spart doppelt: Die Wiederholungen durch die Namenskonventionen in BEM können durch die Komprimierung zusammengefasst werden, wodurch sich die Datenmenge noch einmal reduziert und somit schneller geladen werden kann.
Das Design der Website kann ebenso viel zum ökologischen Fußabdruck beitragen. Durch Tools wie den Dark Mode oder den effizienten Einsatz von Schriftarten und Texten können einige Ressourcen eingespart werden. Das Hervorheben wichtiger Features, wie beispielsweise Ihrem Logo als Anker für die Startseite, hat ebenfalls diesen Effekt, da sich gezielter auf der Website bewegt werden kann. Diese Art von Website-Gestaltung hilft, Datenmüll zu reduzieren.
3. RECYCLE – VORHANDENE MATERIALIEN NUTZEN
Die oben beschriebenen Modifier aus der BEM-Methode können angepasst werden, sodass sie durch verschiedene Optionen für unterschiedliche Inhalte brauchbar sind. Das bedeutet, dass verschiedene Website-Module und -elemente mehrfach eingesetzt werden können. So gibt es dann nur ein Textmodul, einen Slider, einen Teaser und ein Bildmodul. Im Textmodul etwa können verschiedene Breiten oder Hintergrundfarben ausgewählt werden und mit nur einem Element ergeben sich verschiedene Designoptionen.
Durch diese Wiederverwendung wird die Website nicht nur schlanker, sondern sie verbessert die User-Experience. Sowohl im Frontend, als auch im Backend können Kunden das Gesehene stets anwenden und müssen sich nicht neu orientieren. Bereits im Web existierendes Material kann zudem auch für eine Website verwendet werden. Wer gängige Webfonts nutzt, die bereits auf vielen Geräten installiert sind, muss beim Aufrufen der Website keine neue Schriftart hinzufügen. Dies gilt nicht nur für die Website, sondern das gesamte Corporate Design.
Doch auch mit der richtigen Nutzung der Hardware können Sie etwas für die Umwelt tun. Einem Artikel der BBC zufolge, werden schätzungsweise 1,6 Milliarden Tonnen Treibhausgasemissionen durch den Betrieb und die Herstellung digitaler Technologien verursacht. Kleine Änderungen können dabei schon sehr viel eindämmen. Geräte wie Computer, Laptops oder Mobiltelefone sparen mit einer längeren Nutzung Kohlenstoffdioxidemissionen ein.
Auf den Stromverbrauch all dieser Bestandteile nehmen wir positiven Einfluss, indem die transferierte Datenmenge reduziert wird. In Deutschland existiert bereits eine große Auswahl an Hosting-Providern, die ihre Rechenzentren mit grünem Strom betreiben. Wenn die Daten unserer Websites dort gespeichert werden, sinkt auch der CO₂-Ausstoß pro Seitenaufruf.
Eine interessante Möglichkeit stellt zudem die Nutzung von Content Delivery Networks (CDNs), beispielsweise wie bei Google Amp, dar. Hierbei wird die komplette Website (oder nur Teile davon) automatisiert in Rechenzentren überall auf der Welt gespeichert. Wird die Website besucht, wird sie vom naheliegendsten Rechenzentrum ausgeliefert.
Eine schlanke und somit umweltfreundlichere Website ist eine Herausforderung und eine Chance zugleich, sich selbst und das Web in seiner Arbeitsweise zu optimieren. Dieser Weg hat positive Auswirkungen auf die Umwelt, Gesellschaft und Wirtschaft.
Wir hoffen, dass wir Ihnen mit unserem Blogbeitrag wichtige und interessante Informationen zum Thema „Nachhaltiges Webdesign – Ihr Weg zu einer grüneren Website“ übermitteln konnten. Wenn Sie weitere Informationen zu diesem Thema benötigen, setzen Sie sich gern mit uns in Verbindung.
Wir freuen uns auf Sie!
Wobei dürfen unsere Experten Sie unterstützen?