Internetauftritt 2023: Neuerungen im Überblick

• Die Barrierefreiheit befindet sich auf der höchsten Stufe des WCAG 2.2 (Triple A).
• Die klare Struktur und standardkonforme Benennung aller HTML-Tags ermöglicht einfache Navigation durch Screenreader und andere Hilfsmittel. 
• Der Besucher des Internetauftritts kann sich per Tastatur oder anderen Eingabegeräten schnell und einfach durch den Internetauftritt bewegen.
  
• Die Seite kann vollständig ohne Maus bedient werden. Besucher navigieren schnell und einfach mit der Tastatur oder anderen Eingabegeräten.
• Der hohe Kontrast aller grafischen Elemente sorgt dafür, dass auch Menschen mit eingeschränkter Sehkraft alle Inhalte erleben können.
• Die Schriftart „Arial“ ist auf Lesbarkeit optimiert. Die Textgrößen, -abständen, Laufweiten und die linksbündige Ausrichtung sorgen für sehr gute Lesbarkeit.
• Die Breite der Textzeilen ist gemäß der Vorgaben auf 80 Zeichen beschränkt. So können Texte einfacher gelesen und schneller erfasst werden.
• Das aktive Bildschirmelement wird mit einer roten Umrandung markiert.
• Bei Links besitzen einen sog. "Title".
• Formulare sind barierefrei gestaltet.
  
• Hintergrundanimationen und -videos können pausiert werden.
• Darkmode (Nacht-/Dunkelmodus) wird automatisch entsprechend der Einstellung des Browsers / Betriebssystems aktiviert
• Eine optionale Menüleiste zur Barrierefreiheit bietet folgende Möglichkeiten:
• Direkter Sprung zum ersten Seiteninhalt (Menü wird übersprungen)
• Erklärung zur Barrierefreiheit
• Erklärung zur Leichten Sprache
• Gebärdensprache: Videos in Gebärdensprache*
• Einfache Abläufe
  
• Der Belegungsstand bei Veranstaltungen wird über den Fortschrittsbalken dargestellt.
  

• Der Internetauftritt verfügt über eine moderne grafische Gestaltung
• Die Seite arbeitet mit einem dynamischen 12-spaltigen Gestaltungsraster (Grid). Diese übersichtliche, strukturierte Anordnung aller Inhalte entspricht dem höchsten, aktuellen Stand der Technik.
• Die Inhalte z.B. der TagCloud werden in einem ansprechenden Applikationsstyle dargestellt.
• Mit „Arial“ setzt der Internetauftritt auf eine der weltweit am meisten verbreiteten Standardschriftarten. Damit wird der Punkt "Robust" im WCAG-Standard gewürdigt.
• Die Programmbereiche können auf drei unterschiedliche Arten dargestellt werden. Die Darstellung der Programmbereiche hat eine edle Kacheloptik. Die einzelnen Kacheln reagieren auf den Mauszeiger und heben die ausgewählte Kachel hervor.
• Die Abstände zwischen den einzelnen Seitenelementen sind optimal aufeinander abgestimmt, wodurch die Seite übersichtlich und ruhig wirkt.
• Darstellungsattribute (Hintergrund, Minimale Höhe, Darstellungsart usw.) stehen für alle Inhalte zur Verfügung.
• Das moderne, cinematische Layout des Fußbereichs ist vom Abspann in  Filmen inspiriert. Im Fußbereich können  individuelle Inhalte hinterlegt werden, die dann auf jeder Seite erscheinen.
• Multimediale Gestaltung
  
• Inhalte und Teaser sind mit Micro-Animations lebendig gestaltet.
• Alle Bilder werden automatisch skaliert und in der optimalen Größe dargestellt. So werden auch große Fotos immer vollständig im sichtbaren Bildschirmbereich angezeigt. Wird ein Bild in voller Größe dargestellt, skaliert das System dieses Bild automatisch auf 80% der sichtbaren Fläche (Viewport).
• Die Darstellung der Bilder wird automatisch auf das Umfeld angepasst. Damit die Bilder sich klar vom Hintergrund abheben, werden sie automatisch mit einem sehr dezenten Schatten versehen. Als Effekt erlangt man aber automatisch eine deutlich verbesserte Tiefenwirkung
• Logos, Icons und Grafiken werden immer vollständig dargestellt und nicht automatisch zugeschnitten.
• Alle Elemente des Internetauftritts können durch Hintergrundbilder und -videos optisch aufgewertet werden.
• Hintergrundbilder werden nach dem Laden animiert (Cinematic-Effekt, langsames Hereinzoomen). Damit wird jedes Bild zu einem kleinen Video.
• Hintergrundbilder oder -videos wechseln mit einer Animation / Überblendung. 
• Das „Album“ zeigt alle enthaltenen Fotos in einer Miniaturvorschau an. Das Vorschaubilder ist "strahlen" hervorgehoben. Mit diesen Mikroeffekten erreichen wir eine sehr hohe Qualitätsanmutung. Im Bildbetrachtungsmodus (Vollansicht) können alle Bilder im Album per Klick, Pfeiltasten oder per Scrollbewegung betrachtet werden.
• Teaser
• Teaser enthalten keine funktionale Elemente wie z.B. Links oder Formulare. Damit ist das Design robuster und der Benutzungsprozess besser gewürdigt.
• Die Veranstaltungs-Teaser enthalten die wesentlichen Informationen inkl. Belegungsanzeige. Der Teaser enthält automatisch das Bild der Veranstaltung oder eine Platzhaltergrafik. darüber hinaus können Hintergrundbilder eingebunden und so die Darstellung deutlich hervorgehoben werden.
• Für den Kontakt-Teaser gibt es zwei unterschiedliche Darstellungen.
• Die Darstellungsart „Zusammenfassung“ ermöglicht aufklappbare Artikel (z. B. für FAQs).
• Detailseiten
• Die Detailseite der Veranstaltung  ist optisch ansprechend, übersichtlich (Textdarstellungen, Bilder, Anmeldebereich, etc.) und auf den Buchungsprozess optimiert.
  
• Kopfleiste, Navigation und Suche
  
• Die Kopfleiste wird beim Scrollen nach unten ausgeblendet und beim Scrollen nach oben in kompakter Form eingeblendet. Sie kann alternativ am oberen Bildschirmrand fest „angeheftet“ werden (sticky header).
• Die Hauptnavigation ist mit ansprechenden und leicht verständlichen Icons bestückt.
• Die Suche ist in der Hauptnavigation immer sichtbar und somit immer direkt erreichbar.
• Im Kopfbereich wird der Warenkorb dargestellt und ist auf allen Seiten verfügbar (WCAG Robustheit).
• Der Internetauftritt verfügt über eine schnelle und effektive Suche über alle Inhalte der Seite. dabei reagiert die Suche auch auf hinterlegte Schlagworte.
• Der Navigationspunkt "Suche" dient der Anzeige des Suchfeldes und der Darstellung des Programms. Ist die Suche auf der Startseite eingebunden, wird sie offen dargestellt. 
• Die Suchfilter sind grafisch als übersichtliche Leiste dargestellt. Die Filter nach Tagen, Tageszeiten und Orten sind direkt verfügbar. Komplexe Filter sind in der Suche nicht erforderlich, da durch eine intelligente Darstellung der Suchergebnisse und einfache Filter bereits beste Suchergebnisse erreicht werden.
• Die Suche reagiert semantisch und „weiß“ in vielen Situation wonach der Benutzer sucht. Wird z. B. nach "Yoga" gesucht und existiert ein Programmbereich mit diesem Namen, wird dieser direkt offen dargestellt. Die Suche listet neben Veranstaltungen und Programmbereichen auch Kontakte (Honorarkräfte, Mitarbeiter) und redaktionelle Inhalte.
• Dynamik mobiler Darstellung
  
• Auf Unterseiten wird die Suche bei der Darstellung auf mobilen Geräten automatisch auf einen Navigationspunkt  "Menü" verkleinert. Diese kleine, platzsparende Navigation wird prominent dargestellt und ist einfach zu klicken.
• Die Applikation „Karte“ passt Positionen von Kartenpunkten dynamisch an die Darstellungsgröße des Kartenbildes an.

• Automatische Bildskalierung
• Automatische Konvertierung in moderne Bildformate
• Automatisches Kompatibilitäts-Management für Browser
• Bildverwaltung
• Videoverwaltung
• Audioverwaltung

• Durch optimierten Code werden beim Aufrufen des Internetauftritts nur kleinste Datenmengen übertragen. Dadurch werden auf dem Internetauftritt geringste Ladezeiten erzielt.
• Die Inhalte des Internetauftritts können (komplett oder in Teilen) in mehreren Sprachen angelegt werden.
• Alle Applikationen sind auf dem aktuellen Stand der Technik.
• Im Kopfbereich kann als Ergänzung zur Standard-Navigation eine zusätzliche Navigation angelegt werden. Somit ist der funktionale Teil der Navigation (Kopfleiste) von der inhaltlichen Navigation getrennt.
• Jeder Inhalt des Internetauftritts kann in beliebige andere Inhalte gelegt werden. Die Seite verfügt daher über eine Bereichsnavigation. Diese stellt die Weiterentwicklung der Brotkrumen-Navigation dar. Die Bereichsnavigation zeigt alle Bereiche an, in denen z.B. ein Text, ein Artikel oder eine Veranstaltungen eingebunden sind.
• Die Suche reagiert semantisch und „weiß“ in vielen Situation wonach der Benutzer sucht. Wird z. B. nach "Yoga" gesucht und existiert ein Programmbereich mit diesem Namen, wird dieser direkt offen dargestellt. Die Suche listet neben Veranstaltungen und Programmbereichen auch Kontakte (Honorarkräfte, Mitarbeiter) und redaktionelle Inhalte.
• Angebote und Verträge können über den Internetauftritt volldigitalisiert verarbeitet werden.
• Telefonnummern sind klickbar und können direkt angewählt werden.
• E-Mailadressen können von Crawlern, Bots und Scripten nicht mehr automatisch ausgelesen werden (Spam-Schutz).
• Die Einbindung von youtube-Videos erfolgt DSGVO-konform.
• Vor der Weiterleitung zu google-maps und openstreetmap muss DSGVO-konform zugestimmt werden.
• Besucherdaten können mittels "matomo" DSGVO-konform erfasst und ausgewertet werden.
• Pro Formular kann die Einwilligung zur Verarbeitung der Daten eingeholt werden.
• Individuelle Formulare ermöglichen es, nur die Daten abzufragen, die wirklich erforderlich sind.
  
• Google Fonts finden keine Verwendung.
• Standardmäßig werden nur technisch erforderliche Cookies verwendet.
• Ein Standard-Widerrufsformular ist über einen Link im Text der Widerrufsbelehrung erreichbar.

• Alle Inhalte des Internetauftritts können selbst gepflegt werden.
• Social-Media-Accounts können ohne technische Unterstützung eingebunden werden.
• Individuelle Navigationspunkte können direkt über die Nutzeroberfläche erstellt und eingebunden werden.
  
• Listen mit Bedingungen können selbst erstellt und eingebunden werden.
• Der Navigationspunkt „Kontakt“ kann mit einem beliebigen Link verknüpft werden.
• Die Inhalte des Fußbereichs sind selbst individuell gestaltbar.
• Die Inhaltspflege erfolgt über übersichtliche Eingabeseiten mit systeminternen Werkzeugen.
• Gestaltungsmöglichkeiten wie "fensterbreit", "Position", "minimale Höhe", "Hintergrund" usw. lassen sich durchgängig auf alle Inhalte anwenden.
• Das Attribut "Animation" ermöglicht es dem Anwender, den Internetauftritt mit sogenannten Micro-Animations "zum Leben zu erwecken".
• Es gibt die Möglichkeit, relative Pfade ("sprechende URLs") anzulegen
• Alle Änderungen sind live

• Die Login-Seite zum Extranet hat eine festgelegte URL (/anmeldung) die als Lesezeichen gespeichert und veröffentlicht werden kann.
• Registrierung und Login sind einfach zu handhaben.
  
• Angemeldete Besucher erreichen die Seite „Mein Profil“ mit einem Klick.
• Im eigenen Profil ist es möglich, die Bankverbindung zu aktualisieren. Es erfolgt eine Information an die Hauptgeschäftsstelle in Form eines Vorgangs.
  
• In der Veranstaltung bietet das Formular „Kontaktaufnahme“ für Anfragen bei ausgefallen Veranstaltungen, vollen Kursen mit Warteliste oder bereits begonnene Fortbildungen (Späteinstieg) die Möglichkeit der leichten Kontaktaufnahme. Die Anfrage wird als Vorgang an die Hauptgeschäftsstelle übermittelt.
• Die Detailseite einer Veranstaltung ist auf die Anmeldung optimiert. Der Buchungsbereich ist deutlich hervorgehoben und bleibt auch beim scrollen sichtbar.
• Fehlende, unvollständige und falsche Eingaben im Anmeldeformular sind hervorgehoben und zeigen eine erklärende Fehlermeldung.
• Während des Anmeldevorgangs wird die (sanitarisierte) Bankverbindung zur Prüfung angezeigt.
• Ein Standard-Widerrufsformular ist direkt im Internetauftritt eingebunden und über einen Link im Text der Widerrufsbelehrung erreichbar.
• Die Suche reagiert semantisch und „weiß“ in vielen Situation wonach der Benutzer sucht. Wird z. B. nach "Yoga" gesucht und existiert ein Programmbereich mit diesem Namen, wird dieser direkt offen dargestellt. Die Suche listet neben Veranstaltungen und Programmbereichen auch Kontakte (Honorarkräfte, Mitarbeiter) und redaktionelle Inhalte.

Die folgenden Funktionen erfordern zusätzliche Schulungen und Arbeiten an Ihrem System. Sie können auf Wunsch kostenpflichtig eingerichtet werden.