Tipps für gute Websites

Ein Beitrag von Antonia Hildebrandt

Klare Strukturen, verständlich, barrierefrei, nachhaltig – was macht eine gute Website aus? Eine Frage, die sich viele Verantwortliche in Förderprojekten stellen. Silke Newig hat täglich damit zu tun. Sie ist als Mediengestalterin unter anderem für den künftigen Online-Auftritt des Projekts „bne:digital.nrw“ zuständig, das vom Ministerium für Kultur und Wissenschaft des Landes Nordrhein-Westfalen gefördert wird.

Erste effektive Schritte in Richtung eines guten nachhaltigen Webdesigns können mit etwas Basiswissen bereits gemacht werden. Es bewirke schon viel, an einigen kleinen Schrauben zu drehen, da ist sich Silke Newig sicher. Ihre Credos: „Weniger ist mehr.“ Und: „Gutes Design, Nachhaltigkeit und Barrierefreiheit schließen sich nicht aus.“ Ihre Tipps:

1. Klassische Gestaltungsregeln beachten

a. Übersichtlichkeit ist unabdingbar. Besonders, wenn eine Seite viel Content hat. Inhalte sollten so aufgeteilt werden, dass die Userin bzw. der User sich nicht überfordert oder verloren fühlt.

b. Dazu gehört z. B. auch eine klare Überschriftenstruktur in der korrekten Reihenfolge: in HTML-Elementen von H1-H6, beginnend mit dem Wichtigsten.

c. Es sollte immer nur so viel Text verwendet werden wie notwendig. Und wenn viel Text unvermeidbar sein sollte, dann muss dieser so gestaltet werden, dass eine übersichtliche und verständliche Struktur gegeben ist. Dabei sollte man sich grundsätzlich an den Bedarfen und Bedürfnissen der jeweiligen Zielgruppe orientieren.

d. Beim Einsatz von Bildern kommt es auf Zweck und Inhalt an. Daher sollten Bilder in der Verhältnismäßigkeit zum Nutzen eingesetzt und für die Nutzung im Web optimiert werden. Um zum Beispiel die Dateigröße zu reduzieren, lohnt sich der Einsatz von Vektorgrafiken, wenn eine einfache Grafik mit klaren Formen eigesetzt werden soll (Dateiformat: .svg). Ein Foto oder eine detaillierte Infografik lassen sich gut als komprimierte Pixelgrafiken einsetzen (Dateiformate z. B. .jpg oder .WebP oder .avif, die eine noch höhere Komprimierung ermöglichen).
Bilder sollten im Sinne der Datensparsamkeit und der Zugänglichkeit grundsätzlich mit Bedacht eingesetzt werden; ebenso sollten alternative Darstellungsformen immer in Betracht gezogen werden.

e. Sparsamer Einsatz von Videos: Videos sollten nur eingesetzt werden, wenn sie echten Mehrwert gegenüber anderen Formaten bieten; auch hier ist der Verwendungszweck ausschlaggebend. Sie sollten datensparend verwendet werden (z. B. je nach Zweck nicht immer in maximaler Qualität) und zudem nicht automatisch starten oder im Hintergrund laufen.

Zur Person

Silke Newig

Die Mediengestalterin für Digital- und Printmedien orientiert sich an den Prinzipien nachhaltigen Webdesigns mit einem besonderen Schwerpunkt auf digitaler Barrierefreiheit.

Foto: FernUniversität in Hagen/Hardy Welsch

2. Barrierefreiheit

Es ist notwendig, Barrierefreiheit von Beginn an mitzudenken, um die Teilhabe möglichst vieler Nutzenden zu gewährleisten. Nicht zuletzt ist es aufwendig, bei einer Website mit mehreren Unterseiten diese im Nachhinein barrierefrei zu gestalten. Außerdem ist vieles, was der Barrierefreiheit dient, auch gut für ein übersichtliches Design.

a. Hohe Kontraste. Für Menschen, die sehbeeinträchtig sind, ist das eine große Hilfe (auch die Rot-Grün-Sehschwäche ist hierbei zu beachten).

b. Tastaturbedienbarkeit (auch bei mitlaufenden Inhaltsverzeichnissen/Menüs). Die Seiten sollten komplett ohne Maus bedienbar sein.

c. Bei Abbildungen sollte es Alternativtexte geben, die von Screenreadern ausgelesen werden können; Videos sind mit Untertiteln zu versehen.

d. Barrierefreie Themes nutzen. (Ein Theme ist eine Zusammenstellung von grafischen Elementen und Einstellungen, die das Aussehen einer grafischen Oberfläche von Betriebssystemen, Programmen oder Websites festlegen bzw. verändern. Innerhalb eines Systems bildet ein Theme eine in sich geschlossene Einheit. Dadurch kann es mit geringem Aufwand ausgetauscht werden, ohne dabei andere Funktionseinheiten des Systems zu beeinflussen.) Viele Content-Management-Systeme, wie zum Beispiel WordPress, bieten diese an.

Es gehe bei Barrierefreiheit nicht nur um das Nachkommen entsprechender Verordnungen, sondern auch um die Haltung, sagt Silke Newig. „Einfach mal etwas ausprobieren und auch mit Spaß daran gehen – das ist wichtig. Und man kann immer dazu lernen. Mal einen Screenreader installieren und ausprobieren oder jemanden fragen, der einen als assistive Technologie benutzt.“ Es gebe außerdem kostenlose Programme und Funktionen in Browsern, die die Performance der eigenen Website auf Barrieren beziehungsweise Zugänglichkeit hin überprüfen.

3. Responsivität

Eine Website sollte auf unterschiedlichen Endgeräten und Größen (Tablet oder Smartphone) gleich gut funktionieren. Auch hier sind Grafiken ein Thema: Weil eine Grafik auf einem großen Bildschirm gut aussieht, bedeutet das nicht, dass sie auf einem kleinen Bildschirm auch funktioniert. Sie sollte User:innen nicht zum Scrollen zwingen, um zu Kernaussagen zu kommen. Je nach Zweck kann man für kleinere Formate alternative Darstellungsformen nutzen.

4. Keine Dark Patterns

(„Dark Patterns sind manipulative Designs oder Prozesse, die Nutzer:innen einer Website oder App zu einer Handlung überreden sollen. Sie werden häufig verwendet, um an persönliche Daten zu kommen oder […] Abonnements und andere Verträge unterzujubeln.“ Quelle: verbraucherzentrale.de) Sie werden auch benutzt, um die Click-Zahlen zu erhöhen. Dark Patterns sind alles, was die Userin bzw. den User nicht direkt zum Ziel führt. Um sie zu vermeiden, hilft es, sich zu fragen: Was will ich mitteilen und wie kann ich das möglichst direkt tun?
Ganz grundsätzlich sei weniger immer mehr, so Silke Newig. Man komme heutzutage leicht an sehr schicke Animationen und Effekte, um die Website besonders interessant aussehen zu lassen. Technisch sei immer mehr möglich. Dem zu widerstehen, sei eine große Herausforderung, die sich aber lohne, sagt Newig. „Eine Website sollte durch Inhalt überzeugen. In den meisten Fällen ist gutes Design unauffällig; so, dass die Nutzenden es gar nicht bemerken, sondern sich einfach und unkompliziert auf den Seiten bewegen.“

Weiterführende Informationen:

1. Nachhaltiges Webdesign: https://nachhaltiges-webdesign.jetzt/ (Ausführlicher Überblick und nützliche Hinweise zur Umsetzung.)

2. Grüne Energie: https://www.thegreenwebfoundation.org/ (Möglichkeit zur Überprüfung, ob Websites mit Strom aus nachhaltiger Erzeugung betrieben werden.)

3. Barrierefreiheit: https://barrierefreiheit.dh.nrw/barrierefreiheit/tipps-zur-digitalen-barrierefreiheit/checkliste (Checkliste des Kompetenzzentrums Digitale Barrierefreiheit.nrw)
Leitfaden/Webinar von BIK für Alle unter: https://bik-fuer-alle.de/webinar-barrierefreies-internet-einfuehrung.html
Beratung, Hilfen und Informationen von Hellbusch Accessibility Consulting: https://www.barrierefreies-webdesign.de/

4. Tools zur Überprüfung
https://bik-fuer-alle.de/barrierefreiheit-testen.html
https://bik-fuer-alle.de/easy-checks.html
Testen über den Browser Chrome: z. B. mit Plugin „Lighthouse“: https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=de
PDF-Überprüfung:
https://support.axes4.com/hc/de/articles/7371921627794-PDF-Accessibility-Checker-PAC-2024