Agripedia Design Patterns
Farben
Agripedia-Farben
Agripedia definiert sechs Farben mit den entsprechenden Schattierungen.
Blau
Hauptfarbe
- RGB: 0, 144, 197
- HEX: #0090C5
Schattierung
- RGB: 232, 247, 252
- HEX: #E8F7FC
Grün
Hauptfarbe
- RGB: 130, 186, 80
- HEX: #82BA50
Schattierung
- RGB: 229, 240, 221
- HEX: #E5F0DD
Rot
Hauptfarbe
- RGB: 231, 34, 0
- HEX: #E72200
Schattierung
- RGB: 240, 227, 225
- HEX: #F0E3E1
Orange
Hauptfarbe
- RGB: 193, 121, 41
- HEX: #C17929
Schattierung
- RGB: 240, 230, 218
- HEX: #F0E6DA
Braun
Hauptfarbe
- RGB: 140, 95, 70
- HEX: #8C5F43
Schattierung
- RGB: 247, 235, 228
- HEX: #F7EBE4
Grau
Hauptfarbe
- RGB: 89, 89, 89
- HEX: #595959
Schattierung
- RGB: 214, 214, 214
- HEX: #D6D6D6
Farben richtig nutzen
Die Standardfarbe ist blau.
Rot und grün haben gesellschaftlich eine klare Bedeutung, nämlich negativ und positiv. Deswegen sollte rot dort verwendet werden, wo “etwas Falsche” und grün dort, wo “etwas Gutes” dargestellt werden muss.
So macht man nicht
Rot sollte nicht für positive oder neutrale Inhalte gebraucht werden.
Grün sollte nicht für negative oder gefährliche sachen gebraucht werden.
So macht man
Rot ist für negative Beispiele und Aussagen sowie gefährlichen Sachen reserviert.
Grün immer dort nutzen, wo ein positives Verhalten hervorgehoben werden muss.
Braun, Orange und Grau sind als alternative Farben gedacht und können überall eingesetzt, wo etwas hervorgehoben werden muss, dass weder negativ noch positiv ist.
Titel
Der Titel muss kurz und klar sein, und die wichtigste Stichworte enthalten. Wenn möglich sollen keine Abkürzungen verwendet werden.
Teaser
Der Teaser ist der Text unmittelbar unter dem Titel. Er soll in ca. 400 Zeichnen die wichtigste Botschaft vom Artikel beibringen.
SEO
Das sogenannte Search Engine Optimization (SEO) ist ein Verfahren, das die Sichtbarkeit von einer Webseite in Suchmaschinen verbessert. Das Plugin AIOSEO, welches auf Agripedia installiert ist, hilft uns, die Inhalte der Artikel zu optimieren. Der Plugin wertet den Artikeln aus und gibt eine Punktzahl zwischen 0 (schlecht) und 100 (optimiert) zurück. Für die Evaluation schaut das Plugin, ob die gleichen Stichworte und Sätze im Titel, Teaser und Text (bzw. in den ersten Absätzen vom Text) erscheinen. Deswegen ist wichtig, dass Titel und Teaser mit dem Inhalt vom Text übereinstimmen und die gleichen Stichworte enthalten.
Blöcke
Überschriften
Überschriften sind die wichtigsten Blöcke überhaupt, weil sie den Text strukturieren. Es ist wichtig, dass die Überschriften der hierarchischen Struktur des Textes wiederspiegeln. Eine Überschrift 2 (H2) hat daher eine höhere Bedeutung als eine Überschrift 3 (H3), die Überschrift 3 ist höher als die 4 (H4) usw.
Bitte, keine Nummerierung in den Überschriften! Die Schriftgrössen, die Reihenfolge der Überschriften und der automatische Inhaltsverzeichnis bestimmen die Struktur des Textes.
Der automatische Inhaltsverzeichnis liest die Überschriften im Text und übernimmt deren Struktur. Falls etwas im Inhaltsverzeichnis nicht stimmt, dann liegt das Problem praktisch immer in den Überschriften.
Listen
Es gibt zwei Arten von Listen: geordnet (nummeriert) und ungeordnet (nicht nummeriert).
- Das ist eine unnumeriert Liste
- Eine Liste kann auch Unterpunkte haben.
- Das ist eine nummerierte Liste
- Auch diese Liste hat Unterpunkte
- Die Liste kann beliebig lang sein
- Unendlich lang
Boxen
Boxen dienen dazu, gewisse Elemente im Artikel hervorzuheben. Deswegen sollte der Einsatz von Boxen gut überlegt werden. Auf Agripedia haben wir eigene Boxen definiert.
Das ist eine Box mit Titel
In den Boxen kannst du praktisch alles platzieren: Text, Listen, Bilder, Überschriften usw.
Mit einer anderen Farbe
Du kannst auch die Farbe wechseln. Dafür musst du die ganze Box auswählen (1) und die Farbe auf der Sidebar anpassen (2).
Es ist auch möglich, die Überschrift einer Box zu entfernen. Einfach die Gruppe rund um die Überschrift auswählen, auf die drei Punkte klicken und dann auf “Löschen”.
Bilder
Allgemein zu den Bildern
Qualität
Bilder müssen in der bestmöglichen Qualität hochgeladen werden. Das Redaktionssystem stellt automatisch skalierten Versionen her, die für die verschiedenen Geräten (Desktop, Tablet, Smartphone) optimiert sind. Ausserdem verfügt das Redaktionssystem über eine sogenannte Cache, die Bilder in einem Zwischenspeicher speichert und sie so schneller lädt.
Rechte und Quellenangabe
Das gilt nicht nur für Agripedia, sondern ganz allgemein: Es können nur Bilder veröffentlicht werden, für welche wir die Rechte haben. Entweder wurde das Bild von uns (AGRIDEA-Mitarbeitenden) aufgenommen oder wir haben die Erlaubnis erhalten (z.B. mit einer Lizenz) das Bild verwenden zu dürfen.
Die Quelle muss immer erwähnt werden. Im Normalfall wird die Quelle in der Bildlegende notiert. Für das Titelbild wird das Bild im Impressum notiert.
Titelbild
Am Titelbild werden hohe Ansprüche gestellt, denn schliesslich erscheint es auf der Startseite von Agripedia. Es muss möglichst attraktiv und aussagekräft sein.
Blöcke mit Bildern
Bilder im Lauftext
Bilder können im Lauftext integriert werden. Dafür existiert der Block “Bild”.
Boxen mit Bildern
Bild mit Text horizontal
Falls ein Bild stark mit einem Text verbunden ist, kann eine solche Box verwendet werden. Die Farbe kann – wie das schon der Fall für die normalen Boxen ist – bei Bedarf geändert werden.
Bild mit Text vertikal
Es existiert auch die vertikale Variante. Auch hier kann die Farbe geändert werden. Die Bildlegende wird automatisch im Bild platziert.
Spalten sind auch möglich
Grundsätzlich alles kann mit Spalten layoutet werden. Spalten sehen jedoch schön aus, wenn sie gleich gross sind.
Tabellen
Tabellen sind im Web ein schwieriges Unterfangen, weil sie sich schlecht auf mobilen Geräten darstellen lassen. Auf komplexe Tabelle mit verbundenen Zellen und vielen Spalten soll daher verzichtet werden. Einfache Tabelle können dagegen problemlos eingesetzt werden.
| Spalte 1 | Spalte 2 | Spalte 3 | Spalte 4 |
|---|---|---|---|
| Zelle A1 | Zelle A2 | Zelle A3 | Zelle A4 |
| Zelle B1 | Zelle B2 | Zelle B3 | Zelle B4 |
| Zelle C1 | Zelle C2 | Zelle C3 | Zelle C4 |
Impressum
Für das Impressum haben wir einen eigenen Block definiert. Es stützt sich auf die Box aber es ist schon mit den Impressum-Informationen vorgefüllt. Obligatorisch ist nur “Titelbild”.
Impressum
Titelbild: Vorname Name, Organisation
Grafiken/Illustrationen: Vorname Name, Organisation
Fachliche Mitarbeit:
- Vorname Name, Organisation
- Vorname Name, Organisation
Weiterführende Links:
- Link 1
- Link 2
Bibliographie:
- Bibliografie 1
- Bibliografie 2
Textbreite
Die Textbreite ist in Agripedia standardmässig auf 900 px definiert. Falls es mehr Platz braucht, ist es jedoch möglich die weite Breite (1200 px) zu nutzen. Das kann für grosse Tabellen und Bilder nützlich sein.
| Spalte 1 | Spalte 2 | Spalte 3 | Spalte 4 | Spalte 5 | Spalte 6 | Spalte 7 | Spalte 8 |
|---|---|---|---|---|---|---|---|
| Zelle A1 | Zelle A2 | Zelle A3 | Zelle A4 | Zelle A5 | Zelle A6 | Zelle A7 | Zelle A8 |
| Zelle B1 | Zelle B2 | Zelle B3 | Zelle B4 | Zelle B5 | Zelle B6 | Zelle B7 | Zelle B8 |
| Zelle C1 | Zelle C2 | Zelle C3 | Zelle C4 | Zelle C5 | Zelle C6 | Zelle C7 | Zelle C8 |
| Spalte 1 | Spalte 2 | Spalte 3 | Spalte 4 | Spalte 5 | Spalte 6 | Spalte 7 | Spalte 8 |
|---|---|---|---|---|---|---|---|
| Zelle A1 | Zelle A2 | Zelle A3 | Zelle A4 | Zelle A5 | Zelle A6 | Zelle A7 | Zelle A8 |
| Zelle B1 | Zelle B2 | Zelle B3 | Zelle B4 | Zelle B5 | Zelle B6 | Zelle B7 | Zelle B8 |
| Zelle C1 | Zelle C2 | Zelle C3 | Zelle C4 | Zelle C5 | Zelle C6 | Zelle C7 | Zelle C8 |
Weitere Funktionen
Tooltips
Tooltips sind eine sehr praktische funktion, aber sie sind nicht so einfach anzuwenden. Um Tooltips einzusetzen muss man nämlich mit Ein Shortcode ist ein WordPress-spezifischer Code, mit dem du raffinierte Dinge mit wenig Aufwand tun kannst. Shortcodes können Dateien einbetten oder Objekte erstellen, für die normalerweise viel komplizierter Code in nur einer Zeile erforderlich wäre. arbeiten. Der Shortcode für Tooltip sieht so aus:
[agripedia-tooltip tip="Das ist der Tip, den ich zeigen möchte" img="https://themes.agripedia.ch/wp-content/uploads/2023/11/2023-07-06_Sonnenblumen_072-scaled.jpg"]Das will hervorheben[/agripedia-tooltip]Der Shortcode oben führt zu diesem Resultat: 
Das ist der Tip, den ich zeigen möchte.
tip=”” enthält den Erklärungstext.
img=”” (optional) ist das vollständige URL zu einem beliebigen Bild.