Add a container with clearfix class around logo component
2.1.8
added title to brand link for accessibility
Durch die Kennzeichnung einer Website erkennt der Besucher auf den ersten Blick den Absender der Site und das Thema bzw. den Zweck.
Die Kennzeichnung besteht aus dem Bundeslogo (Wappen und viersprachige Wortmarke) und der Bezeichnung der Organisationseinheit mit dem dazugehörigen Kürzel (z.B. EDA) oder Kurzform (z.B. MeteoSchweiz).
Diese zwei Bestandteile sind durch eine vertikale Linie voneinander getrennt.
Für Smartphones wird im Header vom Bundeslogo nur das Wappen verwendet. Die Bezeichnung der Organisationseinheit kann abgekürzt werden. Das vollständige Bundeslogo wird im Footer wiederholt.
Das Logo ist ein Markenelement: die Verwendung ist obligatorisch, das Erscheinungsbild darf nicht verändert werden.
<a href="#" class="brand hidden-xs" title="Back to home">
<img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
<h1>Department of the Environment, Transport, Energy and Communications</h1>
</a>
Die definierten Farben dienen der Wiedererkennung der Bundeswebsites, der Auszeichnung von einzelnen Elementen und Interaktionen sowie der Orientierung. Die verwendete Farbpalette ist ein Markenelement: die Verwendung ist obligatorisch.
Es werden drei Farben verwendet: der Rot-Ton des Bundeslogos, der durch einen helleren Rot-Ton ergänzt wird, ein Blau-Ton und eine Palette von Grautönen.
Das Rot findet sich in der roten Linie, die den Header abschliesst, und als Selektionsfarbe in der Navigation und bei Mouseover über Links. Ansonsten wird mit verschiedenen Grautönen gearbeitet. So sind zum Beispiel die Headlines und der Fliesstext in einem dunklen Grauton umgesetzt.
Als Hintergrundfarbe wird ein helles Grau verwendet. Sie wird automatisch auf <body> angewendet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolores adipisci minus nesciunt facilis. Iure, error, facilis, modi, soluta deleniti maiores corporis impedit ducimus laboriosam porro fugiat et esse blanditiis.
<div class="container-main clearfix">
<div class="col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolores adipisci minus nesciunt facilis. Iure, error, facilis, modi, soluta deleniti maiores corporis impedit ducimus laboriosam porro fugiat et esse blanditiis.</p>
</div>
</div>
Bilder im Querformat haben ein Seitenverhältnis von 16:10 (volles Querformat - goldener Schnitt) oder 16:5 (halbes Querformat). Hochformatige Bilder haben kein spezifisches Seitenverhältnis. Wir empfehlen jedoch ein Verhältnis von 2:3
Die verwendeten Icons sind einfarbig und flächig gestaltet. Sie sind als Webfont hinterlegt, der sich als True-Type-Font in den Ressourcen befindet.
Besteht ein Element nur aus einem Icon, so wie die Klasse in einem <span>-Container definiert. Die Funktion des Icons muss in diesem Fall in einem alt-Text erklärt werden: <span class="" alt="vorwärts">...</span>
Accessibility
Damit das Icon-Element von einem Screenreader gelesen werden kann, und/oder wenn es semantisch wichtig ist, soll es mit dem entsprechenden "aria"-Attribut versehen werden. Sonst wird ein aria-hidden="true"-Attribute hinzugefügt.
Je nach Bedarf ist es auch möglich, <span class="sr-only">icon description</span> zu verwenden.
