Nachhaltiges Webdesign

Nachhaltiges Webdesign


Das Internet verbraucht sehr viel Strom. Stromerzeugung bedeutet für den größten Teil der Welt die Verbrennung fossiler Brennstoffe, was wiederum bedeutet, dass der CO2-Fußabdruck des Internets den globalen Flugverkehr möglicherweise bereits in den Schatten gestellt hat .
Der Mozilla Internet Health Report 2018 besagt, dass „Nachhaltigkeit eine größere Priorität haben sollte
Was bedeutet das für ein modernes Webdesign?
Eine Unternehmenswebsite wird weiterhin als digitale Visitekarte oder Aushängeschild im Internet gesehen. Aus Sicht der Verwender sind einleitend trotz alledem folgende Kriterien für die Verwendung einer Website entscheidend:
Seitengeschwindigkeit – wie schnell lädt die Seite? Zielfindung – wie einfach finde ich das, was ich suche? Responsive – wie gut funktioniert die Seite auf meinem Gerät? Usability – wie schnell finde ich mich auf der Seite zurecht? Aussehen – spricht mich die Seite optisch an?
Diese Hierarchie zeigt, dass beim Webdesign in erster Regel Geschwindigkeit und Einfachheit eine bedeutende Rolle spielen. Eine visuell äußerst ansprechende Seite ist sinnlos, wenn der Verwender sie auf Grund ¬langer Ladezeiten unmittelbar erneut verlässt oder die mobile Darstellung ¬katastrophal ist. Wissen sollen unmittelbar laden und direkt gefunden werden. Aus diesem Grund ist ein schlankes ¬Webdesign nicht ausschließlich umweltfreundlich, anstelle kommt gleichwohl der User-¬Experience und somit der Anzahl der gewonnen Leads dagegen.
Denn binnen der Realisierung schlanker Websites geht es ebenso um die Vermeidung von Müll – eher, um die Vermeidung von Datenmüll. Übertragen wir dieses Prinzip auf Websites, ¬lassen sich hieraus folgende Richtlinien ableiten:
Die Informationen, die auf der Website präsentiert werden, reduzieren. Code mehrfach verwenden. Mit vorhandenen Modulen und Materialien arbeiten.
76 % der Website-Nutzer sehen die Erreichbarkeit der gesuchten Information als wichtigstes Designkriterium. Diese Zahl kommuniziert alleine: Websites müssen für Benutzer und nicht für Firmen konzipiert werden. Nach einer Begutachtung der Seite sollten die vorhandenen Infos auf das Bestimmende mindert werden. Weniger Inhalte bedeuten schnellere Zeit zum Laden. Zugleich steigen Performance und Benutzerfreundlichkeit.
Ein weiterer Punkt, der Websites viele Male überfrachtet, ist das Bildmaterial: Es gilt, zu überlegen, wie viele Fotos es tatsächlich sein müssen. Smartphone-Nutzer mit Edge-Empfang in länd¬lichen Areale werden beispielsweise optimiertes Bildmaterial schätzen. Hier werden Fotos in Größe, also Pixel-Maßen, verkleinert und mit vorhandenen Tools wie dem kostenlosen Imageoptim für das World Wide Web komprimiert. Allein ebendiese Maßnahme spart bereits eine Reihe von Megabyte und novelliert des weiteren die Bildausgabe auf der Website. Mittels die Programmierung einer ¬intelligenten Bildausgabe, dem sogenannten Lazyload, wird ein Bild erst danach aufgeladen, wenn der Verwender in das Feld scrollt. Zusätzlich kann mittels ein Source-Set mit verschiedenartigen ¬Bildgrößen genauso die Datenmenge schmälert werden. So wird jeweils die ¬passende Bildgröße für das jeweilige Device ausgegeben. Bei einem -Smartphone wird also ein klar kleineres Bild aufgeladen als während einem 17-Zoll-Display.
Mittels wiederholende Muster in der Benennung lässt sich binnen der Frontend-Entwicklung ausgeprägt Zeit und Code einsparen. Eine ¬Methode, um Code analog zu strukturieren, heißt BEM – Block, Detail, Modifier. Bei alledem wird die Website in Blöcke und darin ¬existierende Bestandteile aufgeteilt, die anhand Modifier modifiziert werden können. Blöcke sind alleinstehend, wie zum ¬Beispiel ¬Header, Container oder Menüs, und können gleichermaßen innerhalb ¬anderer ¬Blöcke gibt es. Teile gibt es jederzeit innerhalb eines Blocks, wie etwa Header-Titel, Textfelder oder Menüpunkte, und hängen semantisch mit den Blöcken gemeinsam. Modifier realisieren diverse Gelegenheiten für Blöcke oder ¬Elemente, wie exemplarisch Größe, Sichtbarkeit oder feste Position. Mit Hilfe Namenskonventionen werden die CSS-Hierarchien flach gehalten und komplizierte Spezifizierungen vermieden.
Wie viele Buttons, Überschriften und ¬Container benötigt es tatsächlich? Die Lösung sind Websitemodule und ¬-elemente, die häufiger eingesetzt werden können. So existieren darauf folgend bspw. lediglich ein Textmodul, einen Slider, einen Teaser und ein Bildmodul. Mittels die oben beschriebenen Modifier aus der BEM-Methode können jene Bestandteile darauf folgend abgestimmt werden, sodass sie mittels verschiedenartige Möglichkeiten für verschiedenste Inhalte brauchbar sind. So können im Textmodul beispielsweise andersartige Breiten oder Hintergrundfarben ausgewählt werden, und mit lediglich einem Detail ergeben sich divergente Design¬optionen.
Eine Reduktion der Elemente macht eine Website nicht bloß schlanker, an Stelle erneuert ebenfalls die User-Experience: Anwender müssen sich nicht fortwährend neu orientieren und können ¬Gelerntes einsetzen. Sowohl im Frontend als ebenfalls im Backend. Jedes Modul oder Detail, das ausschließlich ein Mal auf der Website eingesetzt wird, sollte hinterfragt werden. Muss dieses Modul in Wirklichkeit sein? Kann eine zusätzliche Lösung gefunden werden? Steht das „Gewicht“ des Moduls im Verhältnis zum Vorteil für den Anwender?
Zudem kann für eine Website Material, das allemal im Internet vorhanden ist, genutzt werden. Wer beispielsweise gängige Webfonts benutzt, die auf diese Weise oder in dieser Art auf vielen Gerätschaften eingerichtet sind, muss beim Aufrufen der Website keine innovative Schriftart laden ¬lassen.

Kommentare sind geschlossen.