Grundregeln zur Seitenerstellung

Im Folgenden sind die wichtigsten Leitplanken zur Seitenerstellung zusammengefasst.

• Seiten sollen grundsätzlich nach dem One-Pager-Konzept erstellt werden
• Doorpages
• Die korrekte Ausrichtung der Content-Elemente
• Welches Element ist für welches Grid geeignet?
• Keine doppelte Verwendung von Inhaltselementen
• Die korrekte Formatierung von Headlines
• Farbgebung
• Inhaltsempfehlungen  "Das könnte Sie auch interessieren"
• Vorlagen verwenden

Seiten sollen grundsätzlich nach dem One-Pager-Konzept erstellt werden

Inhaltlich bedeutet dies:

1. Inhalte sind auf einer Seite erfahrbar: Das bedeutet, dass Spendenprodukte, Länder, Schulungen, Dienstleistungen oder Themen nicht in verschachtelten Unterseiten beleuchtet werden sollen, sondern auf einer Seite erfahrbar sein sollten. Dies bedeutet nicht, dass ein One Pager nicht auch Links auf vertiefende Unterseiten haben kann, sondern vielmehr, dass die generelle "Geschichte" einer Seite hintereinanderweg erzählt wird, ohne dass andere Seiten besucht werden müssen. 

2. Führung der User von der Einstiegssituation (i. d. R. eine Problemstellung und/oder deren Lösung) bis hin zu einer Nutzer:innen-Aktion. Dies ist für uns natürlich allem voran die Spende, es können aber auch eine Kontaktaufnahme, die Anmeldung für den Newsletter oder eine Schulung sein. Wichtig ist, dass es uns gelingt, den User vom Seitenanfang bis zur Aktion hin von unserer Absicht zu überzeugen.  Für das Erzählen dieser "Geschichte" stehen uns zahlreiche Content-Elemente zur Verfügung, die zielgerichtet mit Inhalten gefüllt werden müssen. Dabei gilt: eine Seite, eine Conversion. Es sollten keine zwei Ziel-Aktionen, z. B. Spende und Patenschaft auf einer Seite untergebracht werden.

3. Kohärenz/Don't make me think!: Besonders wichtig ist es, die Nutzer:innen beim Aufbau der Seite an die Hand zu nehmen und klar und deutlich durch die Content-Elemente zu führen. Dies geschieht unter anderem durch den konsequenten Gebrauch von Zwischenüberschriften und kurzen Erklärtexten. Es sollen keine "unerläuterten" Elemente verwendet werden. Den Nutzer:innen sollte weitestgehend das "Denken abgenommen" werden, und es ist auf eine logische Abfolge zu achten, ohne dass die Nutzer:innen "stolpern".

Die korrekte Ausrichtung der Content-Elemente

Beim Aufbau ist darauf zu achten, dass die Aneinanderreihung der Content-Elemente möglichst ruhig für das Nutzer:innen-Auge ist und die Leserichtung links nach rechts mit berücksichtigt. Um dies zu gewährleisten, gelten folgende Grundregeln.

Texte (Fließtext)

• Texte sollen auf One Pagern im zentrierten Grid dargestellt werden. So wird die optimale Zeilenlänge von acht bis zwölf Wörtern erreicht. Dies gilt auch für Akkordeon-Elemente.
• Texte sind linkbündig zu setzen. Ausnahme: Kurze Texte, die schnell vom Auge in Gänze erfasst werden können (max. zwei Zeilen), werden zentriert dargestellt, Gleiches gilt für deren Überschriften.

Überschriften für Fließtexte

• Überschriften für Fließtexte müssen grundsätzlich linkbündig gesetzt werden. Es sei denn, der Text ist kürzer als zwei Zeilen (s. o.)

Überschriften bei übrigen Content-Elementen

• Bei den übrigen Content-Elementen werden die Überschriften zentriert dargestellt, es sei denn, zwischen Headline und Element befindet sich ein Text, der zwei Zeilen überschreitet.

Welches Element ist für welches Grid geeignet?

Keine doppelte Verwendung von Inhaltselementen

Gleiche Content-Elemente dürfen im 1er-Grid und im zentrierten Grid nicht direkt aufeinanderfolgen, es sei denn, sie werden im Universal-Slider eingesetzt.

Die korrekte Formatierung von Headlines

Headlines sind strukturgebende Elemente und teilen den Text in Sinnabschnitte ein. Sowohl für den Leser/die Leserin als auch für Screen Reader und Suchmaschinen. Damit letztere die Überschriften auch richtig interpretieren können, werden die Headlines in den Formaten H1 bis H6 ausgezeichnet.

Generell stehen uns zwar sechs Überschriftenformate zur Verfügung, effektiv genutzt werden aber in 99 % der Fälle nur die Überschriften H1 und H2, da unsere Seitenstruktur und Inhalte keine komplexe Auszeichnung erfordern.

Man kann sich also merken:

Die H1 ist die Hauptüberschrift und existiert nur einmal pro Content Page, die übrigen Überschriften werden als H2 ausgezeichnet. In Ausnahmefällen werden für weitere Unterabschnitte Überschriften mit H3-tag angelegt.

Farbgebung

Im System sind verschiedene Farbthemen verfügbar. Für die Verwendung gelten folgende Regeln:

• Die Standardfarben beige, brown, green, magenta, orange und yellow können nach belieben für Seiten und Content-Elemente verwendet werden.
• Blue ist allen Seiten mit Checkout-Charakter vorbehalten (Patenschaftsauswahl, Spendenshop, Infothek ...)
• Black und red sind bestimmten Aktionen vorbehalten und sollen im Regelbetrieb nicht benutzt werden.
• Die Pastelltöne sind dem Patenschaftsmagazin vorbehalten.
• White, dark white, no color und blue bright sind nicht mehr zu benutzen.
• Abgesehen von Landing- oder Doorpages dürfen Farben nicht mehr gemischt werden, d. h. dass z. B. im Bereich der Recommendation Teaser nur noch eine Farbe verwendet werden darf.

Inhaltsempfehlungen  "Das könnte Sie auch interessieren"

Am Ende einer jeden Seite müssen unter der Überschrift "Das könnte Sie auch interessieren" weitere Inhaltsempfehlungen, sog. Recommendation Teaser, in drei Text-Bild-Teaser SITT gepflegt werden.  Bei manchen Seitentypen sind diese bereits im Template vorgepflegt (Pressemitteilungen). Sind diese Teaser noch nicht gepflegt, müssen je nach Seiteninhalt verschiedene Inhalte in den Teasern vorkommen.

Vorlagen verwenden

Es existieren vordefinierte Templates zur Erstellung verschiedener Seitentypen, nämlich: Bestätigungsseite Spende, Emergency-Seite, Fundraising-Themenseite, Aktionsbeispielseite, Länderseite, Newsseite, Pressemitteilung, Projektseite, Reportage und T&C-Schulungsseite. Die Verwendung der Vorlagen wird beispielhaft hier beschrieben: Pressemitteilung, Reportage. Des Weiteren befinden sich in den Vorlagen viele Platzhaltertexte mit weiteren Vorgaben und Tipps zum Ausfüllen.