How-To

Grüner gestalten: So geht nachhaltiges Webdesign

Seite 2 / 2

Auch das Müllvermeidungsprinzip „Reduce, Reuse, Recycle“, das viele aus der analogen Welt kennen, kann Webdesignern helfen. Denn bei der Entwicklung schlanker Websites geht es ebenfalls um die Vermeidung von Müll – genauer, um die Vermeidung von Datenmüll. Übertragen wir dieses Prinzip auf Websites, ­lassen sich daraus folgende Richtlinien ableiten:

  • Die Informationen, die auf der Website präsentiert werden, reduzieren.
  • Code mehrfach verwenden.
  • Mit vorhandenen Modulen und Materialien arbeiten.

Folgende Maßnahmen helfen bei der Umsetzung des Prinzips und bieten erhebliches Einsparungspotenzial.

Reduce – Informationsflut reduzieren

76 Prozent der Website-Nutzer sehen die Erreichbarkeit der gesuchten Information als wichtigstes Designkriterium. Diese Zahl spricht für sich: Websites müssen für Nutzer und nicht für Unternehmen entwickelt werden. Nach einer Analyse der Seite sollten die vorhandenen Informationen auf das Wesentliche reduziert werden. Weniger Inhalte bedeuten weniger Code und schnellere Ladezeit. Gleichzeitig steigen Performance und Usability.

Tools wie Google Analytics helfen dabei, die häufigsten Klickpfade und die häufig besuchten Seiten der Nutzer heraus­zufinden. Wenn zum Beispiel die Telefonnummer von 50 Prozent der Nutzer gesucht wird, sollte diese Information auf der Startseite zur Verfügung stehen, um weitere Klicks (und Bits) zu vermeiden und den Nutzer schnell zum Ziel zu führen.

Lädt schnell, ist barrierefrei und rankt gut bei Google: Jack Lennox beweist mit sustywp.com, dass eine Website auch ohne viel Schnickschnack gefallen kann. (Screenshot: Sustywp)

Lädt schnell, ist barrierefrei und rankt gut bei Google: Jack Lennox beweist mit sustywp.com, dass eine Website auch ohne viel Schnickschnack gefallen kann. (Screenshot: Sustywp)

Ein weiterer Punkt, der Websites häufig überfrachtet, ist das Bildmaterial: Es gilt, zu überlegen, wie viele Bilder es wirklich sein müssen. Smartphone-Nutzer mit Edge-Empfang in länd­lichen Regionen werden etwa optimiertes Bildmaterial zu ­schätzen wissen. Hier werden Bilder in Größe, also Pixel-Maßen, verkleinert und mit vorhandenen Tools wie dem kostenfreien Imageoptim für das Web komprimiert. Allein diese Maßnahme spart schon mehrere Megabyte und optimiert zusätzlich die Bildausgabe auf der Website. Durch die Programmierung einer ­intelligenten Bildausgabe, dem sogenannten Lazyload, wird ein Bild erst dann geladen, wenn der Nutzer in den Bereich scrollt. Außerdem kann durch ein Source-Set mit verschiedenen ­Bildgrößen ebenfalls die Datenmenge reduziert werden. So wird jeweils die ­passende Bildgröße für das jeweilige Endgerät ausgegeben. Bei einem ­Smartphone wird also ein deutlich kleineres Bild geladen als bei einem 17-Zoll-Display.

Reuse – alles mehrfach verwenden

Durch wiederholende Muster in der Benennung lässt sich bei der Frontend-Entwicklung viel Zeit und Code sparen. Eine ­Methode, um Code entsprechend zu strukturieren, nennt sich BEM – Block, Element, Modifier. Dabei wird die Website in Blöcke und darin ­existierende Elemente aufgeteilt, die durch Modifier verändert werden können. Blöcke sind alleinstehend, wie zum ­Beispiel ­Header, Container oder Menüs, und können auch innerhalb ­anderer ­Blöcke existieren. Elemente existieren 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.

Recycle – vorhandene Materialien nutzen

Wie viele verschiedene Buttons, Überschriften und ­Container braucht es wirklich? Die Lösung sind Websitemodule und ­-elemente, die mehrfach eingesetzt werden können. So gibt es dann zum Beispiel nur ein Textmodul, einen Slider, einen Teaser und ein Bildmodul. Durch die oben beschriebenen Modifier aus der BEM-Methode können diese Module dann angepasst werden, sodass sie durch verschiedene Optionen für verschiedenste Inhalte brauchbar sind. So können im Textmodul zum Beispiel verschiedene Breiten oder Hintergrundfarben ausgewählt werden, und mit nur einem Element ergeben sich verschiedene Design­optionen.

Eine Reduktion der Module macht eine Website nicht nur schlanker, sondern verbessert auch die User-Experience: Nutzer müssen sich nicht stetig neu orientieren und können ­Gelerntes anwenden. Sowohl im Frontend als auch im Backend. Jedes Modul oder Element, das nur ein Mal auf der Website eingesetzt wird, sollte hinterfragt werden. Muss dieses Modul wirklich sein? Kann eine andere Lösung gefunden werden? Steht das „Gewicht“ des Moduls im Verhältnis zum Nutzen für den Nutzer?

Zudem kann für eine Website Material, das bereits im Web vorhanden ist, verwendet werden. Wer etwa gängige Webfonts nutzt, die bereits auf vielen Geräten installiert sind, muss beim Aufrufen der Website keine neue Schriftart laden ­lassen.

Fazit: Back to the Roots?

Das Internet verbraucht Strom – die wahrscheinlich wichtigste Erkenntnis dieses Artikels. Denn nur wer sich der Problematik bewusst ist, kann an der Lösung arbeiten. Die besteht nicht nur aus CO₂-Kompensation durch das Pflanzen von Bäumen, sondern auch in der Reduzierung des täglichen Datentransfers. Dieser kann einerseits durch Websites mit geringem Daten­volumen reduziert werden, andererseits durch eine gute Usability die ­Nutzer schnell zum Ziel führen und das Laden überflüssiger Seiten ­reduzieren. Beides kann durch das Entwickeln und Entwerfen schlanker Websites nach dem Prinzip „Reduce, Reuse, Recycle“ umgesetzt werden.

Wer noch immer denkt, dass eine schlanke Website die Entwicklungsmöglichkeiten einschränkt, sollte es mit einem Perspektiv­wechsel versuchen: Es ist eine Herausforderung und eine Chance zugleich, sich selbst und das Web in seiner Arbeitsweise zu optimieren.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

6 Kommentare
Carl Bednirz

Wow, toller Beitrag!! Endlich wird das Thema mal aufgegriffen, da vielen völlig unbekannt ist welchen CO2 Footprint das Internet & Co. hinterlässt.

Ich von Surfgreen.dev bin als Fullstack Developer auf die Entwicklung nachhaltiger und grüner Webapps und Websites spezialisiert.

Mit surfgreen.dev können Websites bezüglich ihrer Nachhaltigkeit getestet werden, zwar erst in einer frühen Alpha version, aber es klappt.

Danke nochmals für den Beitrag und das Aufgreifen dieses Themas

Antworten
Johan
Johan

Ich finde den Beitrag klasse! Es ist wichtig für Klimaschutz einzustehen und so kann sich jeder darüber bewusst werden wofür er CO2 freisetzt. Aufklärung statt fordern finde ich besser.
Wenn jeder Teilnehmer der Fridays for Future Bewegung auf den Bildtransfer per Whatsapp, Facebook und auch auf die Youtube-Videos verzichtet wie viele Urlaube kann ich dann wohl mit dem Flugzeug machen?
Entsetzt bin ich allerdings auch über Carl Bednirz Kommentar, der eine Webseite betreibt die beim Aufruf 4,29 g CO2 ausstößt und hier von Nachhaltigkeit und grünen Webapps spricht.

Antworten
Wolfgang Einhorn
Wolfgang Einhorn

Die ganze Anstrengung produziert doch noch mehr CO2-Ausstoß. Natürlich muss man sich Gedanken um das Klima machen, aber nicht in solchen Dimensionen. Was zur Zeit abgeht ist der Wahnsinn. Man könnte sagen, die Menschheit, oder noch genauer gesagt, die Deutschen, sind in Panik. In so einem Zustand sollte man keine Entscheidungen treffen. Wie z.B. Ausstieg aus der Atomenergie. Statt das ganze Geld in die Energie-Wende zu stecken, hätten wir lieber in die Forschung der Sicherheit der Atomkraftwerke und die Wiederverwertung der Brennstäbe investiert, vermutlich stünden wir heute viel besser da.
Selbst, wenn wir auf alles verzichten würden, und wie im Mittelalter weiter leben, werden wir den Klimawandel, vermutlich, um 0,001 % verlangsamen, am Ende kommt es trotzdem wie es kommen muss. Der Wandel der Klima besteht schon seit der Entstehung der Erde.
Ein schönes sonniges WE wünsche ich noch :)

Antworten
cenco

Super Beitrag vielen Dank!

Antworten
MFDEZ
MFDEZ

Danke für diesen Beitrag! Die Seite „websitecarbon.com“ wird hier empfohlen, auf dieser Seite wird unten „trees for life“ als Anlaufstelle zum Bäumchenpflanzen genannt. Ist jemandem mal aufgefallen, wie schlecht die trees for life Seite bei websitecarbon.com abschneidet? Das ist peinlich finde ich. Ich habe mal eine Mail an trees for life geschickt mit diesem Hinweis. Bin gespannt ob ich eine Antwort bekomme!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung