Zum Hauptinhalt springen

Hero-Bereich einer Eventwebsite: die erste Ansicht sinnvoll gestalten

Der Hero-Bereich ist der erste Abschnitt einer Eventseite, aber nicht die gesamte Anmeldung. Neue Besucher sollten erkennen, worum es geht, wann und wo das Event stattfindet und wohin die wichtigste Schaltfläche führt. Formulieren Sie diese Antwort aus bestätigten Eventdaten, bevor Sie Bild und Layout wählen.

Boletolibre-Redaktion

Veröffentlicht

Ein breites Seitenfeld und ein schmales Smartphone-Feld zeigen dieselbe Hierarchie: Titelzeilen, Kalender- und Ortssymbole, primären Aktionsblock und getrennte Bildfläche.
Eventdaten und Aktion sollen beim Wechsel von der breiten Ansicht zum Smartphone erkennbar bleiben. Die Formen zeigen eine Hierarchie, keine Plattformoberfläche.

1. Fakten vor der Überschrift bestätigen

Benennen Sie das Event so, dass neue Besucher es verstehen. Ergänzen Sie einen kurzen Satz zu Erlebnis oder Zielgruppe und danach das bestätigte Datum, Beginn mit Zeitzone sowie Ort oder Onlineformat. Bei einer Reihe muss klar sein, welche Ausgabe oder welcher Termin gemeint ist; ein dauerhafter Markenslogan ersetzt keinen aktuellen Zeitplan. Bestimmen Sie für jede veränderliche Angabe eine verantwortliche Person.

Editierbares Arbeitsblatt für Hero-Text und Veröffentlichung herunterladen (Markdown, Englisch)

2. Die erste Ansicht klar ordnen

Der Eventname gehört in die Hauptüberschrift. Platzieren Sie konkretes Datum und Ort daneben und erklären Sie kurz, warum die Teilnahme interessant sein könnte. Ein dekorativer Slogan kann ergänzen, darf diese Erklärung aber nicht ersetzen. Wichtige Angaben sollten Seitentext sein und nicht ausschließlich in einem Plakatbild stehen. Vergleichen Sie mit dem Arbeitsblatt die Reihenfolge auf Desktop und Smartphone vor der Freigabe.

3. Die Hauptaktion mit dem echten Ziel verbinden

Wählen Sie eine Hauptaktion passend zum aktuellen Eventstatus. „Tickets auswählen“ soll zum richtigen Event oder zur Terminauswahl führen; „Auf die Interessentenliste“ zu einem echten Formular und nicht zur Kasse. Eine zweite Aktion, etwa Programm oder Anreise ansehen, braucht eine eigene Bezeichnung. Notieren Sie Schaltflächentext, Ziel-URL, Zuständigkeit und Testdatum. Nach W3C muss der Zweck eines Links aus seinem Text oder programmatisch bestimmbaren Kontext verständlich sein.[1]

4. Die veröffentlichte Seite prüfen

Öffnen Sie die öffentliche Seite auf Smartphone und großem Bildschirm. Prüfen Sie Lesbarkeit von Datum, Ort und Schaltfläche, den Bildausschnitt und den Textumbruch ohne horizontales Scrollen. Liegt Text auf einem Foto, kontrollieren Sie den Kontrast im tatsächlichen Ausschnitt; W3C beschreibt unzureichenden Kontrast auf Hintergrundbildern als Barrierefreiheitsfehler. Folgen Sie dem Link per Tastatur und als neuer Besucher. Die Zielseite muss dasselbe Event und den aktuellen Verkaufsstatus zeigen. Nach Änderungen an Datum, Ort oder Ticketlink erneut prüfen.[2][3]

Quellen und weiterführende Informationen

  1. Understanding ReflowW3C Web Accessibility Initiative · Abgerufen
  2. Failure F83: Background images without sufficient text contrastW3C Web Accessibility Initiative · Abgerufen