Copyright (c) 2016 Kazitafahnizeer/Shutterstock
Internetauftritt 2023: Neuerungen im Überblick
Sowohl grafisch als auch aus technischer Sicht ist der Internetauftritt vollständig überarbeitet und aktualisiert. Freuen Sie sich auf ein Höchstmaß an Barrierefreiheit, ein modernes, responsives Design mit neuen Gestaltungsmöglichkeiten sowie viele neue und verbesserte Funktionen!
Barrierefreiheit
Mit dem Internetauftritt 2023 erfüllen wir die Richtlinien des WCAG 2.1 für barrierefreie Webinhalte auf der höchsten Stufe (AAA). Sie, als Betreiber der Seite, haben so die Sicherheit, dass sich Ihr Internetauftritt technisch auf dem neuesten Stand befindet und alle Möglichkeiten der Barrierefreiheit bietet.
Design
Dank neuester Technik passt sich die Darstellung des Internetauftritts dynamisch an die Größe von Bildschirmen und Browserfenstern an (responsive Design). Ihre Internetseite wird auf allen standardkonformen Gerät korrekt dargestellt, sodass die vollständige Nutzung auch per Handy oder Tablet fehlerfrei gelingt.
Struktur und Darstellung aller Elemente des Internetauftritts sind auf dem aktuellsten Stand der Internet-Technologie vollständig neu entwickelt. Dadurch werden die Inhalte ca. 30% schneller geladen.
Hier zwei Beispielsseiten
Hier erhalten Sie einen detaillierten Einblick
Barrierefreiheit
Barrierefreiheit
In erster Linie muss Software frei von Barrieren sein. Bei weitem nicht nur Menschen mit Behinderungen sind hier die Zielgruppe. Technik darf im Allgemeinen keine Barrieren erzeugen.
cmxOrganize ist auf WCAG AAA - Niveau. Ein Maximum an Barrierefreiheit.
- Die Barrierefreiheit befindet sich auf der höchsten Stufe des WCAG 2.1 (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.
* Nicht im Lieferumfang enthalten. Können über unseren Kooperationspartner bezogen werden.
Design und Aufbau
Design und Aufbau
Der Internetauftritt ist das Gesicht des Unternehmens. Das Image wird heute darüber transportiert. Das richtige Werkzeug zur Gestaltung des Internetauftritts und zur Integration der Daten ist daher wichtig.
Alle publizierbaren Objekte sind standardisiert. Es werden keine Inhalte mit "Templates" oder ähnlichem Eingefügt. Jedes Objekt im System verfügt über ein standardisiertes und hochdynamisches Frontend.
- 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.
Medien
Medien
Bilder werden in cmxOrganize voll automatisch auf Effizient optimiert. Dabei werden sie in moderne Bildformate überführt und automatisch auf die jeweilige Darstellungsgröße zugeschnitten.
Als Ergebnis reduzieren sich die Ladezeiten um ein vielfaches und der Besucher des Internetauftritts hat ein besseres Benutzererlebnis.
Nicht zuletzt ist eine schnelle Seite essenziell für eine gute Bewertung durch Suchmaschinen.
- Automatische Bildskalierung
- Automatische Konvertierung in moderne Bildformate
- Automatisches Kompatibilitäts-Management für Browser
- Bildverwaltung
- Videoverwaltung
- Audioverwaltung
Bilder können des weiteren noch bezüglich Ihrer Art konfiguriert werden. So kann zum Beispiel eingestellt werden ob ein Bild ein Logo ist. Wenn das beim Bild eingestellt ist, wird das Bild nicht mehr zugeschnitten und angepasst formatiert.
Technik und Datenschutz
Technik und Datenschutz
Technisch auf höchstem Niveau wurde der Internetauftritt 2023 auf Basis der modernsten Technologien realisiert. Heute ist keine neuer Technik verfügbar.
- 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.
Administration und Datenpflege
Administration und Datenpflege
cmxOrganize nutzt keine Fremdsysteme. Selbst das gesamte ContentManagement ist voll integrierter objektorientierter Bestandteil.
- 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
Benutzerführung
Benutzerführung
Eine klare, einfache und saubere Benutzerführung sorgt für ein positives Nutzererlebnis. Wir erfüllen dabei die WCAG-Prinzipien "Wahrnehmbar, Bedienbar, Verständlich und Robust" vollumfänglich.
- 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.
Zusatzfunktionen
Zusatzfunktionen
Die folgenden Funktionen erfordern zusätzliche Schulungen und Arbeiten an Ihrem System. Sie können auf Wunsch kostenpflichtig eingerichtet werden.
Buchungs- und Anmeldeformulare
- Paar-Anmeldung
- Anmeldung zu Hybridveranstaltungen
- Anmeldung zu Konferenzen / Tagungen mit parallelen Veranstaltungen
- Anmeldung zu Kursreihen / Veranstaltungspaketen
- Anmeldung zu Betreuungsangeboten
- Anmeldung zu einem Beratungstermin
- Anmeldung zu Ferienfreizeiten
- Anmeldung zur Schülerförderung
- Leihe eines Tabletts
- Buchung von Reisen mit Auswahl der einzelnen Programmpunkte
- Vergünstigte Anmeldung unter Angabe eines Rabattcodes / einer Zielgruppenzugehörigkeit
- Kontaktformular bei abgesagten, ausgebuchten und bereits begonnenen Veranstaltungen
Abbildung spezieller Geschäftsprozesse
- Gutscheinkauf
- Kauf von Fan-/Club-/Themen-Karten zur reduzierten Teilnahme an bestimmten Angeboten
- Beantragung einer Mitgliedschaft
- abonnieren des Newsletters
- Online-Befragung
- Anforderung des Programmhefts (postalischen Versand)
- Infrage Inhouse-/Individual-Schulungen
- Erstattungsformular zur verschlüsselte Übersendung der Bankverbindung
- Widerruf einer gebuchten Leistung
- Abfrage von Kurswünschen (Wunschzettel)
- Interessenabfrage für (neue) Veranstaltungsthemen
- Abfrage von Veranstaltungsvorschlägen
- Einbeziehung der Honorarkräfte per Onlineplanung
- Abfrage der Verfügbarkeiten von Honorarkräften
- Ausschreibung von Honorarverträgen
- Abfrage von Änderungswünschen
- Abfrage der Honorarkraftprofile
- Bewerbung von Kursen
- Empfehlungsmanagement (Cross-Selling)
- Last-Minute-Veranstaltungen
- frei definierbare Listen für z.B. "Restplatzbörse" / "Neu im Programm"
- weitere Veranstaltungen der Honorarkraft
Online-Bezahlsystem
- Rabatt- / Aktions-Codes (z.B. Black Friday, Zielgruppenrabattierung)
- Alternative Bezahlmöglichkeiten (z.B. Paypal-Sofortzahlung)
Funktionalität für Honorarkräfte
- Zugang zum eigenen Honorarkraftbereich
- Liste der eigenen Veranstaltungen
- Zugriff auf die Verträge
- Finanzübersicht
- Formular zur Übermittlung der Daten für das eigene Profil
- Zugriff auf einen geschützten Bereich (Channel)
- Abruf von Downloads für Honorarkräfte
- Buchung exklusiver Veranstaltungen nur für Honorarkräfte
- datenschutzkonformer Upload von Unterlagen / Nachweisen
- Generierung von Dokumenten
- Finanzamtsbestätigung (Vorjahr) für Honorarkräfte
- Finanzamtsbestätigung (aktuelles Jahr) für Honorarkräfte
- Qualifikationsübersicht
- aktuelle Einsatzliste
- weitere Dokumente auf Anfrage
- In der Planungsphase
- Formular zur Übermittlung von Verfügbarkeiten
- Formular zur Stornierung von Verfügbarkeiten
- Formular zur Bestätigung oder Absage einer Anfrage (Ausschreibung)
- Interessenbekundung an einer noch in der Entwicklung befindlichen Veranstaltung
- Einreichen von Veranstaltungsvorschlägen
- Veranstaltungsplanung (Onlineplanung)
- Einsicht in "fertig geplante" Veranstaltungen
- Formular zur Übermittlung von Änderungswünschen
- Formular zur Bestätigung des Honorarvertrags mit Unterschrift
- Für die Vorbereitung - Durchführung - Nachbereitung
- Herunterladen der Termine im ICS-Format
- Einsicht in relevante Informationen zur Veranstaltung, den Ort, die Teilnehmenden
- Einsicht in die Lerninhalte
- Abruf der Zugangsinformationen zum Raum (Code, Link, ...)
- Upload von Unterlagen für Teilnehmende zur Vor-/Nachbereitung pro Termin
- Eingabe von Texten (z.B. Hinweise zur Vor-/Nachbereitung) pro Termin
- Dokumentation der Inhalte / Arbeitsaufträge einer Veranstaltung (Klassenbucheintrag)
- Erstellung von TN-Listen (pdf)
- Nachmeldung unangemeldet erschienener Teilnehmender
- Pflege der Anwesenheit
- Dokumentation von Prüfungsergebnissen
- Für die Abrechnung
- Formular zur Bestätigung der Leistungserbringung
- Formular zur Bestätigung der Honorarabrechnung mit Unterschrift
- Ausdruck der Honorarabrechnung
Funktionalität für Teilnehmende
- Zugang zum eigenen Teilnahmebereich
- Liste der eigenen Veranstaltungen
- Finanzübersicht
- Zugriff auf einen geschützten Bereiche (Channel)
- Abruf geschützter Downloads
- Buchung exklusiver Veranstaltungen
- datenschutzkonformer Upload von Unterlagen / Nachweisen
- Generierung von Dokumenten
- Qualifikationsübersicht
- Anmeldeliste
- weitere Dokumente auf Anfrage
- Einreichen von Veranstaltungswünschen
- Weitermeldung zu Folge-/Wiederhoungs-Veranstaltungen
- Für die Vorbereitung - Durchführung - Nachbereitung
- Herunterladen der Termine im ICS-Format
- Abruf einer (anonymisierten) Liste zur Bildung von Fahrgemeinschaften
- Einsicht in relevante Informationen zur Veranstaltungen oder den Ort
- Abruf der Zugangsinformationen zum Raum (Code, Link, ...)
- Download von Unterlagen
- Einsicht in Texten (z.B. Hinweise zur Vor-/Nachbereitung)
- Einsicht in Inhalte / Arbeitsaufträge einer Veranstaltung (Klassenbucheintrag)
Funktionalitäten für Außenstellenleitungen
- Einsicht in relevante Informationen zur Veranstaltungen und die Teilnehmenden
- Generierung von Dokumenten (pdf)
- Erstellung von TN-Listen
- Weitermeldelisten
Suchmaschinenoptimierung (SEO)
Suchmaschinenoptimierung (SEO)
Die Optimierung für Suchmaschinen ist eine der wichtigsten Funktionen eines Internetauftritts. Dabei ist die Einhaltung von Standards, der Kern einer guten Vorgehensweise. Automatische Mechanismen, gut gemachte Zusatzfunktionen und ein vollständiges Set an Bearbeitungsmöglichkeiten für den Benutzer bauen darauf auf.
- Automatische Anpassung von Überschriften (eine H1-Überschrift pro Seite)
- fehlerfreier Code
- schnelle Ladezeit
- automatisierte Seitentitel
- Möglichkeit zum Pflegen der Seitentitel
- Möglichkeit zum Pflegen der Schlagwörter
- Möglichkeit zum Pflegen der Beschreibung
- standardisierter Aufbau
- hohe Anpassbarkeit im Inhaltsbereich
- Rich-Content
- saubere Strukturen
- Barrierefreiheit
- Anpassungen an Mobile Endgeräte