Alles wissenswerte steht im Online-Handbuch für Redakteure:
https://contao.org/de/manual/3.1.html

Folgende Angaben sind jedoch individuell für Recom:

0. Grid-System

Zum grundlegenden Verständnis werden hier die genutzten Klassen erklärt. Wenn ein Redakteur vorhandene Artikel kopiert, einfügt und inhaltlich anpasst und keine neuen Artikel anlegt, kann er auf die Eingabe von Klassen komplett verzichten!

Das Grid-System (der Raster) kann auf der Website mit der Tastenkombination Command+G (Mac) oder STRG+G (Win) angezeigt werden. Es gibt drei Raster:

• Desktop: 12 Spalten mit einem gleichmässigen, prozentualen Spaltenabstand. Das Prefix lautet d. Die Klasse für die erste Spalte lautet zum Beispiel d1, für die letzte Spalte d12, für alle Spalten d-all, für die erste bis achte Spalte d1-d8.
  
  
• Tablet: 2 Spalten mit einem gleichmässigen, prozentualen Spaltenabstand. Das Prefix lautet t. Die Klasse für die erste Spalte lautet t1, für die zweite Spalte t2, für alle Spalten t-all.
  
  
• Mobile: 1 Spalte. Das Prefix lautet m. Die Klasse heisst immer m-all.

Beispiel: Klassenangabe für einen Artikel, der sich auf dem Desktop über die Spalten eins bis acht zieht und Mobile und Tablet die gesamte Breite einnehmen soll: d1-d8 t-all m-all

Kombination von Grid-Klassen:

• *-all
  Spannt sich über die gesamte Breite des Grids, z.B. d-all, t-all, m-all
  
  
• *-hide
  Versteckt das Element. Zum Beispiel soll ein Element auf dem Mobiltelefon nicht gezeigt werden: m-hide
  
  
• *-pad
  Erzeugt links und rechts einen halben Spaltenabstand ausserhalb des Elements.
  
  
• *-padfull
  Erzeugt links und rechts einen ganzen Spaltenabstand ausserhalb des Elements.
  
  
• *-padin
  Erzeugt links und rechts einen halben Spaltenabstand innerhalb des Elements.
  
  
• *-padinfull
  Erzeugt links und rechts einen ganzen Spaltenabstand innerhalb des Elements. Zum Beispiel werden alle Artikel auf Detailseiten mit folgenden Klassen versehen: d1-d8 d-padinfull t-all m-all

1. Bilder

• Bilder: Alle Bilder sollten mindestens doppelt so gross in die Dateiverwaltung geladen werden wie im Bildelement angegeben ist. Dann ist auch ein scharfes Bild auf Bildschirmen mit hoher Pixeldichte gewährleistet (Retina-Dislays).
  
  
• Hintergrundbilder: Bitte die Hintergrundbilder in der Dateiveraltung in den Ordner "background" hochladen und genau dem Seitennamen ensprechend benennen (alles kleingeschrieben, keine Umlaute oder Leerzeichen im Dateinamen). Die Größe beträgt 2560x1440px. Bitte die Vorlage verwenden, da der Mittelteil des Fotos weiss 
  sein sollte!
  
  
• Bilder in der Subnavigation: Diese Bilder müssen nur in der jeweiligen Seite des Hauptmenüpunktes angegeben werden und vererben sich dann auf die Unterseiten.

2. Titel im Submenü

• Die Titel im Submenü werden in den Meta-Tags der Bilder festgelegt. Dateiverwaltung > Navigation > Bild auswählen > Meta-Angabe bearbeiten

3. Tabellen

• Die erste und zweite Spalte wird immer angezeigt. Die weiteren Spalten mobil und auf Tablet portrait nur nach Auswahl über Menü. Desktop zeigt alle Spalten. Bitte auf die Breite der Tabelle achten, damit die Tabelle auf der Desktop-Ansicht nicht abgeschnitten wird.

4. Videos:

• Bitte nur über Youtube oder Vimeo einbetten (als iframe). Breite 620px, Höhe entsprechend. Die Videos werden automatisch für Tablet und Mobile skaliert.
  
  
• Für Youtube-Videos auf der Startseite, die aus dem Accordeon heraus aufgehen sollen, muss der Link aus dem Teilen > Einbetten Code verwendet werden (NICHT der LInk aus dieses Video-Teilen!!!). Beispiel Code: 
  
  <iframe width="560" height="315" src="//www.youtube.com/embed/lqT_dPApj9U" frameborder="0" allowfullscreen></iframe>
  
  Daraus verwenden: http://www.youtube.com/embed/lqT_dPApj9U oder, wenn das Video gleich abgespielt werden soll den Link ergänzen um: ?&autoplay=1

5. Text-Struktur 

• Der erste Inhalt auf einer Seite beginnt mit einer Überschrift H2, die Ü*berschrift H1 wird automatisch in den Quelltext gesetzt und entspricht dem Seitentitel.
• Keywords werden übrigens im Artikel und NICHT in der Seite eingegeben. Gibt es mehrere Artikel und werden dort jeweils Keywords eingegeben, dann werden alle Keywords aus allen Artikeln genutzt. Keywords sind jedoch kaum noch SEO-relevant.
• Optionale Silbentrennung mit ­

1. Slider:

• aus assets/../jquery.touchSwipe.min.js / a entfernt: excludedElements:"button, input, select, textarea,a, .noSwipe";
• Hinzugefügt für Paging im Slider in js_caroufredsel.html5:
  echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) { 
  return "<a href=\"#\"><span>●</span></a>"; }';

2. Templates fe_page:

- background-images über den body-tag

3. Grid

• über https://gridsetapp.com
• desktop mit 980px, 20px gutter, 60px columns
• mobile 320px und 20px gutter, 60px columns
• Anpassungen der media queries

4. Download Icons

• dca.config angepasst
• Icons abgelegt in /html/assets/contao/images/recom-icons (vorher sichern und neu kopieren- nicht update sicher!)
• Icon Vorlagen als PSD in Ordner Recom, erstellt aus http://icomoon.io/ Ultimate Collection, kleine Icons 16px, Retina-Icons 32px