Bildwortmarke
Platzierung
Header mit Identitätsbereich und Bildwortmarke.
Die Bildwortmarke steht immer im Weißraum. Sie wird unter Berücksichtigung ihrer Schutzzone oben links im Header der Seite platziert und kennzeichnet damit den Absender der Website. Die Mindestgröße beträgt 135 Pixel in der Höhe. Die Bildwortmarke wird mit einem Link zur Startseite versehen und ermöglicht so ein schnelles Navigieren aus tieferen Ebenen heraus.
Weitere Informationen und Ressourcen finden Sie in der Beschreibung der Header-Komponente.
Auf Kampagnenseiten, an denen mehrere Ressorts, Bundesbehörden oder Institutionen beteiligt sein können, wird die Bildwortmarke im Footer platziert.
Animation der Bildwortmarke/Minimalversion
Optional zur feststehenden originären Bildwortmarke kann auf Websites, auf denen ein Sticky Header zum Einsatz kommt, eine animierte Logoversion (auch „Responsive Logo“) erstellt und verwendet werden. In der Animation transformiert die originäre Bildwortmarke zur „Minimalversion“, die dann im Sticky Header stehen bleibt. Die Minimalversion der Bildwortmarke wird ausschließlich in Kombination mit der originären Bildwortmarke verwendet.
Originäre Bildwortmarke/hier beispielhaft Auswärtiges Amt (oben) und Minimalversion (unten)
Bei der Transformation von originärer Bildwortmarke zur Minimalversion wird der Flaggenstab in seiner Höhe soweit verkleinert, bis dessen Unterkannte mit der Unterkante des Adlers abschließt. Gleichzeitig wird der Text weich ausgeblendet. Die Transformation von Minimalversion zu originärer Bildwortmarke verläuft in umgekehrter Art und Weise. Alle in der originären Bildwortmarke bestehenden Abstände bleiben während der Transformation und auch danach in der Minimalversion bestehen.
Die Umsetzung der interaktiven Animation muss für jede Website individuell programmiert werden. Als Grundlage für die Umsetzung sollte die jeweilige SVG-Datei aus dem Bildwortmarken-Archiv (Logokoffer) verwendet werden. Eine Beispielumsetzung findet sich innerhalb der Header-Komponente in der Component Library. Der Code zur Animation der Bildwortmarke (CSS und JavaScript) ist über die Developer-Tools des Browser zugänglich.