Nachhaltige Webseiten

Das Internet hat mittlerweile einen höheren Anteil am Verbrauch von CO2 als der globale Flugverkehr. Gleichzeitig höhlen Konzerne kontinuierlich den Datenschutz und die Privatsphäre von Internet-Nutzer*innen aus, um massenhaft Daten zu sammeln. Daten sind damit zu einer modernen Währung geworden, die bewusst zur Beeinflussung von wirtschaftlichen und politischen Zielen genutzt werden.

Digitale Nachhaltigkeit hört daher längst nicht beim Nutzen von grünem Strom auf. Auch wenn der Energieverbrauch von IT-Systemen ein signifikanter und zentraler Aspekt ist, wird man dem Ziel, nachhaltige Webseiten zu schaffen, durch eine bloße Reduktion auf das Thema Emissionen nicht gerecht.

Digitale Nachhaltigkeit hat dann einen Effekt, wenn wir die bloße Fixierung auf Maßnahmen zur CO2-Reduktion hinter uns lassen und nach Gerechtigkeit, nach Teilhabe und nach Menschenwürde fragen.

Wir verstehen Digitale Nachhaltigkeit weitergefasst als Respekt und Verantwortung sowohl gegenüber Nutzer*innen als auch gegenüber der Umwelt. Als sinnwerkstatt haben wir es uns deshalb zur Aufgabe gemacht, Prinzipien zur Förderung eines nachhaltigen World Wide Webs zu befolgen und bieten unseren Kund*innen Beratung und Maßnahmen zur Umsetzung dieser Prinzipien bei der ganzheitlichen Konzeption, Gestaltung und Programmierung von Webseiten und Webapplikationen an.

Digitale Nachhaltigkeit in Bezug auf Webseiten

Wir bieten verschiedene Maßnahmen zur Umsetzung nachhaltiger Strategien bezogen auf Webseiten an. Diese Maßnahmen sind sowohl auf konzeptionell-gestalterischer als auch technischer Ebene zu finden und beziehen verschiedene Aspekte aus den Bereichen UX Design (User Experience Design), Ethical Design und Environment Centered Design mit ein.

Konzeptionelle/Gestalterische Aspekte

  • UX-Konzeption: Fokus auf Personas und User Journeys für einfache, übersichtliche und effiziente Klick-Wege, um unnötige Seitenaufrufe zu vermeiden.
  • Vermeidung von „Dark Pattern“ wie ungefragte Overlays zur Anmeldung für Newsletter, Platzierung von Werbung, bewusste Irreführung/Fehlleitung – Nutzer*innen bleiben autark und mündig in ihren Entscheidungen und werden so nicht manipuliert.
  • Kritische Abwägung des Einsatzes von Analytics-Software (wie z. B. die Open-Source-Software Matomo), um auf zusätzliche Datenlasten zu verzichten.
  • Einbezug von Inklusion und Barrierefreiheit im Nutzungskonzept

Technische Aspekte

  • Kompression von Bildern und Nutzung von effizienten Bildformaten (wie WEBP) zur Reduktion von Dateigrößen
  • Effizienter Code: So wenig Code wie möglich, so viel Code wie nötig – wir nutzen keine vorgefertigten Templates, die einen Baukasten aller möglichen Features und Module anbieten. Es wird nur das geladen, was tatsächlich benötigt wird. Damit wird die Ladelast vom Server immens verringert.
  • Green Hosting (wir hosten unsere Seiten und Applikation bei Hetzner)
  • Unser Code (HTML/CSS/JS) wird minifiziert (komprimiert) und konkateniert (zusammengefügt). Server-Requests und Datenlasten werden dadurch verringert.
  • Einbezug von Inklusion und Barrierefreiheit (siehe weiter unten)
  • Nutzung von OpenSource-Technologien überall da, wo es geht. Keine Nutzung von Datenschutz-verletzenden Diensten wie Google Analytics, Facebook Feeds etc.
  • Bewusste Wahl von Schriftarten und -schnitten (Lesbarkeit, Systemschriften und lokales Hosten von Schriften)
  • Achtsamer Einsatz von Bildern und Videos. Keine Verwendung von Autoplay bei Videos.
  • Einsatz von Caching-Methoden (temporäres Vorhalten von Daten-Ressourcen und damit Verringerung von Daten-Anfragen an den Server)

Diese Prinzipien finden grundsätzliche Anwendung und sind die Basis unserer Arbeit. Gerne beraten wir Sie zu zusätzlichen Maßnahmen wie z. B. weitere Schritte zur Verringerung des ökologischen Fußabdrucks der Webseite, die zum Teil deutlich aufwändiger sind bzw. als „Preis“ das Nutzungserlebnis eventuell einschränken können (z. B. bei komplettem Verzicht auf Bildmaterial als ultima ratio).

Inklusion und Barrierefreiheit

Die Gestaltung und Umsetzung barrierefreier Webseiten ist uns ein großes Anliegen, weil es unsere Werte eines frei zugänglichen und demokratischen World Wide Web widerspiegelt. Das Recht auf Teilhabe und Zugang zu Informationen soll allen Menschen, unabhängig von möglichen körperlichen Einschränkungen, zuteil werden.

Damit verbunden sind zahlreiche Maßnahmen, die ergriffen werden können, um auch Menschen mit Behinderungen diesen Zugang zu ermöglichen. Wir unterscheiden zwischen Standard-Maßnahmen, die wir – so oder so – ergreifen, weil sie zum Standard-Repertoire eines modernen barrierefreien Webs gehören, und solchen Maßnahmen, die darüber hinaus ergriffen werden können, wenn der besondere Bedarf daran offensichtlich wird.

Zu den Standardmaßnahmen gehören:

  • Valider Code mit semantischer HTML-Struktur (Hierarchie von Überschriften, Listen, Nutzung von Landmarken etc.)
  • Alternativ-Texte für Bilder, Beschriften von Bildern im Backend ermöglichen
  • Formulare korrekt auszeichnen (Verwendung von <labels>)
  • Verwendung von ARIA-Rollen dort, wo das Markup von der ursprünglichen Semantik abweicht
  • Skip-Links, Landmarks und <header> verwenden – erleichtert die Navigation mit Screenreadern
  • Skalierbare Webseiten schaffen (mithilfe von em- oder %-Angaben) – dadurch kann der Browser-Zoom zum Vergrößern von Webseiten genutzt werden, ohne dass das Layout bricht
  • Responsivität – die nutzungsfreundliche Darstellung von Webseiten auf unterschiedlichen Geräten (Tablets, Smartphones) wird dadurch sichergestellt, geräteeigene Darstellungseinschränkungen werden berücksichtigt
  • Aussagekräftige Metadaten für Browser und Screenreader – unterstützt die korrekte Darstellung und Interpretation von Inhalten

Darüber hinaus können zusätzliche Maßnahmen sinnvoll sein:

  • Erstellen einer High-Contrast-Version, bei der die Farbkontraste der Webseite weiter verstärkt werden und mit einem Button in der Navigation aktivier- und deaktivierbar gemacht werden können
  • Größere Schrift mithilfe eines Buttons in der Navigation ermöglichen, ohne dass sich die Größenverhältnisse der gesamten Webseite ändern (im Gegensatz zum Zoomen im Browser)
  • Captions/Untertitel für Videos ermöglichen

Ob zusätzliche Maßnahmen bei der Umsetzung sinnvoll sind, besprechen wir mit unseren Kund*innen individuell von Projekt zu Projekt. Gerne beraten wir Sie und bieten Ihnen sinnvolle Maßnahmen für Ihren Anwendungsfall an.

Ob die von uns durchgeführten Maßnahmen den gewünschten Effekt haben, überprüfen wir mit den gängigen Tools zur Analyse von Barrierefreiheit (allen voran mit dem WAVE Web Accessibility Evaluation Tool).