Wie "perfekt" muss nachhaltiges Webdesign sein?
Diese Frage stelle ich mir jedes Mal, wenn ich einzelne Inhaltselemente oder Funktionen einer Website klimafreundlich umsetzen möchte.
In Sachen Nachhaltigkeit, insbesondere Ressourcenverbrauch, zählt jedes Detail einer Website. Das inhaltliche Konzept, die grafische Umsetzung und die technische Realisierbarkeit sind in gleichem Maße zu berücksichtigen.
Bei dieser Arbeit orientiere ich mich an Bewertungstools für die Nachhaltigkeit (siehe: Nützliche Links zum Thema nachhaltiges Webdesign) und deren Anforderungen. Ein Nachhaltigkeitsrating von A+ kann nur erreicht werden, wenn alle Komponenten einer Website exakt austariert sind.
- Weniger Bilder, weniger Code, weniger Requests
- Zwei Umsetzungsbeispiele für ein Akkordeon
- Lässt sich die Forderung nach vollständiger Konsistenz im Hinblick auf Nachhaltigkeit rechtfertigen?
- Die Auffindbarkeit von verborgenen Inhalten
- Fazit: Vor- und Nachteile der drei Designansätze
- Nützliche Links zum Thema barrierefreies und nachhaltiges Webdesign
- Wie es weitergehen kann
hej, ich bin Ralf, freiberuflicher Webdesigner und Konzepter. Ich kann dich bei vielen Themen rund um deine Website unterstützen. Digitale Barrierefreiheit und nachhaltiges Webdesign liegen mir besonders am Herzen. Hypes, die gerade im Internet kursieren, nehme ich kritisch unter die Lupe. Mein Motto lautet: "Ich muss nicht jede Welle reiten".
Ich freue mich auf unsere Zusammenarbeit.
1. Weniger Bilder, weniger Code, weniger Requests
Zunächst muss der Einsatz von Bildern minimiert werden. Diese haben den größten Anteil am Seitengewicht. Gleichzeitig soll die Website optisch ansprechend bleiben.
Bei den eingesetzten Bildern spielt die Wahl des passenden Dateiformats eine entscheidende Rolle. Zudem ist die optimale Balance zwischen Bildqualität und Datenreduktion wichtig.
Das als sparsam geltende SVG-Format hat ebenfalls seine Tücken. Detailreiche Grafiken mit vielen Pfaden führen schnell zu einer beträchtlichen Dateigröße. Eine Reduktion der Knotenanzahl ist zwingend notwendig. Der Code von exportierten SVG-Grafiken sollte im Nachgang nochmals optimiert werden. Dies funktioniert am besten mit spezialisierten SVG-Tools (siehe: Nützliche Links zum Thema nachhaltiges Webdesign).
Des Weiteren ist es wichtig, redundanten CSS- und nicht genutzten JavaScript-Code zu entfernen. Damit scheidet die Verwendung von JavaScript-Bibliotheken von vornherein aus.
Schließlich sind kurze Ladezeiten, eine geringe Anzahl an Requests und ein stabiler Seitenaufbau notwendig. Der Cumulative Layout Shift (CLS) sollte bei 0 liegen.
Nun aber zurück zur eingangs gestellten Frage:
Wie "perfekt" muss nachhaltiges Webdesign sein?
Was ist damit gemeint? Ich möchte diese Frage anhand des Inhaltselements "Akkordeon" erläutern.
2. Zwei Umsetzungsbeispiele für ein Akkordeon
Im Folgenden stelle ich zwei Möglichkeiten vor, ein Akkordeon technisch zu realisieren.
1. Mit "nativen" HTML-Elementen für ein "Offenlegungswidget" (<details>, <summary>)
HTML-Code:
<details>
<summary>Überschrift Akkordeon-Element</summary>
<p>Lorem ipsum dolor sit amet</p>
</details>
2. Mit generischen Block-Elementen (<div>), ARIA Attributen und JavaScript
HTML-Code (Code-Beispiel von Scott O'Hara: a11y_accordions, siehe: Nützliche Links zum Thema nachhaltiges Webdesign):
<div class="accordion" data-aria-accordion>
<h2 data-aria-accordion-heading>Heading of my panel</h2>
<div data-aria-accordion-panel>
<p>Content goes here</p>
</div>
</div>
Beim HTML-Code, dem "Gerüst", gibt es keinen nennenswerten Codezuwachs.
Anders verhält es sich bei der Funktion des Akkordeons. - Das Styling mittels CSS lasse ich unberücksichtigt. Mir geht es hier rein um die Funktionalität.
Bei den "nativen" HTML-Elementen wird das Öffnen und Schließen der Akkordeon-Abschnitte vom Browser übernommen. Bei Umsetzungsvariante 2 muss diese Funktion mittels JavaScript bereitgestellt werden. Dies bringt einen Codezuwachs von 3,52 KB (minifiziert) mit sich.
Laut Scott O'Hara weist das auf <details> und <summary> basierende "Offenlegungswidget" zahlreiche Inkonsistenzen auf. Abhängig vom verwendeten Browser, Screenreader und Betriebssystem kommt es zu abweichendem Verhalten.
Die Inkonsistenzen im Verhalten beschränken sich im Wesentlichen auf Safari + VoiceOver unter MacOS und iOS. Des Weiteren gibt es einige Unstimmigkeiten bei VoiceOver und Firefox unter MacOS. Bei TalkBack und Firefox wird der Status "geöffnet" oder "geschlossen" nicht korrekt wiedergegeben.
3. Lässt sich die Forderung nach vollständiger Konsistenz im Hinblick auf Nachhaltigkeit rechtfertigen?
Die Frage ist aus meiner Sicht berechtigt. Denn je nachdem, wie die Antwort ausfällt, bringt dies weitreichende Konsequenzen in die eine oder andere Richtung mit sich. Wie oben bereits erwähnt, zählt in Sachen Nachhaltigkeit jedes Detail.
Wird die Frage mit Ja beantwortet, bedeutet dies einen Zuwachs an Komplexität und Code. Denn die Entscheidung für vollständige Konsistenz gilt automatisch für alle anderen interaktiven Inhaltskomponenten. Dazu zählen Formulare, Register, Slider, etc. Im Falle des Akkordeons ist der Codezuwachs gering. In Summe fällt dieser allerdings stärker ins Gewicht, vor allem bei komplexen Seiten. Zudem gilt das Akkordeon als relativ unkomplizierte Inhaltskomponente. Bei Slidern sieht das anders aus.
4. Die Auffindbarkeit von verborgenen Inhalten
Abgesehen von der Art der technischen Realisierung möchte ich einen weiteren Aspekt anführen. Bei einem "Offenlegungswidgets" wie dem Akkordeon sind Inhalte teilweise verborgen. Gleiches gilt für andere Inhaltselemente, bei denen Inhalte verborgen werden (gemeint sind Register und Slider).
Verborgene Inhalte sind schwer bis nicht auffindbar. Website-Besucher*innen erkennen unter Umständen den Klappmechanismus der Akkordeon-Elemente nicht. Oder es fehlt an Motivation, diese zu öffnen.
Suchende, die mit einem bestimmten Suchwort auf eine Internetseite gelangen, finden dies dort nicht, weil es sich in einem geschlossenen Akkordeon-Element befindet. - Eine Ausnahme bilden Chromium-basierte Browser. Sie sind in der Lage, Inhalte in geschlossenen Akkordeon-Elementen zu finden und automatisch offenzulegen. Voraussetzung dafür ist allerdings, dass die Akkordeon-Elemente mittels <details> und <summary> umgesetzt sind. - Der Aspekt der mangelnden Auffindbarkeit könnte Veranlassung geben, auf die Verwendung des Akkordeons zu verzichten.
5. Fazit: Vor- und Nachteile der drei Designansätze
Designansatz 1 (<details>, <summary>):
- Geringerer Codeumfang im Vergleich zu Designansatz 2
- Unterstützt Suchfunktion Chromium-basierter Browser (AutoDisclose)
- Weniger Platzbedarf und bessere Übersicht im Vergleich zu Designansatz 3
- Browser- und Screenreader-übergreifend nicht vollständig konsistent
Designansatz 2 (<div>, ARIA-Attribute und JavaScript):
- Weniger Platzbedarf und bessere Übersicht im Vergleich zu Designansatz 3
- Browser- und Screenreader-übergreifend konsistent
- Größerer Codeumfang im Vergleich zu Lösungsansatz 1
- Suchfunktion Chromium-basierter Browser wird nicht unterstützt
Designansatz 3 (Verzicht auf das Inhaltselement "Akkordeon"):
- Browser- und Screenreader-übergreifend konsistent
- Alle Inhalte sind direkt verfügbar, Auffindbarkeit vollständig gegeben
- Größerer Platzbedarf
- Schlechtere Übersicht
6. Nützliche Links zum Thema barrierefreies und nachhaltiges Webdesign
Hier findest du Links zu ausgewählten Online-Bewertungstools, die das Seitengewicht deiner Website berechnen und Optimierungspotenziale ermitteln. Des Weiteren sind zwei Online-Tools für die Komprimierung von Vektorgrafiken verlinkt. Über die letzten beiden Links kannst du die Code-Beispiele zum Designansatz 2 abrufen.
Bewertungstools für Nachhaltigkeit:
- https://cleaner-web.com/
- https://digitalbeacon.co/
- https://ecograder.com/
- https://websitecarbon.com/
Optimierungstool für SVG:
Code-Beispiel von Scott O'Hara: a11y_accordions:
7. Wie es weitergehen kann
Der Ansatz, Perfektion und Nachhaltigkeit im Webdesign in Einklang zu bringen, hat dich überzeugt? Du überlegst, deine Website ebenfalls nachhaltig gestalten zu lassen? Dann lass uns ins Gespräch kommen.
Sowohl bei der Überarbeitung deiner bestehenden Website als auch bei der Gestaltung einer neuen Website kann ich dich unterstützen. Für eine mögliche Überarbeitung bietet sich zunächst ein Nachhaltigkeitsaudit an. So kannst du den Aufwand für einen Relaunch deiner Website besser einschätzen. Vielleicht möchtest du die Verbesserungsvorschläge des Audits dann selbst umsetzen. Diese und andere Überlegungen können wir am besten in einem persönlichen Gespräch anstellen.