Inhaltsverzeichnis

  1. Einleitung
  2. Initiierung


Einleitung

Das Frontend einer Website verfügt über verschiedene Website-Ansichten. Diese sind nachfolgend erläutert:

AnsichtBeschreibungInitiierung via URL
StandardDies ist die Standard-Ansicht und ist auch bekannt als Desktop-Ansicht.
smallscreen=0
MobileDiese Ansicht wird für die Beantwortung der Anfragen von mobilen Endgeräten genutzt.
smallscreen=1
DruckÜber diese Ansicht wird die Druckausgabe der Website erzeugt.
printview=1
PDFMit dieser Ansicht wird eine Anfrage in Form eines PDF-Dokuments beantwortet. Siehe dazu dynamische PDF-Dokumente.
pdfview=1
AppFür die Integration der Website in andere Anwendungen kann die App-Ansicht genutzt werden.

Tipp: Mit der Realisation eines "blank" Webdesign Templates, welches lediglich den Inhalt/Content ausgibt (ohne Header, Footer, Navigation, etc.), eignet sich eine Seite mit der App-Ansicht für die Verwendung in iFrames oder modalen Fenstern.

appview=1


Die Ausgabe (Layout & Design) jeder Ansicht wird in der Adminkonsole (unter Administration > Layout) gesteuert. Dabei kann für jede Ansicht ein individuelles Layout (= Webdesign Template) hinterlegt werden. Mit Ausnahme der PDF-Ansicht (bei welcher ein PDF-Dokument ausgegeben wird), erfolgt die Ausgabe bei jeder Ansicht in Form von HTML-Code.


Initiierung

Die Initiierung der meisten Ansichten erfolgt manuell über das jeweilige URL-Argument gemäss obiger Liste. Die Druck-Ansicht einer Website wird z.B. über das URL-Argument printview=1 initiiert. Beispiel:

https://www.example.com/de/?printview=1

Erfolgt keine manuelle Initiierung einer Ansicht (durch Übermittlung des entsprechenden URL-Arguments), so wird für die Beantwortung einer Website-Anfrage die Standard-Ansicht verwendet. Falls die Anfrage von einem mobilen Endgerät stammt, so wird für die Beantwortung der Anfrage die Mobile-Ansicht verwendet. Dies erlaubt die Auslieferung von zwei komplett unabhängigen Layouts auf normalen Desktop-Geräten (Standard-Ansicht) und mobilen Endgeräten (Mobil-Ansicht). Die Identifikation, ob es sich um ein mobiles Endgerät handelt, erfolgt über den User-Agent des Endgerätes.


Tipp: Häufig soll die Ansicht für mobile Endgeräte dem gleichen Design (CI/CD) wie der Ansicht für Desktop Endgeräte entsprechen, jedoch einfach für die Anzeige auf mobilen Endgeräten optimiert sein. In diesem Fall wird empfohlen für beide Ansichten (Standard & Mobile) das gleiche Webdesign Template einzusetzen, welches mittels Media Queries responsiveness implementiert und sich damit automatisch an die jeweilige Displaygrösse des Endgerätes anpasst. Ein prägnanter Einstieg ins Thema Media Queries bietet der Artikel Responsive web design basics auf web.dev. Umfassendere Informationen sind beim Mozilla Developer Network zu finden.