Konkrete Website-Beispiele:
- Kleiderordnung.Berlin
- Kunnig Konsulting Finanzdienstleistungen, Liechtenstein
- gemeva, Zürich: Projektmanagement für Change- und Transformationsprojekte
oder klassische kleinere Websites mit Fokus auf den Inhalt wie
- Dr. Samuel Felix Sieber, Supervisor & Coach in Berlin
- Raum für Eigensinn für Menschen mit und ohne Typ 1 Diabetes
Einfach mag manchen nicht gut genug erscheinen, aber einfache Websites zu entwerfen ist gar nicht mehr so einfach, wenn die Menge der Inhalte und die Anforderungen wachsen.
Einfach, zeitlos und klassisch oder extravaganter maximalismus?
Während Ämter und Institutionen sich ganz bewusst für Klarheit und Einfachheit entscheiden können oder sogar müssen, haben Startups und innovationsfreudige Firmenkunden eher den Anspruch, mit besonderem Design und Effekten Aufmerksamkeit und spielerische Freude zu verbreiten. Wichtig bleibt die Zugänglichkeit und Barrierefreiheit einer Website nicht vermeintlichen Trends und komplexen Webdesign-Ideen zu opfern, sonder idealerweise Design und Benutzbarkeit miteinander zu verbinden.
Einfache Sprache oder Fachbegriffe?
Einfache Sprache klingt einfach, ist aber leichter gesagt als geschrieben (und vielleicht leicht zu verwechseln mit „Leichter Sprache“, die aber festgelegten Regeln folgt). Fachbegriffe sind ja wichtig, um Missverständnisse zu vermeiden, doch die Kundschaft will in ihren Worten verstanden werden.
Trotzdem werde ich es wagen, einige Begriffe anzusprechen und teilweise zu erklären oder auf weiterführende Quellen zu verweisen. Neben juristischen und fachlichen Begriffen wie Barrierefreiheit, die relativ klar definiert sind, gibt es Schlagworte wie DevUX oder SustyWeb, mit denen nicht mal alle Webentwickler:inne und Webdesigner:innen etwas anfangen können.
DevUX: Web-Development und Design verbinden
Unter nachhaltig elegantem Webdesign verstehe ich im weiteren Sinne sowohl das Design (Konzeption, Grafik, UX, UI) als auch die Umsetzung (Softwarearchitektur, Technologieauswahl, Programmierung und Qualitätssicherung). Es wäre generell hilfreich, die starke Trennung von Design und Entwicklung zu durchbrechen und von Anfang an zu kooperieren (DevUX). Unbewegte Vorschauseiten mit Blindtexten zu erstellen, um sie dann an ein anderes Team zu übergeben erscheint mir als Relikt aus Zeiten von Buchdruck und Laufburschen und als vermeidbare Quelle von Missverständnissen und Unzufriedenheit.
Veränderte Anforderungen von Kundschaft und Gesetzgebung:
Die anstehenden Gesetzesänderungen zu Nachhaltigkeitsthemen wirken jedenfalls ambitioniert. Konkret folgt auf das nachhaltige Lieferkettengesetz, das den internationalen Nachhaltigkeitszielen (SDG) in allen Branchen größere Bedeutung beimessen soll, mit dem European Accessibility Act (EAA) 2025 eine umfassende Pflicht zur Barrierefreiheit für europäische Webseiten, wie sie ähnlich bereits jetzt für kommerzielle und öffentlich Anbieter:innen in den USA gilt. Messbare Kriterien werden sich an den WCAG-Richtlinien orientieren.
Auch Ausnhameregelungen (Omnibus) und ausbleibende Abmahnwellen ändern nichts an der Tatsache, dass soziale und ökologische Nachhaltigkeit auch klare ökonomische Vorteile mit sich bringt. Während erneuerbare Energien eine Gesellschaft langfristig unabhängig von fossilen Energien und gemeinwohlorientierte Open-Source-Software unabhängig von rein gewinnorientierten Prioritäten machen, bringen Barrierefreiheit ebenso wie Mehrsprachigkeit und responsive Gerätetauglichkeit potenziell neue Kundschaft.
Die ökologische Web-Optimierung lässt sich unter dem neuen Schlagwort SustyWeb zusammenfassen. Was die rechtlichen Veränderungen angeht, die uns als Kreative und Webentwickler:innen ab 2024 betreffen, gilt wie immer der Hinweis, dass ich kein Jurist bin und dies daher nicht als Rechtsberatung zu verstehen ist. Bitte fragt eine Anwältin oder einen Anwalt eures Vertrauens, wie die rechtliche Lage konkret für euch und eure Kundschaft zu verstehen ist!
Zu meiner Person: Ich bin Ingo Steinke, ein erfahrener Freelance Webentwickler in Berlin und beschäftige mich seit über zwei Jahrzehnten hauptberuflich mit der Erstellung, Erweiterung und Optimierung von Websites und Web Apps, von kleinen Startups und anderen Freelancern bis hin zu komplexen Projekten, die du in meinen Portfolio-Referenzen findest. Für diesen Artikel habe ich mich auf die kleineren Projekte konzentriert, da ich hier frei von bestehendem Legacy Code und firmenpolitischen Vorgaben arbeiten konnte, bei denen Nachhaltigkeit und Barrierefreiheit bislang oft nicht die Priorität hatten, die sie aus wirtschaftlichen Gründen haben sollten.
Fortschritt statt Verschlimmbesserung
Ich hoffe jedenfalls, dass die neuen Gesetze nicht zu einer ähnlichen Verschlimmbesserung führen wie die Datenschutzgrundverordnung (DSGVO), die eine gut gemeinten Datenschutzinitiative in eine bürokratische Absurdität verwandelte, die uns scheinbar zwingt, beim ersten Aufruf einer Webseite zunächst den eigentlichen Inhalt mit einem Hinweisschild voller Kleingedrucktem zu verdecken um die Besucher:innen zur Zustimmung ungelesener Verzichtserklärungen zu nötigen. Dass es auch anders geht, habe ich ebenfalls schon mehrfach beschrieben und bewiesen.
Mein Optimismus ist also nicht unbegründet, zudem hat sich in den letzten Jahren auch einiges sehr positiv in der Web-Szene getan. Grünes Webhosting mit Ökostrom, Datensparsamkeit und bessere User Experience werden von bekannten Auditing-Tools wie Pagespeed/Lighthouse, Webpagetest honoriert. Ecograder, WebsiteCarbon und die Green Software Foundation können derweil mit strengeren und spezifischeren Messungen neue Maßstäbe setzen. Accessibility-Audits mit axe und WAVE warnen zumindest vor eklatanten Verstößen gegen die WCAG-Vorgaben.
Der technische Fortschritt von Browsern und Web-Technologien erleichtert es, mit semantischem Markup und flexiblen Style Sheets genau das zu gestalten und zu animieren, was die Geräte unterstützen und die Nutzer:innen haben möchten. Transparenz, Konstrast, Pastellfarben, Bewegung und Sprache sind Aspekte, um den gleichen Inhalt auf ganz unterschiedliche Weise präsentieren können, was mithilfe moderner Media- und Feature-Queries nach Kontrast- und Animationsvorlieben (prefers-contrast, prefers-reduced-motion, prefers-reduced-transparency etc.) relativ einfach und übersichtlich umsetzbar wird.
Container Queries, Grid Layout und fluide Typographie ermöglichen modulares Webdesign, das robust und flexibel funktioniert, ohne sich wie früher an Seiten- und Pixelbreiten zu orientieren. Farbräume jenseits von sRGB lassen Farben auf modernen Monitoren strahlender leuchten, Blend Modes, Transparenz und perspektivische Ebenen ermöglichen Effekte wie im Zeichentrickfilm, interaktiv, energiesparend und ohne Abhängigkeit von kommerzieller Software wie der früher zunächst gefeierten, später aber in Verruf und schließlich in Vergessenheit geraten Adobe-Flash-Technologie.
Während die neuen Möglichkeiten von vielen Kreativen und Entwickler:innen noch weitgehend ignoriert werden, erforschen andere sie umso intensiver und teilen ihre Erfahrung in inspirierenden Vorträgen und Workshops, beispielsweise bei den beyond Tellerrand Konferenzen.
Anstelle einer umfassenden Sammlung nützlicher Links zum Thema, die dennoch als Ausgangspunkt für eigene Recherchen dienen sollten, verlinke ich zunächst mal meinen englischsprachigen DEV-Artikel zum gleichen Thema: Accessibility, SustyWeb, SDGs, and upcoming European Legislation in 2024/2025.
Zu guter Letzt nochmal ein schlechtes Beispiel als Gegensatz zu den eingangs genannten guten. Vielleicht ist euch schon aufgefallen, dass die meisten meiner Referenzprojekte ungewöhnlicherweise ohne Cookie-Banner auskommen. Dank Datensparsamkeit und datenschutzkonformer Open-Source-Statistiken ist das auch 2025 immer noch machbar. Insgesamt bleibe ich hoffnungsvoll und werde weiterhin gute Beispiele für nachhaltig elegantes Webdesign beitragen.
Das obige Bild ist als Gegenbeispiel zur allem oben gennannten zu verstehen. Es illustriert vielmehr die Verschlimmbesserung durch Cookie-Banner, die infolge der gut gemeinten Datenschutzgesetze üblich wurde.
