Contao3 - wie in das responsive Verhalten bei kleineren Display-Größen eingreifen?

[Schnippel]

Hi Leute,

Wie kann ich bei Contao 3 in das responsive Verhalten eingreifen?

Bisher (also vor Contao 3) waren meine Websiten überall gleichschön darstellbar,
egal ob auf dem Desktop, dem Tablet oder dem SmartPhone.
Auf demSmartPhone war die Ansicht zwar etwas klein, aber mit Doppelt-Tipp
läßt sich ja die Ansicht vergrößern, sodaß man auch die Links gut bedienen kann.

Beispielseite: http://www.raumausstatter-schneider-quirla.de



Mit Contao 3 hab ich da noch meine Probleme mit einer unkontrollierten Darstellung, sobald man den Browser verkleinert.

Beispiel-Bilder:

hier noch alles ok (Desktop)
xx30.jpg

hier Chaos im Layout beim ersten Viewportsprung (oder wie man das nennt beim Verkleinern des Browserfensters)
xx31.jpg

Für die Live-Ansicht : Test-Seite im Netz

Für mich stellt sich jetzt die Frage, WIE bekommt man das Problem in den Griff?
Ich hab da auch schon mal was von "adaptiven" Design gelesen.


Meine Zielvorstellungen wären folgende:

Website für Desktop erstellen, ohne das sich das Layout bei kleineren Displays verändert.
Laut meiner Erfahrung passen 960px Breite gut für Desktop und das iPad. Auf beiden
gut darstellbar (mit alten Contao-Versionen).

Frage 1:

Wie kann man das veränderte Verhalten bei kleineren Display-Größen in
Contao 3 ausschalten? (also so wie bei den Vorgängerversionen, siehe oben)?



Für die Smartphones möchte ich ein extra-Design erstellen.
Meine Vorstellungen wären so wie bei http://www.schonox.de/
Einfach mal im Desktop und Smartphone ansehen.


Frage 2:
Ich hab im Buch von Peter Müller zu Contao 3 gelesen, daß man für mobile Webseiten ein
eigenes Layout erstellen kann. Find ich gut.
Wie muß ich da aber wo was einstellen, damit dieses mobile Layout auf den Smartphones angezeigt wird,
aber für Desktop und Tablets ein einheitliches Standard-Layout, also ohne das sich das Layout zerhackt?


Frage 3:
Ist es möglich, 3 Layouts zur erstellen?
1=Layout für Desktop
2=Layout für Tablets
3=Layout für Smartphones

Was mir persönlich beim responsiven Verhalten nicht so gefällt ist,
daß sich das Verhalten der Texte, Überschriften etc. unkontorlliert verändert.
So wird aus einer einzeiligen Überschrift auf einmal eine 2-Zeilige mit gerade mal
einem Wort in der 2. Zeile... Das sieht vom Design her nicht so gut aus.
Hat da jemand Erfahrung, wie man das Alles in den Griff bekommt?

[w3scout]

Hallo Schnippel,

vorneweg: responsive Design ist keine Frage von Contao 2 oder 3. Gewusst wie, geht es mit Beiden.
Lediglich der Ansatz "Mobile First" ist mit Contao 3 etwas leichter umzusetzen, da es bereits out-of-the-box die Möglichkeit gibt, für mobile Geräte ein separates Layout anzugeben. Für Contao 2 gibt es dafür einige Drittanbieter-Module.

Meine Zielvorstellungen wären folgende:
Website für Desktop erstellen, ohne das sich das Layout bei kleineren Displays verändert.

den Ansatz würde ich nochmals überdenken. Es empfiehlt sich nicht immer, überall das gleiche Layout (und Inhalte) anzuzeigen (Stichworte: "Usability", "mobile Daten-Flatrates", "Datenvolumen"). In Bezug auf die letzten beiden Stichworte z.B. wenn eine Website viele Bilder, große Galerien und/oder Videos enthält. Die Lösung dafür heisst "Mobile First". Einfach mal die Foren-Suche bemühen. Da gibt es bereits etliche Posts zu...

Wie kann man das veränderte Verhalten bei kleineren Display-Größen in
Contao 3 ausschalten?

indem Du weder das Responsive Grid noch ein separates Layout für mobile Geräte verwendest.

Für die Smartphones möchte ich ein extra-Design erstellen.

indem Du in C3 den "Mobile First" - Ansatz nutzt und für Seiten ein separates Layout anbietest ("Layout für mobile Seiten" in den Seiteneinstellungen).

Grundsätzlich solltest Du Dir aber im Vorfeld erstmal eine durchgängige Strategie überlegen. "Kein verändertes Verhalten bei kleineren Display Größen" und "Extra-Design für Smartphones" widerspricht sich sonst irgendwie.

Frage 3:
Ist es möglich, 3 Layouts zur erstellen?
1=Layout für Desktop
2=Layout für Tablets
3=Layout für Smartphones

ja, für 1+2 mit CSS MediaQueries und falls separat gewünscht, für 3 mit dem bereits erwähnten "Mobile First" Ansatz für mobile Geräte/Smartphones.

Wobei da aber prinzipiell nicht zwingend mehrere Layouts nötig sind, Du kannst auch alle 3 mit einem einzigen Layout und entsprechenden MediaQueries bedienen.

Ansonsten gibt es etliche Drittanbieter-Module, mit denen Du das Verhalten von Contao an einzelne Gerätetypen anpassen kannst (im ER mal z.B. mal nach "mobile" suchen).

Was mir persönlich beim responsiven Verhalten nicht so gefällt ist,
daß sich das Verhalten der Texte, Überschriften etc. unkontorlliert verändert.
So wird aus einer einzeiligen Überschrift auf einmal eine 2-Zeilige mit gerade mal
einem Wort in der 2. Zeile... Das sieht vom Design her nicht so gut aus.

Auch hier sind MediaQueries Dein Freund. Damit kannst Du die Formtierung der Inhalte abhängig von der jeweiligen Displaygröße optimieren.

Such´ einfach mal hier im Forum nach den entsprechenden Begriffen ("responsive", "mediaqueries", "mobilefirst", ...). Es gibt zu den einzelnen Themen bereits etliche Posts von kompetenten Leuten....


VG

[pmmueller]

Ich habe jetzt nicht den ganzen Text eurer Beiträge gelesen, aber zum Einlesen in das neue CSS-Framework:

CSS-Framework von Contao 3 – was hat sich geändert? (von Rusty)
https://community.contao.org/de/show...l=1#post233852

Contao und Responsive und so (von mir)
https://community.contao.org/de/show...l=1#post243819

Und wenn du den Holy Grail richtig verstehen willst, dann kannst du dir meinen Vortrag vom Contao-Nordtag als PDF herunterladen:

Responsive Contao - das neue CSS-Framework
http://pmueller.de/blog/vortrag-cont...dtag-2013.html

[Schnippel]

Erstmal vielen Dank für Eure Antworten,
die mir dabei helfen, das Ganze zu verstehen.

der Ansatz "Mobile First" ist mit Contao 3 etwas leichter umzusetzen, da es bereits out-of-the-box die Möglichkeit gibt, für mobile Geräte ein separates Layout anzugeben.

Verstehe ich das richtig, daß, wenn ich für mobile Engeräte ein extra CSS über das BA einbinde und den Seiten zusweise, dieses auch als erstes von dem Browser abgefragt wird?
Z.B. , wenn ein normales Bild per CSS in Standard-Layout 600px breit ist, aber im mobilem Layout nur 200px breit sein soll (damit es schneller lädt), daß dann bei "mobile first" das für mobile Seiten zugeweisen CSS zurerst geladen wird, sodaß nur das mit mit 200px erscheint, ohne vorher das 600px-Bild zu laden? Das würde Contao 3 automatisch dann dem SmartPhone zur Verfügung stellen?

Ab welchen Displaygrößen wird das mobile Layout von Contao angeboten?

Dank Eurer Hilfe hab konnte ich das flexible, responsive Verhalten erstmal deaktivieren (ja ich weiß, dass ist nicht mehr zeitgemäß).

#####
Für alle Leser, die das gleiche Problem haben hier meine Lösung kurz dargestellt:
Im BA / Layout den “Responsiv Grid“ deaktivieren, und im CSS folgenden Code:

@media (max-width:767px)
{	#wrapper {margin: 0 auto;
width: 960px;	}    
  }

Weiter Details dazu im schon erwähnten Beitrag unter Punkt 6 https://community.contao.org/de/show...t233852http://
#####

[pmmueller]

Das mobile Seitenlayout hängt nicht von der Display-Größe ab. Contao liest den UserAgent-String vom Browser aus und zieht Rückschlüsse daraus, ob es ein mobiles Gerät ist oder nicht. Die Liste steht in system/config/agents.php.

[Flattersatz]

Hallo,

also erst einmal würde ich an deiner Stelle auf foundation oder bootstrap zurückgreifen. Denn es gibt –*zum Einfluss auf entsprechende Größen –*die sogenannten media queries, mit denen kannst Du bestimmen auf welcher Pixelbreite was angezeigt wird –*und wann nicht.

Meld Dich einfach, ich kann Dir da bestimmt weiterhelfen.

Grüße
David

[Schnippel]

Mal noch eine Frage:

Folgende Website hab ich mit Contao 3 erstellt:

www.partyband-mixtour.de

Wenn man sich die Seite über Smartphones anschaut, ist das Layout durcheinander,
weil es noch kein mobiles Layout gibt.

Ich möchte vorerst, daß das Layout genauso, wie auf dem Desktop zu sehen ist, erscheint,
(auch wenn es zu klein erscheint und man es zoomen oder scrollen muß),
bis ich ein passendes für die mobile Version erstellt hab.

Wie läßt sich in Contao 3 das responsive Verhalten bei mobilen Websites deaktivieren?




PM schreibt:

Das mobile Seitenlayout hängt nicht von der Display-Größe ab. Contao liest den UserAgent-String vom Browser aus und zieht Rückschlüsse daraus, ob es ein mobiles Gerät ist oder nicht. Die Liste steht in system/config/agents.php

Sollte ich die agents.php vom Server löschen?

Ich weiß, daß mein Vorhaben nicht zeitgemäß ist,
aber ich möchte, daß auf dem Smartphone eine
ordentliche Website zu sehen ist, wenn auch stark verkleinert,
bis ich das mobile Layout fertig hab.
Das derzeitige zerstückelte Layout ist nicht ideal.


Nachtrag:
Das Problem wurde inzwischen gelöst. Siehe nachfolgende Erörterungen!

[pmmueller]

Du musst einfach nur die Zeile mit dem Meta-Viewport ($this->viewport) aus dem Seitentemplate fe_page löschen:

• Backend-Modul Templates
• Kopie von fe_page erstellen
• in der Kopie die Zeile löschen, nicht in der Originaldatei

Dabei musst du auch kein schlechtes Gewissen haben oder dich entschuldigen. Wenn eine Seite für kleine Bildschirme nicht optimiert ist, ist das völlig okay und die richtige Maßnahme.

Mit der agents.php hat das nix zu tun, nur mit dem kleinen Browserfenster (<768px). agents.php entscheidet bei mobilen Seitenlayouts. Die hast du doch gar nicht eingerichtet.

Merksatz: NIEMALS irgendwas aus dem Core von Contao ändern oder löschen. NIENICH.

[Schnippel]

Das war ein super Tipp, wäre selber da nicht drauf gekommen.
Habe die Zeite mit

<?php echo $this->viewport; ?>

gelöscht und
schon funktioniert es.

Mal noch eine Frage:

Ich hab bei Templates einen eigenen Ordner angelegt und
darin ein neues fe_page schon angelegt gehabt.
Dies habe ich kopiert, die Änderungen vorgenommen und dann im
Seitenlayout die Kopie von fe_page zugeordnet.

Hätte ich auch das schon von mir erste angelegte fe_page abändern können?

[pmmueller]

Ja klar. Das solltest du sogar, wenn du die fe_page sowieso schon bearbeitest hattest.

Mir ging es nur darum, dass du nicht die Originaldatei in den Katakomben des Contao-Core editierst.

[tinoo]

Warum gibt es dafür eigentlich kein "Fallback"? Also "kein Mobile-Layout = normale Website anzeigen"? Ich habe mir
nämlich grad soeben auch den Kopf darüber zerbrochen, warum mein neuster Versuche auf dem Dekstop in Ordnung ist,
aber auf iDevices "zerschossen" wird... Im Gegensatz zu C2.11.x wo die Seite noch korrekt angezeigt wurde...

[Schnippel]

nur gut, daß es mir nicht allein so geht :-)

[tinoo]

Und btw: Die fe_page gehört für mich irgendwie zum Contao-Core und darin möchte ich eigentlich möglichst nichts löschen oder ändern...

[MacKP]

Und btw: Die fe_page gehört für mich irgendwie zum Contao-Core und darin möchte ich eigentlich möglichst nichts löschen oder ändern...

Naja, es ist ein Template.. und Templates sind in Contao extra so gemacht, das man die UPDATESICHER bearbeiten kann (d.h. die werden bei einem Update nicht überschrieben, wenn man die kopiert). Änderungen muss man bei einem Update natürlich nachvollziehen.. aber das ist nun mal so.
Templates darf und soll man bei Bedarf nun mal bearbeiten. Es ist ein Trugschluss hier aus dem Forum, das einige meinen, das man es nicht machen sollte!
Probleme tauchen damit nur auf, wenn man bei einem Update nicht mehr drann denkt.. wenn man daran aber scheitert bei einem Update, dann frage ich mich ob man nicht vllt doch besser ein Baukastensystem nimmt, was anders funktioniert.

Viele Grüße

[tinoo]

...
Templates darf und soll man bei Bedarf nun mal bearbeiten. Es ist ein Trugschluss hier aus dem Forum, das einige meinen, das man es nicht machen sollte!

Natürlich kann man es machen - man muss sich einfach der Konsequenzen bewusst sein. Und gerade in diesem Fall wäre eine Änderung gar nicht notwendig, wenn Contao anstelle eines nichtvorhandenen mobilen Layouts einfach das Standardlayout für Desktops anzeigen würde - wenn kein Layout für mobile Geräte definiert wurde...

[Schnippel]

Der Ansatz "mobile-first" von Contao ist schon ok, soll ja wohl auch im Hinblick auf SEO positiv gewertet werden.
So nen Button für normales Layout bei Handys im BA bei den Seitenlayouts wäre natürlich ne tolle Sache, aber wir wissen ja jetzt,
wie es funtioniert.

[MacKP]

1. Contao geht nicht wirklich den Weg Mobile First.. Es ist einfach Content first im Quellcode (wenn der Zufällig in der Mittleren Spalte ist)
2. Den 'Knopf' zum Ausschalten habt ihr doch schon, wenn ihr das entfent was in #9 steht.. diese eine Zeile in der fe_page entfernen und gut ist. Ich versteh nicht was da ein Button im Backend besser machen soll.
3. So wurde das von Leo vorgesehen... Macht ein Ticket, wenn ihr das anders haben wollt und begründet das passend. Mosern hilft da nicht.

Viele Grüße

[pmmueller]

Natürlich kann man es machen - man muss sich einfach der Konsequenzen bewusst sein. Und gerade in diesem Fall wäre eine Änderung gar nicht notwendig, wenn Contao anstelle eines nichtvorhandenen mobilen Layouts einfach das Standardlayout für Desktops anzeigen würde - wenn kein Layout für mobile Geräte definiert wurde...

Du wirfst zwei Dinge durcheinander:

1. Mobiles Seitenlayout - wird durch agents.php getriggert, also durch das Gerät bzw. den Browser. Egal wie breit das Browserfenster ist.
2. Layout-Builder mit Media Query bei 768px, getriggert durch die Viewportbreite. Hat mit "Layout für mobile Geräte" nichts zu tun.

Das eine hat mit dem anderen nichts zu tun.

Und ganz im Ernst: Solange man die Funktionsweise von Contao 3 nicht verstanden hat, würde ich schlicht und einfach nicht updaten. Die 2er läuft doch gut.

[Schnippel]

Gut erklärt... so langsam steig ich nun auch dahinter :-)