BFSG 2025: Was bedeutet das für Websites?

BFSG 2025: Was bedeutet das für Websites?

Barrierefreiheitsgesetz 2025: Das musst du wissen.

Ab dem 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Es betrifft Unternehmen und Online-Dienste und verpflichtet sie, ihre Websites und Apps barrierefrei zu gestalten. Falls du einen Online-Shop, eine digitale Dienstleistung oder ein Buchungssystem betreibst, könnte dieses Gesetz auch für dich relevant sein.

Das BFSG basiert auf dem European Accessibility Act (EAA) und soll einen einheitlichen Standard für Barrierefreiheit in Europa schaffen. Ziel ist es, dass Websites für alle Menschen – unabhängig von möglichen Einschränkungen – zugänglich und nutzbar sind.

Für wen gilt das Gesetz?

Das BFSG betrifft unter anderem:
✔ Online-Shops und digitale Dienstleistungen
✔ Apps und Websites, über die Verträge abgeschlossen werden (z. B. Abos, Buchungen)
✔ E-Books und bestimmte digitale Produkte

Ausnahme: Kleinunternehmen mit weniger als 10 Mitarbeitern und einem Umsatz von maximal 2 Millionen Euro pro Jahr sind ausgenommen – es sei denn, sie vertreiben Produkte, die unter das BFSG fallen.

Was ändert sich?

Wenn deine Website unter das BFSG fällt, muss sie:
✅ Barrierefrei gestaltet sein
✅ Eine Erklärung zur Barrierefreiheit enthalten (ähnlich wie Impressum oder Datenschutzerklärung)

Bei Verstößen drohen Geldbußen von bis zu 100.000 Euro oder sogar eine Schließung der Website. Zudem können Mitbewerber Beschwerden einreichen, ähnlich wie bei der DSGVO.

Warum ist das wichtig?

Auch wenn du nicht direkt betroffen bist, lohnt es sich, die Barrierefreiheit deiner Website zu verbessern. Ein nutzerfreundlicher und zugänglicher Webauftritt bedeutet bessere Usability, höhere Conversion-Raten und mehr Vertrauen von Kunden.

Falls du eine Website-Überarbeitung planst, ist jetzt der perfekte Zeitpunkt, die neuen Anforderungen zu berücksichtigen.

Der Meisterwerk-Button existiert nicht

Der Meisterwerk-Button existiert nicht

Hier, an dieser Stelle, möchte ich mit euch über ein Thema sprechen, das mich schon lange beschäftigt. Heute wollen viele gleich beim ersten Klick das perfekte Meisterwerk schaffen – sei es in der Fotografie, im Design oder in einem anderen kreativen Bereich. Mit der Ankunft von künstlicher Intelligenz ist diese Erwartungshaltung nur noch gestiegen. Plötzlich scheint es, als könnten wir einfach auf einen magischen Knopf drücken, und alles wird perfekt. Doch die Wahrheit ist: Meisterwerke entstehen nicht durch Maschinen, sondern durch Menschen. Sie tragen unsere Seele, unsere Energie in sich.

Natürlich, künstliche Intelligenz kann uns viele Aufgaben erleichtern, Prozesse beschleunigen und uns neue kreative Möglichkeiten eröffnen. Aber die wahre Magie – das, was ein Werk zum Meisterwerk macht – kommt von uns selbst. Es ist das, was wir hineinlegen: unsere Emotionen, unsere Hingabe, unser Herzblut.

Es gibt ein Buch, das ich gerne erwähne: „Überflieger: Warum manche Menschen erfolgreich sind – und andere nicht “ von Malcolm Gladwell. Darin wird das Konzept der 10.000-Stunden-Regel beschrieben. Es besagt, dass jeder ein Genie werden kann – man braucht dafür „nur“ 10.000 Stunden Übung. Klingt viel? Ist es auch. Aber genau hier liegt der Schlüssel: In der Praxis, in der Erfahrung, im kontinuierlichen Dazulernen und Verfeinern. Meisterwerke sind das Resultat von Hingabe und harter Arbeit, nicht von Perfektion im ersten Versuch.

Viele sind besorgt, seit künstliche Intelligenz in unser Leben eingezogen ist. Sie haben Angst, dass Maschinen unsere Kreativität ersetzen könnten. Aber ich glaube, diese Angst ist unbegründet. Denn so fortschrittlich KI auch ist – sie kann keine Gefühle programmieren. Sie kann keine Geschichten erzählen, die uns wirklich tief im Herzen berühren.

Das Meisterwerk entsteht im Prozess. Es entsteht durch Ausprobieren, Scheitern, Lernen und immer wieder Weitermachen. Und manchmal braucht es mehr als nur einen Klick – es braucht Zeit, Geduld und Leidenschaft.

 

8 goldene Regeln für eine benutzerfreundliche Webseite nach Steve Krug

8 goldene Regeln für eine benutzerfreundliche Webseite nach Steve Krug

Worauf sollte man in erster Linie achten, damit eine Webseite benutzerfreundlich wirkt? Die Antwort ist ziemlich einfach. Sie ist sogar noch einfacher als Empfehlungen wie

„Alles Wichtige sollte nicht weiter als zwei Klicks entfernt sein“

oder


„Sprechen Sie die Sprache der Nutzer“

oder sogar

„Seien Sie konsistent“

 

Hier ist die Antwort…

„Bring mich nicht zum Nachdenken!“

 

Das ist das erste und wichtigste Gesetz der Usability – schreibt Steve Krug in seinem Buch „Don’t Make Me Think“.

Und je mehr ich mich mit Webseiten beschäftige, desto mehr wird mir klar, dass dies wirklich der Fall ist. Es ist das zentrale und grundlegende Prinzip der Usability, das entscheidend dafür ist, was im Webdesign funktioniert (oder nicht funktioniert).

Das Buch von Steve Krug „Don’t Make Me Think“ widmet sich den Prinzipien der Erstellung benutzerfreundlicher und verständlicher Schnittstellen für Websites.

Hier sind die wichtigsten Thesen und Ideen des Buches, die ich für Sie, meine lieben Leser, zusammengefasst habe:

1. Einfachheit und Intuitivität:
Benutzeroberflächen sollten so einfach und intuitiv sein , dass der Benutzer nicht darüber nachdenken muss, wie er sie verwenden soll. Alles sollte auf intuitive Weise offensichtlich und verständlich sein.

Beispiel:
Stell dir vor, du gestaltest eine Buchungsseite für ein Hotel. Die wichtigsten Informationen wie „Datum wählen“, „Zimmerart“ und „Buchen“-Button sollten klar strukturiert und gut sichtbar sein. Die Auswahl des Datums könnte durch einen intuitiven Kalender geschehen, der sich direkt öffnet, wenn der Benutzer darauf klickt, damit er sofort versteht, wie er die Daten eingeben soll.

2. Minimierung kognitiver Anstrengung:
Der Benutzer sollte keine Anstrengungen darauf verwenden müssen, zu überlegen, wie er mit der Website interagiert. Je weniger Zeit für das Verständnis der Schnittstelle aufgewendet wird, desto besser.

Beispiel:
Wenn du zum Beispiel eine Navigationsleiste auf deiner Webseite hast, sollten die Menüpunkte klar und einfach zu verstehen sein, wie „Startseite“, „Über uns“ oder „Kontakt“. So muss der Benutzer nicht überlegen, wo er klicken soll, um die gewünschte Information zu finden.

3. Selbstverständlichkeit der Elemente:
Die Elemente auf der Seite sollten selbst erklärend und funktional sein. Symbole, Schaltflächen und Links sollten leicht erkennbar und verständlich sein.

Beispiel:
Stell dir vor, auf deiner Webseite gibt es einen „Kontakt“-Button. Dieser Button sollte so gestaltet sein, dass sofort klar ist, dass man darauf klicken kann, um dich zu kontaktieren. Oder wenn du ein Warenkorb-Symbol für einen Online-Shop verwendest, sollte es eindeutig zeigen, dass dies der Ort ist, an dem man Produkte zum Kauf hinzufügen kann.

4. Usability-Tests:
Regelmäßige Usability-Tests mit echten Benutzern helfen dabei, Probleme zu identifizieren und die Schnittstelle zu verbessern. Krug betont die Wichtigkeit einfacher und häufiger Tests.

Beispiel:
Stell dir vor, du lädst ein paar Leute ein, deine Webseite zu benutzen, und beobachtest, wo sie Schwierigkeiten haben. Vielleicht merken sie nicht sofort, wo sie klicken müssen, um ein Produkt in den Warenkorb zu legen. Dank des Tests kannst du das Problem erkennen und den Button oder die Funktion sichtbarer oder verständlicher machen.

5. Verwendung von Standards und gewohnten Mustern:
Die Einhaltung allgemein anerkannter Standards und Muster verbessert die Usability, da die Benutzer bereits damit vertraut sind. Dies verkürzt die Zeit für Schulung und Anpassung.

Beispiel:
Wenn du zum Beispiel einen Onlineshop gestaltest, ist es sinnvoll, den Warenkorb oben rechts zu platzieren, weil das die meisten Benutzer gewohnt sind. Auch das Lupen-Symbol für die Suche ist ein Standard, den viele kennen. Wenn du diese vertrauten Muster benutzt, finden sich die Benutzer schneller zurecht.

6. Vermeidung unnötiger Informationen:
Die Minimierung der Informationsmenge auf der Seite hilft den Benutzern, schneller das Gewünschte zu finden und nicht durch unnötige Details abgelenkt zu werden.

Beispiel:
Wenn du eine Produktseite gestaltest, solltest du nur die wichtigsten Informationen anzeigen, wie den Preis, eine kurze Beschreibung und einen „Kaufen“-Button. Zu viele technische Details oder lange Texte könnten den Benutzer verwirren oder ablenken. Wenn er das Wesentliche sofort sieht, kann er schneller eine Entscheidung treffen.

 

7. Visuelle Hierarchie:
Die visuelle Struktur der Seite sollte klar und logisch sein, mit einer deutlichen Hierarchie der Elemente, die dem Benutzer hilft, sich leicht zurechtzufinden.

Beispiel:
Auf einer Webseite sollte der Haupttitel oder das wichtigste Angebot größer und auffälliger sein als andere Informationen. Zum Beispiel könnte der „Jetzt kaufen“-Button in einer auffälligen Farbe gestaltet werden, während weniger wichtige Texte kleiner und dezenter sind. So sehen die Benutzer sofort, was am wichtigsten ist, und wissen, wo sie hinschauen oder klicken sollen.

 

Klarheit und Kürze:
Die Texte auf der Website sollten einfach, prägnant und verständlich sein. Vermeiden Sie komplexe und lange Sätze.

Beispiel:
Wenn du eine „Über uns“-Seite erstellst, ist es besser, klare und kurze Sätze zu verwenden, wie zum Beispiel: „Wir sind ein kreatives Designstudio, das moderne und funktionale Webseiten entwickelt.“ Anstatt langer Absätze mit vielen Details, konzentriere dich auf das Wesentliche, damit der Benutzer schnell versteht, worum es geht.

Meine Empfehlung: Das Buch von Steve Krug „Don’t Make Me Think“ hat breite Anerkennung gefunden und ist zu einem Klassiker im Bereich der Web-Usability geworden. Es bietet praktische Ratschläge und Prinzipien, die dabei helfen, benutzerfreundlichere und effektivere Websites zu erstellen.

WebP und AVIF: So machst du deine Bilder kleiner und deine Website schneller – Schritt für Schritt!

WebP und AVIF: So machst du deine Bilder kleiner und deine Website schneller – Schritt für Schritt!

Das wussten bestimmt nicht alle: Bildformate wie WebP und AVIF bieten oft eine wesentlich bessere Komprimierung als die klassischen Formate PNG oder JPEG. Warum ist das für Designer und Webentwickler so wichtig? Ganz einfach: Kleinere Bildgrößen bedeuten schnellere Ladezeiten und einen geringeren Datenverbrauch, was gerade bei mobilen Nutzern einen entscheidenden Unterschied machen kann.

WebP und AVIF nutzen fortschrittliche Algorithmen, um Bilddaten effizienter zu komprimieren. Das Ergebnis? Bilder, die bis zu 30-50 % kleiner sind, ohne dabei merklich an Qualität zu verlieren. Für Designer bedeutet das, dass sie hochauflösende Bilder in ihre Projekte integrieren können, ohne sich über lange Ladezeiten oder eine schlechte Nutzererfahrung Sorgen machen zu müssen.

Ein weiterer Vorteil: Die Verwendung dieser Formate kann sich positiv auf das Ranking einer Website auswirken. Suchmaschinen wie Google bewerten die Ladegeschwindigkeit einer Website als wichtigen Faktor. Wer also WebP oder AVIF verwendet, hat bessere Chancen auf eine höhere Position in den Suchergebnissen.

Doch es gibt ein paar Dinge zu beachten. Nicht alle Browser unterstützen AVIF, auch wenn die Kompatibilität stetig zunimmt. WebP hingegen wird von den meisten gängigen Browsern bereits unterstützt. Um sicherzustellen, dass die Bilder überall korrekt angezeigt werden, kann es sinnvoll sein, eine Fallback-Lösung anzubieten, die ältere Formate wie JPEG oder PNG verwendet, wenn WebP oder AVIF nicht unterstützt werden.

Für Designer und Webentwickler ist es daher ratsam, die neuen Formate in ihre Workflows zu integrieren. Sie verbessern nicht nur die Performance der Websites, sondern schonen auch die Daten der Nutzer und steigern die Zufriedenheit der Besucher. Wer auf dem neuesten Stand der Technik bleibt, hat die besten Chancen, erfolgreich zu sein und wettbewerbsfähige Projekte zu realisieren.

In dieser Anleitung zeige ich dir, wie du Bilder effizient in die modernen Formate WebP und AVIF konvertierst, um die Performance deiner Websites zu optimieren. Folgende Schritte helfen dir, die besten Ergebnisse zu erzielen.

Schritt 1: Vorbereitung des Bildmaterials

Bevor du mit der Konvertierung beginnst, stelle sicher, dass deine Bilder in einem gängigen Format wie PNG oder JPEG vorliegen. Es ist hilfreich, die Originaldateien in höchster Qualität zu verwenden, um Verluste während der Konvertierung zu minimieren.

Schritt 2: Wahl des Tools

Es gibt verschiedene Tools, die du verwenden kannst. Je nach deinen Vorlieben und deinem Workflow wählst du ein passendes aus:

Option 1: Online-Konverter

Nutze einen Online-Konverter wie Squoosh oder Convertio. Diese Tools sind ideal für schnelle Umwandlungen, ohne dass du zusätzliche Software installieren musst.

Squoosh:
1. Öffne die Website Squoosh.
2. Lade das Bild hoch, das du konvertieren möchtest.
3. Wähle auf der rechten Seite das Format WebP oder AVIF aus.
4. Passe die Kompressionseinstellungen an, um die Dateigröße zu optimieren, ohne die Qualität zu stark zu reduzieren.
5. Klicke auf Download, um das konvertierte Bild herunterzuladen.

Option 2: Bildbearbeitungsprogramme

Nutze Software wie Adobe Photoshop (mit dem WebPShop Plugin) oder GIMP:
Photoshop:
1. Installiere das Plugin WebPShop von der Adobe Exchange-Website.
2. Öffne dein Bild in Photoshop.
3. Gehe zu Datei > Exportieren > Für Web speichern und wähle das Format WebP.
4. Stelle die Qualität ein und exportiere das Bild.
GIMP:
1. Öffne dein Bild in GIMP.
2. Gehe zu Datei > Exportieren als und wähle .webp oder .avif als Format.
3. Stelle die Qualität ein und exportiere das Bild.

Schritt 3: Kompatibilität sicherstellen

Nicht alle Browser unterstützen AVIF, daher ist es wichtig, eine Fallback-Lösung zu implementieren. Dies bedeutet, dass du sicherstellst, dass ein Bild im traditionellen Format (JPEG/PNG) angezeigt wird, falls der Browser WebP oder AVIF nicht unterstützt.

Nutze HTML und CSS, um Fallback-Bilder zu definieren:

html

<picture>      
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Beschreibung des Bildes">
</picture>

Schritt 4: Automatisierung im Web-Workflow

Wenn du regelmäßig Bilder in WebP oder AVIF konvertieren möchtest, ist es sinnvoll, dies in deinen Entwicklungs-Workflow zu integrieren:

Verwende Plugins für Webpack oder gulp, die Bilder automatisch während des Build-Prozesses konvertieren.
Plugins wie image-webpack-loader bieten Unterstützung für moderne Bildformate und optimieren diese automatisch.

Mit diesen Schritten kannst du Bilder effizient in WebP und AVIF konvertieren und so die Ladezeiten deiner Websites verbessern. Moderne Formate sind ein Muss für Designer, die zukunftssichere und schnelle Websites entwickeln möchten.

Orange im Webdesign: Der unterschätzte Farbrebell oder einfach nur eine Katastrophe?

Orange im Webdesign: Der unterschätzte Farbrebell oder einfach nur eine Katastrophe?

Orange. Diese Farbe polarisiert wie kaum eine andere im Webdesign. Du liebst sie oder du hasst sie – dazwischen gibt es wenig Raum.
Aber warum hat gerade diese intensive, kräftige Farbe so einen fragwürdigen Ruf?
Und warum sollte man sie vielleicht doch häufiger verwenden, wenn man den Mut dazu hat?

Lass uns einen tieferen Blick darauf werfen und die Frage klären: Ist Orange wirklich die Fehlfarbe des Webdesigns oder die Geheimwaffe für mutige Kreative?

Orange: Die Farbe der Aufdringlichkeit?

Erinnerst du dich an diese schrillen Popup-Werbeanzeigen, die dich auf fragwürdigen Webseiten angreifen? Richtig – sie sind oft orange. Warum? Ganz einfach: Orange zieht Aufmerksamkeit auf sich. Es ist fast unmöglich, es zu ignorieren. Aber genau hier liegt auch das Problem. Viele Designer verwenden Orange, um sofortige Reaktionen zu provozieren. Und das funktioniert – aber oft auf die falsche Art. Anstatt Benutzer zu fesseln, fühlen sich viele von der Farbe überfordert und abgestoßen.
Es gibt kaum eine andere Farbe, die so schnell den schmalen Grat zwischen „kreativ“ und „aggressiv“ übertreten kann.

Die kulturelle Ambivalenz von Orange

Orange ist nicht überall willkommen.
In westlichen Kulturen wird Orange oft mit Billigläden und knalligen Sonderangeboten assoziiert. „Sale! 50% Rabatt!“ – Wer hat das nicht schon in fetten, orangefarbenen Lettern gesehen? Diese Assoziationen mit Sparaktionen lassen viele Designer davor zurückschrecken, Orange im gehobenen oder minimalistischen Webdesign einzusetzen. Es fühlt sich einfach… billig an, oder?

Aber das ist nicht die ganze Wahrheit. In vielen asiatischen Kulturen wird Orange als Farbe des Glücks und der Spiritualität wahrgenommen. Warum also nicht mal über den Tellerrand schauen und die globale Perspektive auf diese Farbe im Design erkunden?

 

Orange als emotionale Bombe

Orange ist Energie.   Orange ist Leidenschaft.   Orange ist Hitze.

Diese Farbe schreit nach Aufmerksamkeit, Action und Begeisterung. Und genau deswegen könnte sie die perfekte Wahl sein – wenn man sie richtig einsetzt.
Willst du eine Call-to-Action, die die Nutzer aufweckt? Dann ist ein knalliges Orange genau das richtige Werkzeug, um aus der Masse hervorzustechen.

Aber hier kommt die Kunst ins Spiel: Setze es gezielt ein. Nur weil Orange auffällt, heißt das nicht, dass es überall funktionieren muss. Weniger ist oft mehr – besonders bei einer so intensiven Farbe.

 

 

Die psychologische Wirkung: Manipulation oder Meisterwerk?

Psychologisch gesehen ist Orange eine der Farben, die starke Emotionen weckt.
Es stimuliert den Appetit (weshalb viele Fast-Food-Ketten es lieben), fördert Geselligkeit und steht für Innovation.
Aber: Es kann auch Unruhe und Hektik hervorrufen. Besonders in einem minimalistischen Webdesign kann ein zu viel an Orange schnell chaotisch wirken. Willst du wirklich, dass sich deine Nutzer gestresst fühlen, nur weil sie deine Website besuchen?

 

 

Warum du Orange eine zweite Chance geben solltest

Okay, genug der Kritik. Orange hat auch eine Menge Vorteile.
Es ist frisch, mutig und vor allem: Es ist anders!
In einem Meer von Blau, Weiß und Grau ist Orange eine erfrischende Abwechslung. Es bringt Wärme und Dynamik in sterile digitale Welten. Für Marken, die Jugendlichkeit, Energie und Abenteuer ausstrahlen wollen, könnte es genau die richtige Wahl sein.

Orange ist auch unglaublich wandelbar. Ein sanfter Pfirsichton kann beruhigend wirken, während ein kräftiges Mandarinen-Orange Aufmerksamkeit auf sich zieht. Kombiniere es mit den richtigen Farben (etwa Blau oder Grau), und plötzlich wirkt es nicht mehr aufdringlich, sondern modern und ansprechend.

 

Orange – Ein Risiko, das sich lohnt?

Orange ist nichts für schwache Nerven. Es ist die Farbe der Rebellion im Webdesign – aber eine, die, wenn richtig eingesetzt, wahre Wunder wirken kann. Der Schlüssel liegt darin, Orange nicht als Hauptakteur zu sehen, sondern als kraftvolles Detail. Überlege, wo du Aufmerksamkeit erzeugen willst, und setze Orange genau dort ein. Mit Feingefühl und Kreativität kann diese oft verachtete Farbe zum Highlight deines Designs werden.

Also: Wagst du den Sprung ins Orange? Es könnte die Farbe sein, die deinem Design genau die fehlende Prise Originalität verleiht.

 

Orange ist ein mächtiges Werkzeug im Arsenal eines Webdesigners, das die Effektivität des Designs bei richtiger Verwendung erheblich steigern kann.

Das Verständnis der psychologischen Aspekte dieser Farbe, ihrer Auswirkungen auf die Stimmung und ihrer richtigen Anwendung in verschiedenen Kontexten hilft, ein ausgewogenes und ansprechendes Design zu schaffen.

Das Wichtigste ist, das richtige Maß zu finden und die Zielgruppe zu berücksichtigen, damit die Farbe Orange nützt und nicht schadet.

Erfahrungen & Bewertungen zu Nadja Berezina | Web- & Grafikdesign