ModernAccess / E-Mail Barrierefreies und modernes Template

ModernAccess / E-Mail

Barrierefreies und modernes Template

"GridAccess" ist das passende E-Mailtemplate für unser gleichnamiges Eventseiten Template. Ein modernes und barrierefreies Template mit vielen Einstellungsmöglichkeiten.

Du kannst für das guestoo Back-End zwischen zwei Darstellungsoptionen wählen. Die Screenshots in der Doku basieren auf dem "Klassischen Design".
Hier siehst Du die Unterschiede, damit Du dich auch im "Modernen Design" zurecht findest: » guestoo Back-End-Design

Design/Individualisierung

Design/Individualisierung -

Logo

  • Logo des Events
    Das Logo wird komplett angezeigt und nicht beschnitten. Extrem breite Logos können sehr klein wirken und Probleme machen.
    • Fallback: Logo der Agentur

Farben

  • Event > Design > E-Mail > Variablen
    • Fallback: Agentur > Design > E-Mail > Variablen

Schrift

  • Schrift aus Event > Design 
    • Fallback: Agentur > Design

Bilder

Du kannst über Abschnitte beliebig viele Bidler hinzufügen. Hier geht es nur um die Bilder, die fix im Template vorgesehen sind

  • Eventbild / Bei individuellem Mailing: Bild das im Mailing-Dialog für dieses Mailing hinterlegt wurde (Fallback: Eventbild)
    • Breite 2.000px, die Höhe geht automatisch mit
    • Fallback: Wenn kein Bild hochgeladen wird, bleibt der Bereich leer
  • Hintergrundbild
    • Das Hintergrundbild des Events wird NICHT genutzt

Variablen

  • Für dieses Template werden nicht die Standard-Agenturfarben genutzt, sondern die Farben, die Du am Template (siehe oben "Farben") hinterlegst.
  • Zusätzlich kannst Du diverse weitere Parameter einfach anpassen. Alle Variablen inkl. deren Bedeutung haben wir im nächsten Punkt beschrieben

Verfügbare Variablen

Einfache Anpassung des Templates ohne HTML-Kenntnisse

Verfügbare Variablen - Einfache Anpassung des Templates ohne HTML-Kenntnisse

Schrift

  • Text Schriftgröße & Zeilenhöhe
    Schriftgröße & Zeilenabstand für normalen Fließtext
  • Kleiner Text Schriftgröße & Zeileanabstand
    Schriftgröße & Zeilenabstand für kleinere Texte, die nicht so stark ins Gewicht fallen sollen
    Beispiele: Impressum, Links im Footer der Mail, Zusammenfassende Tabelle
  • Überschrift Schriftgröße & Zeilenhöhe
    Schriftgröße & Zeilenabstand für H1 - Überschrift 1. Graddes
  • Kleinere Überschrift Schriftgröße & Zeilenhöhe
    Schriftgröße & Zeilenabstand für H2 - Überschrift 2. Graddes

Farben

  • Hauptfarbe
    Hintergrundfarbe wenn Mouse über CallToAction Buttons hovert
  • Hauptfarbe Text
    Textfarbe wenn Mouse über CallToAction Buttons hovert
    Hoher Kontrast notwendig zu: "Hauptfarbe"
  • Hauptfarbe: Überschrift
    Farbe für Überschriften 1. - 4. Grades
    Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion", "Trennlinien-Farbe"
  • Akzentfarbe
    Hintergrundfarbe für CallToAction-Buttons (z.B. "Anmelden") oder Rahmen- und Text-Farbe für CallToAction-Buttons zweiten Grades (z.B. Absagen)
  • Akzentfarbe Text
    Textfarbe für CallToAction-Buttons oder Hintergrundfarbe für CallToAction-Buttons zweiten Grades (z.B. Absagen)
    Hoher Kontrast notwendig zu: Akzentfarbe
  • Linkfarbe
    Farbe für Links im Fließtext
    Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion", "Trennlinien-Farbe"
  • Linkfarbe Text
    Falls es Links gibt, die mit einer Fläche hinterlegt sind, hat die Fläche die Linkfarbe und der Text auf der Fläche diese Farbe hier (eher selten)
    Hoher Kontrast notwendig zu: "Linkfarbe"
  • Schriftfarbe
    Farbe der Texte und Informationen
    Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion", "Trennlinien-Farbe"
  • Schriftfarbe Hell
    Farbe für weniger relevante Informationen, die in den Hintergrund rücken sollen
    Beispiel: Impressum, Links im Footer der Mail
    Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion", "Trennlinien-Farbe"
  • Hintergrundfarbe: Seite
    Hintergrundfarbe des Containers in dem der Inhalt steht (am Smartphone nicht sichtbar, da es keinen Rand um den Container gibt)
  • Hintergrundfarbe: Fläche
    Hintergrundfarbe des Hauptbvereiches der E-Mail
  • Hintergrundfarbe: Sektion
    Aktuell nicht verwendet
  • Trennlinien-Farbe
    Aktuell nicht verwendet / Farbe von Trennlinien, die nicht so auffällig sein sollen oder Hintergrundfarbe von Boxen in denen eine relevantere Textinfo steht
  • Hintergrundfarbe: Umfrage
    Nur dann relevant, wenn man eigene Bilder für die Umfrage-Mailings (Smileys, Sterne) nutzt. Ansonsten bitte immer weiß lassen.
  • Schriftfarbe Umfrage
    Die Farbe der Smileys und Sterne im Umfragemailing
  • Hoverfarbe: Umfrage
    Die Farbe der Smileys und Sterne im Umfragemailing wenn die Mouse darüber hovert. Wird nicht immer richtig angezeigt

Rahmen

  • Eckenradius: Standard
    Der Eckenradius des Inhalt-Containers und darin platzierter Bilder.
  • Eckenradius: Akzent
    Der Eckenradius der CallToAction-Buttons
  • Eckenradius Grid-Elemente
    Aktuell nicht verwendet

Schatten

  • Schatten: Oberfläche
    Schatten des Inhalt-Containers auf "Hintergrundfarbe-Seite"
  • Schatten: Grid
    Nicht verwendet / Schatten der Abschnittsbereiche (im Infomailing)
  • Schatten: Haupt
    Wenn Standard-Elemente einen Schatten haben, dann diesen
    Beispiel: Infomailing > Abschnitt Bild&Text > Bild
  • Schatten: Akzent
    Schatten der CallToAction-Buttons ersten Grades
  • Schatten: Aktionen
    Nicht verwendet

Sonstiges

  • Breite: Oberfläche
    Breite des Inhalts-Containers auf Desktop-Rechnern (Empfehlung: Nicht rangehen - kann ggf. Probleme bereiten)
  • Logo: Höhe
    Höhe des Logos (Breite läuft mit)
  • Logo: Ausrichtung
    Ausrichtung des Logos im Kopfbereich (left || right || center)
  •  

HTML-/CSS-Anpassungen

Mehr Einfluss durch CSS-Anpassungen

Wir haben bei dem neuen Template viel Wert auf mehr Individualisierung gelegt.

Wenn Dir die Variablen (siehe oben) nicht reichen, kannst Du jetzt auch ganz einfach das CSS der E-Mail anpassen ohne direkt das HTML anzufassen. Der Vorteil ist, dass der Rest Deiner Mails Update-Fähig bleibt.

So passt Du das CSS an:

  • Gehe zu Agentur > E-Mailtemplates
    (app.guestoo.de/agency/mailTemplates) (Business-Tarif und passende Berechtigung notwendig)
  • Wähle in der Liste "xxx"
  • Kopiere den "Standard Code", passe Ihn an und kopiere ihn wieder bei "Dein Code"
  • Speichern
  • Fertig

Barrierefreiheit

In Progress

Das Template selber ist von der Struktur her Barrierefrei angelegt (bzw. wird aktuell noch dahingehend weiter optimiert).

Ihr müsstet aber darauf achten, dass Eure Farben die entsprechenden Kontraste einhalten und wenn Ihr an den Variablen etwas ändert auch z.B. die Schriftgrößen passen.

Im Gegensatz zum Template für die Eventseite gibt es hier Option getrennte Werte zu pflegen für die reguläre oder kontrastreiche Darstellung - dies wird nicht von allen E-Mailprogrammen unterstützt.

Alle Details zum Thema Barrierefreiheit und wichtige Tipps findest Du hier: guestoo barrierefrei einsetzen

Besonderheiten

Keine Besonderheiten bei diesem Template

Individuelles Design

Wenn der Standard nicht reicht

Falls der Standard nicht reicht, bieten wir die Möglichkeit individuelle Templates zu erstellen. Meldet Euch hierzu einfach bei unserem Support:

support@guestoo.de