Best Practice Layout

  • Layout bestimmt das Erscheinungsbild der Site
    • Struktur der Seiten
      • Kopfbereich
      • Navigationsbereiche
      • Inhaltsbereiche
      • Fussbereich
    • Farbschema
    • grafische Elemente (Logo & Deko)
    • Typographie
Layout analysieren - Der Contao Röntgenblick
  • WC: "Einfach mal loslegen..."
  • Best Practice: "Think first, act then"
    • Den Contao-Röntgenblick entwickeln
    • Umsetzbarkeit eines extern gelieferten Layouts prüfen
    • Grobe Aufteilung des Layouts in Bereiche
      • #header
      • #main
      • #footer
    • Finetuning: Bereiche weiter unterteilen 
Seitenstruktur

Eine Seite vom Typ "Startpunkt einer Webseite" wird ab Version 2.11 (siehe News und Changelog dazu) als zwingend vorausgesetzt bei der Erstellung der Seitenstruktur. Ein Aufbau einer Seitenstruktur ohne diesen Seitentyp ist nicht mehr möglich.

  • Immer definieren
    • Seite vom Typ „Startpunkt einer Website"
    • Sprachen-Fallback
Startpunkt einer Website - Sprachenfallback

Seitenstruktur ohne Seite vom Typ "Startpunkt einer Webseite"

11

Seitenstruktur mit Seitentyp "Startpunkt einer Webseite"

Templates

Ändern? Nur wenn es wirklich sein muss.

„Template" hat sich im allgemeinen Contao-Sprachgebrauch für alles etabliert, was irgendwie mit Vorlage zu tun hat.
Das offizielle Contao-Handbuch, Seite 287

Template Definitionen
Contao-Handbuch Beispiel Alternative
Frontend-Template music_academy.sql Website-Template
Layouts fe_page.* Seitentemplate
Views mod_newslist.* Modultemplate
Partials layout_short.* Subtemplate

Das .* bei den Dateinamen für Templates steht für .xhtml oder .html5.

Das Ausgabeformat: XHTML oder HTML5

Ausgabeformat im Seitenlayout definieren

XHTML -> Templates mit Endung *.xhtml
HTML -> Templates mit Endung *.html5

HTML5 und alte Browser

IE 7 und IE 8 verstehen Elemente wie <header> nicht.
Das JavaScript "html5shim" löst das Problem.
Potenzielles Problem: IE 7 und IE8 ohne aktiviertes JavaScript.

XHTML -> Templates mit Endung *.xhtml

Seitenlayout-Ausgabeformat-XHTML

HTML -> Templates mit Endung *.html5

Seitenlayout-Ausgabeformat-HTML5
Das Frontend-Template
  • Frontend-Template = Website
    • Seitenstruktur
    • Theme
      • Seitenlayouts
      • Frontend-Module
      • Stylesheets
      • Layout-Dateien in /tl_files
      • Templates in /templates
    • Inhalte
    • Mitglieder und Benutzer
    • Erweiterungen
  • WC: Jedes Mal mit einer leeren Leinwand anfangen
  • Best Practice: Theme oder Frontend-Template als Basis einsetzen 
Das Seitentemplate
  • WC: Jedes Mal ein eigenes Seitentemplate erstellen
  • Best Practice
    • Contao CSS-Framework
      • fe_page.tpl einsetzen
      • ggf. zusätzliche Layoutbereiche
      • ggf. Seitentemplate anpassen
    • Anderes CSS-Framework
      • fe_page.tpl an HTML-Struktur anpassen
      • Ein Seitentemplate pro Layout 
Templates ändern (Worst Case)
  • Templates im Systemordner
    • Im Editor öffnen und ändern.
    • Speichern.
    • Funktioniert. Scheinbar.
  • Nachteile
    • Umständlich
    • Gefährlich
    • Nicht update-sicher 
Templates bearbeiten - Worst Case
Templates ändern (Best Practice)
  • Templates update-sicher anpassen
    • Backend-Modul Templates
    • Neues Template erstellt Kopie im Ordner /templates
    • Änderungen im Template kommentieren!
    • Name des Templates ggf. ändern
  • Nach Contao-Update: Kopie mit Original vergleichen
  • Nur wenn es wirklich sein muss... 
Templates ändern (Best Practice)
nach oben