Direkt zum Inhalt springen

Styleguide

Bilder

Grundsätzlich sind im Inhaltsbereich wenige, dafür grosszügige Bilder vorzuziehen. Bilder über die volle Inhaltsbreite funktionieren im Responsive Design am besten.
Werden kleine Bilder ausgerichtet verwendet, so sind die unten genannten Formatvorlagenklassen zu verwenden. Besonders bei kleinen Screens kann es hier aber zu unschönen Darstellungen kommen, wenn Bild und Text (besonders lange Wörter) nicht mehr nebeneinander Platz finden.

Bilder über die volle Inhaltsbreite

Bilder über die volle Inhaltsbreite sollten mindesten 900 Pixel (Rendition: img_large.jpg) breit sein, damit sie bei jeder Bildschrimgrösse über die gesamte Breite laufen:

Kleinere, ausgerichtete Bilder

Thumbnail (280 Pixel breit) links ausgerichtet. Formatvorlagenklasse:  alignleft
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

Thumbnail (280 Pixel breit) rechts ausgerichtet. Formatvorlagenklasse: alignright
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Thumbnail (280 Pixel breit) zentriert ausgerichtet. Formatvorlagenklasse: aligncenter 

Bildergalerien

Mit Bildergalerien lassen sich bequem ganze Bildordner ausgeben. Dabei werden – je nach Ausgabegerät – 2 bis 4 Vorschaubilder nebeneinander dargestellt.

Tipp

Damit ein schönes Raster entsteht, sollten alle Bilder einer Galerie möglichst mit  gleicher Grösse, Seitenverhältnis und Format hochgeladen werden.

Slideshows

Slideshows sind primär für den Einsatz auf den Introseiten gedacht und sollten im Inhalt nur sehr sparsam eingesetzt werden. Im Gegensatz zu den Galerien werden hier gleich beim Laden der Seiten grosse Bilder geladen. Um die Ladezeiten (speziell bei Mobile) nicht zu sehr zu belasten, sollten nicht mehr als 6 Bilder in eine Slideshow gestellt werden – und nicht mehr als eine Slideshow pro Seite.

Wichtig bei Slideshows: Die Bilder müssen über die gesamte Inhaltsbreite laufen und exakt die gleichen Dimensionen besitzen, sonst kommt es zu unschönen Effekten.

Tipp

Meist eignen sich Bildergalerien besser um dem Benutzer schnell einen Überblick über mehrere Bilder zu verschaffen und sich gezielt etwas daraus zu vergrössern.

Bilder mit Links

Bilder, die mit einem Link versehen werden, bekommen wie verlinkte Texte einen grünen Rahmen unten. Will man diesen entfernen, so ist dem Link (nicht dem Bild) die Formatvorlagenklasse .no-border mitzugeben (rechter Mausklick, Link bearbeiten, Reiter «Erweitert»).