H1: Maximal 25 Zeichen

Optional steht am Anfang einer Seite ein Headerbild. Ein kurzer Anlauftext von rund 200 Zeichen führt ins Thema der Seite ein und animiert zum Weiterlesen. Der Anlauftext ist optional.
Fließtext ist formatierbar: Es gibt fetten und kursiven Text. Außerdem können wir Dokumente sowie interne und externe Seiten verlinken.
H2: maximal 35 Zeichen
H2 farbig hervorgehoben
Durch die Verwendung von Überschriften geben wir dem Text Struktur. Online gibt es die Möglichkeit, Überschriften mit speziellen HTML-Tags auszuzeichnen, den H-Tags: Bei Amprion verwenden wir H-Tags von H1 bis H4. Die Zahl lässt auf die hierarchische Ebene schließen: H1 ist die oberste Überschriften-Ebene, H4 die niedrigste. Überschriften haben drei Kernziele. Um Auflistungen wie diese darzustellen, eignen sich Bulletpoints:
- Nutzerfreundlichkeit
- Suchmaschinenoptimierung
- Barrierearmut
Fall wir die einzelnen Punkte einer Auflistung – in unserem Fall die Kernziele von h-Tags – ausführlich erklären möchten, verwenden wir das Akkordeon-Modul.
Akkordeon (So sieht eine h3 aus)
Nutzerfreundlichkeit
Bei Textwüsten ohne regelmäßige Absätze und Überschriften verlieren Leser*innen schnell die Lust. Eine gute Struktur dient sowohl der inhaltlichen Gliederung als auch der Übersichtlichkeit des Textes. So erhalten wir das Interesse unserer Leser*innen aufrecht und behalten sie möglichst lange auf unserer Webseite.
SEO
Sowohl für Leser*innen als auch für Suchmaschine sind Haupt- und Zwischenüberschriften relevant. Bei Google gelten sie zwar nicht als direkter Rankingfaktor, allerdings können sie die Positionierung auf den Suchmaschinen-Ergebnisseite dennoch positiv beeinflussen.
Denn: Die Struktur einer Webseite wirkt sich auf das Nutzerverhalten aus. Ein übersichtlicher Text langweilt Leser*innen weniger, was zu einer geringeren Absprungrate führt. Die höhere Verweildauer wiederum gibt Google wichtige Signale für die Bewertung der Seite.
Barrierearmut
Menschen mit Sehbehinderung lassen sich Text via Sprachausgabe vorlesen. H-Tags werden von den entsprechenden Tools erkannt – der Text wird für Zuhörer*innen deutlich nachvollziehbarer.
Das ist eine H4 Überschrift
Tabelle
Eine weitere Möglickeit, Text zu strukturieren, bietet die Tabelle.
Spalte 1 | Spalte 2 | Spalte 3 |
---|---|---|
1.1 | 2.1 | 3.1 |
1.2 | 2.2 | 3.2 |
1.3 | 2.3 | 3.3 |
Counter-Modul
Das Counter-Modul hebt wichtige Zahlen hervor. Es besteht aus einer Zahl, ggf. einer Einheit, einer Headline und einer Erklärung. Dieser Text ist als "Blockqoute" formatiert.
Headlines
brauchen eine ErklärungTextblock
Der Textblock eigenet sich als Intro oder zum hervorheben kurzer, prägnanter Aussagen. Der Text ist fuchsia und zentriert dargestellt. Darunter ist ein "Divider"-Element zu sehen, mit dem unterschiedlich lange Trennlinien eingefügt werden können.
Videos und Bilder
Das Video-Modul
Über das Video-Modul werden Videos eingebunden, die auf vimeo gehostet werden.
Die Videounterschrift ist optional.

Bildunterschrift ist optional und wird kursiv formatiert.
Das Bild-Text Modul
Dies ist das Standard-Modul für die Einbindung von Bildern oder Grafiken, die links, rechts, über oder unter Text platziert werden können. Die Bildgröße im Verhältnis zum Text ist fest vorgegeben. Es sind hoch- oder querformat pflegbar. Text und BIld bleiben bei diesen Modul innerhalb der Standard-Absatzbreite der Seite. Wenn der Text länger ist, umfließt er das Bild.
Das Bild kann verlinkt werden und am Ende des Absatzes kann ein Call-to-Action-Button eingefügt werden.
Das Modul kann auch ohne Text verwendet werden, um Bilder ganzspaltig zwischen Textabsätzen einzufügen.
Wenn man nicht möchte, dass die Überschrift neben dem Bild steht, sondern oberhalb des Text-Bild-Absatzes, muss ein zweites Modul vorangestellt werden, in dem die Überschrift gepflegt wird.
Button-LinkDas Magazin Bild-Text-Modul
Magazin-Überschrift

Das Element wirkt vorallem dann harmonisch, wenn Textmenge und Bildgröße in einem ausgeglichenem Verhätnis stehen. Es wird verwendet, wenn man "magazinigere" Inhalte veröffentlicht, z.B. bei Reportagen, Netzjournal-Storys o.ä., den es läuft links und recht über die Standardbreite der Seite hinaus und lockert den Seitenaufbau so auf.
Zu beachten: in diesem Modul gibt es keine Möglichkeiten Text zu formatieren oder zu verlinken.
Das Galerie-Modul
Die Galerie stellt 1 bis x Bilder dar. Das Seitenverhältnis ist variabel, die Bildunterschrift ist optional.
Neben Fotos können wir auch Infografiken einpflegen. Dabei gilt: Je weniger Text im Bild steht, desto besser können Leser*innen Infografiken am Smartphone erfassen. Erläuterungen setzen wir in die Bildunterschrift. Sollte es dennoch nicht vermeidbar sein, dass Text im Bild steht, sollte der Text mindestens 14 pt groß sein.









Alternativ können Inforamtionen auch über weitere responsive Module wie Akkordeon oder Spot-Image vermittelt werden können.
Spot-Image
Anhand des Spot-Images können Fotos oder Infografiken mit interaktiven Punkten versehen werden. Beim Klick öffnet sich eine kleine Textbox mit einer kurzen Erläuterung. Das Modul bestehen aus folgenden Komponenten
- Hintergrundbild
- Infopunkt(e) (Unicode-Symbol, Farbe, Headline, Text)
- Legende (optional)
Das Magazin Zitat-Modul
Markante Aussagen können wir mit dem Magazin Zitat-Modul hervorhaben. Dazu benötigen wir folgende Komponente:
- Name
- Position
- Zitat
- Bild
- Verlinktungen sind optional
Je kürzer das Statement, desto besser verfängt die Botschaft.

Downloads
Es gibt verschiedene Arten, Downloads anzubieten. Wenn es ein Titelbild gibt und eine "magazinige" Darstellung sinnvoll ist, kann die Datei entsprechend mit einem "Thumbnail-Bild" bereitgestellt werden - mit dem Modul Bildkachel:
Das ist das "einfache" Downloads-Modul für beliebig viele Dateien:
Das ist das Modul Linkliste Publikationen für eine sortierte Bereitstellung von Dateien nach Veröffentlichungsjahren:
2023 | Titel der Publikation |
PDF [1,3 MB] |
2022 | Das ist das Modul "Linkliste Publikationen" |
PDF [1,3 MB] |
Pressefoto zum Download

Pressefoto zum Download
Dies ist das Modul Medien-Download, mit dem Bilddateien bereitgestellt werden können, jedoch keine PDF.
Bildunterschriften sehen hier so aus: Titelbild des NachhaltigkeitsberichtsKontakt
Auf Wunsch können wir zum Abschluss einer Seite oder an anderer geegneter Stelle die verantwortlichen Kontaktpersonen angeben.
Teaser
Anhand von Teasern können weitere Unterseiten vorgeschlagen und verlinkt werden.