Veröffentlicht am 7. Januar 2026

Master-Guidelines für Livingdocs

Im Folgenden wird dargestellt, wie die verschiedenen Komponenten von Livingdocs auf der BAFU-Website korrekt und gemäss den BAFU-Guidelines eingesetzt werden.

Finden von Inhalten

Das Finden von Inhalten funktioniert in Livingdocs nicht gleich, wie man sich das von Google gewohnt ist. Die Suche entspricht nicht derselben Logik. Deshalb sind folgend ein paar Tipps und Tricks aufgelistet, die beim Suchen helfen.

Interne Links (BAFU-Seiten)

Links, die auf interne Seiten des BAFU verweisen, müssen in der Komponente ‹PARAGRAPH› als Hyperlink erstellt werden. Der Link ist der Name des Titels der Seite, zu der ein Link erstellt werden soll. Interne Links dürfen nie als externe Links mit der URL https://www.bafu.admin.ch eingefügt werden, sondern immer mit dem Aufruf des Seitentitels/Seite.

Nachfolgend ein paar Beispiele für interne Links (die immer im selben Fenster öffnen):

Kunststoffe in der Umwelt

Landschaftsqualität in der Siedlung

Wasserhaushalt heute

Externe Links

Bei externen Links muss man unterscheiden zwischen Links auf eine admin.ch-Seite und Links auf allen anderen Domains.

Links auf eine Seite der Bundesverwaltung (admin.ch) werden immer in der zentralen Linkverwaltung von Livingdocs erfasst. Nur so ist sichergestellt, dass defekte Links effizient geflickt werden können.

NOTA BENE: Bevor ein neuer Link hinzugefügt wird, soll unbedingt geprüft werden, ob er nicht bereits vorhanden ist. Suche dazu im Backend unter der Rubrik «Links» nach dem Link. Nur so lassen sich doppelte oder dreifache Einträge vermeiden. Das ist äusserst wichtig, denn später kann man nicht herausfinden, welcher Link wo verwendet worden ist.

Weil admin.ch-Links zentral erfasst werden, müssen sie immer via die Komponente ‹MANUAL LINK LIST› hinzugefügt werden. Das bedeutet, dass sie am Ende des betreffenden Absatzes eingesetzt werden und nicht im Lauftext.

NOTA BENE: Immer die folgende Formel nutzen Herausgeber (z. B. Amt): Titel der Seite.

Nachfolgend ein paar Beispiele:

Bei FedLex Links (auf Gesetze und Verordnungen) bitte immer folgende Formel nutzen: Titel des Gesetzes/der Verordnung (Abkürzung die auf FedLex in Klammern steht, z. B. CO2-Gesetz). Nachfolgend ein paar Beispiele:

Hinweis: Wir verwenden nur dern Kurztitel der Verordnung, nicht den langen Titel dieser Verordnung (wäre hier «Verordnung über die Sanierung von belasteten Standorten»).

AUSNHAME: Für Links, die auf Medienmitteilungen verweisen, gilt diese Regel nicht. Sie können stattdessen direkt im Paragrpah als Hyperlink eingefügt werden. Bitte verwenden Sie stets das folgende Format: Datum – Titel der Medienmitteilung. Hier einige Beispiele:

13.04.2026: Treibhausgasinventar 2024 – Emissionen leicht gesunken

Externe Links auf Nicht-admin.ch  müssen nicht zentral erfasst werden und können als Hyperlink im Text (Fliesstext im Paragraph) eingefügt werden. Die Bezeichnung muss in diesem Fall ausdrücklich verständlich sein, wie im folgenden Beispiel:

«Die Forschenden haben unterdessen mindestens 34 endemische Arten in der Schweiz benannt; weitere könnten hinzukommen. Zehn dieser Arten fanden sie jedoch nicht in den Seen, sondern nur noch in Archiven – wie etwa in der Steinmann-Sammlung. Die traurige Erkenntnis davon ist, dass knapp ein Drittel der Schweizer Felchenarten bereits ausgestorben ist.»

Auf der Seite Untersuchung und Sanierung sieht man ein weiteres Beispiel für die korrekte und sinnvolle Verwendung von externen Nicht-Admin-Hyperlinks im Text.

NO GO: Hyperlink im Text dürfen nicht mit nichtssagenden Bezeichnungen wie «für mehr Informationen hier klicken» oder «weiter» eingefügt werden, sondern immer mit einer eindeutigen Bezeichnung, die möglichst dem Titel der verlinkten Seite entspricht. Richtig ist die folgende Formel Absender: Titel der Seite (Unterseite) oder Absender (Homepage). Nachfolgend ein paar Beispiele innerhalb eines Fliesstextes und einzelne Links:

Allenfalls können Ihnen auch die kantonalen Altlasten- und Bodenfachstellen weiterhelfen.

UN: What is technology development and transfer?

Canton de Genève: Gaspillage alimentaire

Conférences des Nations unies sur les changements climatiques (United Nations Climate Change Conference)

Festival der Natur

Text

Ein normaler Absatz enthält Text. Es gibt auch einige Formatierungsmöglichkeiten wie fett, kursiv, Lower- und Uppercase und das Einfügen von ‹«Sonderzeichen »› ½ ⊕.

Im Lauftext können Links auf interne oder externe Seiten hinterlegt werden (siehe oben bei Links).

Für die Überschriftengestaltung stehen die Komponenten Title (H1) sowie Heading (H2) bis Heading (H4) zur Verfügung. Es dürfen keine Titelgrössen übersprungen werden (also nicht nach H2 direkt ein H4-Titel).

Der Lead-Text soll eine kurze prägnante Zusammenfassung der Inhaltsseite sein. Hier ist es wichtig für Search Engine Optimization SEO, die richtigen Keywords einzusetzen (vor allem im Titel H1 und im Leads). Die Lead-Inhalte werden defaultmässig für den Teasertext in den Metadaten wiederverwendet.

NOTA BENE: Die H1 ist der Seitentitel und darf pro Seite nur einmal verwendet werden und ist automatisch in der Lead-Sektion zuoberst enthalten. Für Zwischentitel immer die Komponente Heading H2 nutzen.

NOTA BENE 2: Auf Livingdocs kann man Überschriften (Headings) und Paragraph umwandeln >  die Komponente anklicken und im Formatierungsmenü unter ‹TRANSFORM COMPONENT› die gewünschte Komponente auswählen. Vor der Umwandlung darauf achten, dass eine eventuelle Fett-Formatierung entfernt wird.

Anker-Navigation

Die Ankernavigation ist nicht anders als ein Inhaltsverzeichnis (Table of Contents, ToC) und soll die Navigation auf der Seite erleichtern sowie einen klaren und strukturierten Überblick über die verfügbaren Inhalte bieten. Das ToC spiegelt die ‹HEADING H2›auf der Seite.

NOTA BENE: Eine Anker-Navigation kann nur erstellt werden, wenn alle Textelemente in einer ‹SECTION› eingefügt sind.

How-to #1: Anker Navigation erstellen

Files (PDF, XLS, zip)

Dokumente, die auf einer Seite zur Verfügung gestellt werden, werden mit der Komponente ‹MANUAL DOWNLOAD LIST› verlinkt. Nachfolgend ein paar Beispiele:

Der Name einer Datei kann nach dem Hochladen auf LD nicht mehr geändert werden. Wir empfehlen euch, die Dateien auf eurem Desktop VOR dem Heraufladen umzubenennen. Am besten den Titel des Dokuments verwenden, immer in der entsprechenden Sprache. Folgendes Beispiel:

D files name:

Der_Biber_2025.pdf

F files name:

Le_castor_2025.pdf

I file name:

Il_castoro_2025.pdf

NOTA BENE: Auch bei mehreren Downloads untereinander für jedes PDF eine neue Komponente ‹MANUAL DOWNLOAD LIST› einsetzen, weil man innerhalb dieser Komponente die PDF nicht mehr verändern/verschieben/entfernen/hinzufügen kann.

NOTA BENE 2: PDF als Links einzubinden ist strikt verboten.

How-to #2: Dokumente einsprachig erfassen

How-to #3: Dokumente mehrsprachig erfassen

How-to #4: Sprachversion hinzufügen

How-to #5: PDF ersetzen

Publikationen

BAFU-Publikationen können direkt zwischen den Paragraphen eingebunden werden, gleich wie normale Files, mittels des ‹MANUAL DOWNLOAD LIST›. Nachfolgend ein Beispiel:

Bei wichtigen Publikationen, die Gewicht haben und mit dem Cover abgebildet werden sollen, kann man die Komponente ‹MANUAL PUBLICATION TEASER› am Ende der Seite ausserhalb der ‹SECTION› nutzen.

Nachfolgend ein Beispiel (das nun ganz unten eingefügt ist, damit die Section nicht unterbrochen wird):

NOTA BENE: Wenn die Komponente nicht am Ende des Abschnitts (‹SECTION›) eingefügt wird, wird das Ankernavigation (ToC) unterbrochen. Die Ankernavigation bleibt ab diesem Punkt nicht mehr «sticky».

Images

Damit Fotos überall (als Teaser, im Header- und Content-Bereich) eingesetzt werden können, müssen sie im Format 1200x675 Pixel hochgeladen werden (Format 16:9). Kleinere Formate werden aufgeblasen und werden unscharf, grössere Formate verursachen zu lange Ladezeiten.

Grafiken werden nur im Content-Bereich eingesetzt. Die Breite ist dieselbe wie bei Fotos (1200px), die Höhe (resp. das Seitenverhältnis) ist frei und kann je nach Ausrichtung der Grafik definiert werden.

Metadaten

  • Title: Obligatorischer Titel des Bildes
  • Alt-Text: Obligatorisch für die Barrierefreiheit gemäss Webrichtlinien (W3C). Maximum: Beschreiben was auf dem Bild sichtbar ist, damit sich Sehbehinderte eine Vorstellung vom Bild machen können. Minimum: Titel des Bildes einkopieren.
  • Caption: Bildbeschreibung. Kurz gefasste Beschreibung des Bildes. Jedes Bild sollte eine Caption haben. Die Description wird von allen Bildkomponenten nur in Slideshows dargestellt, deshalb dieses Feld nicht verwenden (siehe Screenshot unten).
  • Copyright: Bei Images obligatorisch. Vor die Eingabe wird automatisch ein Copyrightzeichen gesetzt. Das Wort Copyright muss also nicht in dieses Feld eingetragen werden.
  • Backend Filter General: Obligatorisch. Eigenes Thema auswählen.
  • Backend Filter Images: Obligatorisch. Bildtyp auswählen.

NOTA BENE: Das Feld Description bei Bildern nicht verwenden. Das Feld Caption wird im Gegensatz zur Description in allen Bildkomponenten dargestellt.

Bildbearbeitung in GIMP

HOW'S TO #4: Bilder mehrsprachig erfassen

Kasten: Notification Container und Accordion Container

Um Inhalte im Lauftext hervorzuheben (mit einem farblichen Hintergrund), gibt es die Komponente ‹NOTIFICATION CONTAINER›. Dieser Container besteht aus einem Titel (H3) und weiteren Komponenten. Es gibt fünf Typen solcher Notification Container: Info, Warning, Success, Error und Hint. Im BAFU benutzen wir ausschliesslich den Type Info (mit blauem Hintergrund) für einen aktiven Hinweis und den Type Hint als grau hinterlagte Infobox.

Im Unterschied zum Accordion Container ist der Notification Container immer geöffnet.

Info: aktiver Hinweis

Lorem ipsum.

Hint: Infobox

Lorem ipsum.

Tabelle

Tabellen sollen möglichst vermieden werden. Es sind andere Darstellungsformen vorzuziehen, z.B. strukturierte Listen. Aus Gründen der Barrierefreiheit sollten Tabellen möglichst nicht eingesetzt werden.

Falls Tabellen eingesetzt werden, bitte auf folgende Punkte achten:

  • Für die neuen Webauftritte gilt «mobile first». Auf mobile devices sind Tabellen mit maximal zwei Spalten lesbar, ohne dass man horizontal scrollen muss. Horizontales Scrollen reduziert die Usability.
  • Um horizontales Scrollen zu vermeiden, dürfen die Spalten nicht zu breit sein.
  • Tabelle nur auf weissem Hintergrund
  • Bei mehrstufigen Tabellen maximal zwei Stufen, denn jeder Einzug reduziert die Anzahl Zeichen pro Zeile und damit die Lesbarkeit
  • Aus Sicht Barrierefreiheit: Keine leeren Zellen einfügen (Vermischung Layout / Tabelle)
  • Aus Sicht Barrierefreiheit: Sonderzeichen wie Pfeile vermeiden

Wenn eine Tabelle unvermeidbar ist, anbei eine klassiche Möglichkeit.

NOTA BENE: Falls eine Tabelle mehr als 4 Spalten beinhaltet, muss sie als Excel oder PDF File hochgeladen werden.

Live-Beispiel eine Excel Tabelle im Paragraph mit dem Modul ‹TABLE›

Live-Beispiel einen Tabelle im PDF Form (als File).

Teaser

Teaser können sowohl auf der Startseite eines Themas (Teil Fokus bei jeder Startseite) als auch auf einer Inhaltsseite eingesetzt werden. Ihre Hauptfunktion besteht darin, eine bestimmte Information oder ein Thema hervorzuheben und für die Nutzerinnen und Nutzer sichtbar zu machen.

Das Ziel eines Teasers ist es, die Nutzerinnen und Nutzer zum Klicken zu motivieren und sie dazu einzuladen, ihre Journey auf der Website fortzusetzen. Der Teaser dient somit als Einstieg zu weiterführenden Inhalten, Themenseiten und unterstützt die Nutzer dabei, ihrer User Journey auf der Website intuitiv zu folgen

Ein Teaser braucht immer zuerst die Komponente ‹TEASER CONTAINER›. Ein interner Link innerhalb der BAFU Website erfordert die Komponente ‹TEASER›, während ein Link zu einer externen Website die Komponente ‹EXTERNAL TEASER› erfordet. Der erste wird automatisch generiert (Bild + Text aus dem Metadaten der seite), der zweite muss entweder mit Text – 246 Zeichen (inkl. Leerschlag), Titel und Link Manuel ausfüllen.

Teaser zu einem internen oder externen PDF

Ein PDF sollte immer in einem Kontext (auf einer Seite zum passenden Inhalt oder in den «Weiterführenden Infos») verlinkt werden. Ist dies nicht möglich, weil beispielsweise ein News-Teaser direkt dorthin linken soll, kann dies mit einem External Teaser gemacht werden (Beispiel unten im Teaser Container an dritter Position: Teaser «Erläuterungen zur Änderung der Jagdverordnung»). Titel und Teasertext müssen manuell eingetragen werden. Eine URL zu einem Internen Dokument ist immer nach folgendem Schema aufgebaut:

https://www.bafu.admin.ch/dam/de/sd-web/WctIwPG95XgH

Der letzte Teil in diesem Beipsiel «WctIwPG95XgH» ist die ID des jeweiligen Files und unterscheidet sich von File zu File, aber nicht von Sprache zur weiteren Sprache. Bei anderen Sprachen muss nur das /de/ durch /fr/, /it/, oder /en/ ersetzt werden.

Auf die direkte Verlinkung von externen PDFs sollte möglichst verzichtet werden. Ansonsten ist der Herausgeber auch den Link-Regeln des BAFU zu nennen.

7. Januar 2026

Master-Guidelines für Livingdocs

Im Folgenden wird dargestellt, wie die verschiedenen Komponenten von Livingdocs auf der BAFU-Website korrekt und gemäss den BAFU-Guidelines eingesetzt werden.

Mehr über «Master-Guidelines für Livingdocs»

Teaser auf eine Externe Website

En 2026, ce sera la 15ème édition de la Fête de la Nature! Une collaboration avec Ambroise Héritier, illustrateur valaisan, est en cours pour proposer une série d'illustrations originales pour parler de protection de la nature.

Mehr über Teaser auf eine Externe Website

Erläuterungen zur Änderung der Jagdverordnung

Teil 1 «Regulierung von Wölfen und Steinböcken»

Mehr über Erläuterungen zur Änderung der Jagdverordnung

Manual Publication Teaser

Der Manual Publication Teaser soll in der regel ganz am Schluss der Seite eingefügt, damit die Section (und der ToC) nicht unterbrochen wird.

29. Mai 2011

Gefährdete Arten in der Schweiz

Synthese Rote Listen, Stand 2010

PDF5.81 MB

Metadaten

Eine der wichtigsten Metadaten ist der sogenannte ‹BACKEND FILTER GENERAL›. Er muss für alle Elemente - Seiten, Bilder, Dokumente - erstellt werden. Dank dieser Filter werden sämtliche Seiten, Bilder, Dokumente, die in Bezug zu diesem Thema stehen, eingeordnet. Er dient als Datenorganisation im Backend und ist daher zentral, um relevante Inhalte schnell wiederzufinden.

Event Seite

Das Template der Eventseite unterscheidet sich von dem einer regulären Seite. Auf dieser Seite können keine Download-Links hinzugefügt werden. Falls Dokumente vorhanden sind, müssen diese in Form einer einzigen .zip-Datei gebündelt werden. Diese Datei kann anschliessend in den Metadaten der Seite hinterlegt werden.

Auf der Eventseite Webinar Förderprogramm Adapt+ findet ihr ein konkretes Beispiel.