Druckbare Version
In C3 kann man ja spezielle Seitenlayouts für mobil erstellen.
Aber wie entscheidet Contao eigentlich, ob ein Client das normale oder das mobile Seitenlayout bekommt?
Das ist doch nicht wie im Layout-Builder an die Viewportbreite (< 768px) gekoppelt, oder?
Spontan würde ich vermuten, dass es sich an die Browserdetection wendet, die ja mit 2.10 eingeführt wurde für die body Klassen...
Aber ich werd mal nachschauen.
/edit:
Er prüft also ob ein mobiles Layout gesetzt worden ist und falls der User Agent des Browsers sich als mobile Browser zu erkennen gibt, lädt er es.PHP-Code:$blnMobile = ($objPage->mobileLayout && \Environment::get('agent')->mobile);
Danke für den Hinweis.
Gibt es irgendwo eine Liste, welche Browser sich als mobile zu erkennen geben?
Gehören die Safaris auf dem iPad2 und iPad3 auch dazu?
Zum Hintergrund der Frage
Der Layout-Builder im CSS-Framework hat ja einen per MediaQuery eingebauten Breakpoint bei 767px. Darunter werden die Spalten #main, #left und #right untereinander dargestellt. Ich habe jetzt also für ein mobiles Layout ein Stylesheet "mobile" geschrieben, dass die mobile Version <768px gestaltet.
Mobiles Seitenlayout. Ergänzend dazu habe ich für jedes Seitenlayout eine mobile Variante erstellt, in der zum Beispiel die Hauptnavigation nicht als [Navigationsmenü] (also als ungeordnete Liste), sondern via [Quicknavigation] als Select-Dropdown ausgeliefert wird. Auf kleinen Bildschirmen ist das eine mögliche Option, um die Navigation platzsparend unterzubringen.
Auf dem meinem Galaxy S2 funktioniert das auch alles wunderbar soweit.
Potenzielles Problem
Wenn jetzt ein iPad-Safari mit einer hohen Auflösung sich als mobil zu erkennen gibt, bekommt er zwar das "Seitenlayout für mobile Seiten", nicht aber das dazu gehörige Stylesheet "mobile", weil das ja nur bei <768px gilt.
Ist das so richtig gedacht? Leider bin ich kein iPad-Besitzer und kann diesen theoretischen Gedankengang deshalb nicht praktisch überprüfen.
Wer ein iPad und ein bisschen Zeit hat:
Auf http://c3.websites-erstellen-mit-contao.de/ habe ich das so umgesetzt wie oben beschrieben. Fragen dazu:
Ein Screenshot wäre auch schön. Auf screenshot-machen.de/apple steht, wie das auf einem iPad gemacht wird. Alternativ kann man mir natürlich auch wer ein iPad rüberbeamen, dann checke ich das selbst ;)
- Bekommt man auf dem iPad die Desktop-Navigation oder die Mobil-Navigation?
- Wenn die Mobilnavigation erscheint, ist sie gestyled oder nicht?
Hallo Peter,
man bekommt die normale Version. Das finde ich grundsätzlich auch gut so:
Anhang 8359
Problematisch ist allerrdings die Hochformatansicht. Dort muss man horizontal scrollen. Auch ein Doppel-Tap passt die Seite nicht auf die volle Breite an:
Anhang 8358
Wow. Wat flott. Und ein Riesendanke.
Ich finde das auch sinnvoll, dass die iPads die Desktopversion bekommen, es war ja mehr eine *Befürchtung*, dass die das mobile Seitenlayout und das Desktop-Styling erhalten.
Momentan ist die Beispielsite übrigens noch komplett mit festen Pixelbreiten gebaut. Ein bisschen Flexibilität in Form von Prozenten dürfte dem Hochformat später auch noch auf die Sprünge helfen.
Ich sitze gerade an der gleichen Frage, bin aber im Verständnis von den Contao-Interna nicht so versiert wie Ihr, daher meine Fragen:
Wo steht das, ganz platt gefragt? Aus den CSS-Dateien der Contao-Demo-Seite (Music-Academy) kann ich diese Info bzw. diese CSS-Anweisungen nicht herauslesen. Und sowohl die Default-Seite als auch Default-Mobile haben ein statisches Layout mit 870px Breite. In den CSS-Dateien kann ich ebenfalls keine Media-Queries oder Media-Types erkennen. Wenn ich die Site mit dem Firefox-Fenster einfach kleiner mache, klappt es irgendwann um, allerdings erst bei einer Breite deutlich jenseits der <767 px - da muss das Fenster schon sehr schmal sein.Zitat:
Der Layout-Builder im CSS-Framework hat ja einen per MediaQuery eingebauten Breakpoint bei 767px. Darunter werden die Spalten #main, #left und #right untereinander dargestellt. Ich habe jetzt also für ein mobiles Layout ein Stylesheet "mobile" geschrieben, dass die mobile Version <768px gestaltet.
Schließt an das von oben an: Warum funktioniert das dann auf meinem Desktop-Rechner, ganz einfach mit verkleinertem Browserfenster? Gibt sich dann Firefox als mobiler Browser aus?Zitat:
Er prüft also ob ein mobiles Layout gesetzt worden ist und falls der User Agent des Browsers sich als mobile Browser zu erkennen gibt, lädt er es.
Ich hoffe, die Fragen sind nicht zu unbedarft ....
Was man auch anders sehen kann, siehe https://github.com/contao/core/issues/4150Zitat:
Zitat von pmmueller
> MediaQuery
Das bezieht sich auf Contao 3 RC1. Dort kann man im Seitenlayout den "Layout-Builder" ein- und ausstellen, der Teil des CSS-Framework von Contao ist. Technisch gesehen steht das in der Datei assets/contao/css/layout-uncompressed.css, genau genommen in Zeile 64:
@media (max-width:767px) ...
> Warum funktioniert das dann auf meinem Desktop-Rechner?
Der Layout-Builder und die darin enthaltene Media-Query gilt für alle Browser. Die Geschichte mit dem "mobil" galt für ein spezielles *Seitenlayout*, das man in Contao 3 in der "Seitenstruktur" einzelnen Seiten zuweisen kann.
In meinem Firefox ändert sich das Layout haargenau am definierten Breakpoint (768px). In der "Webdeveloper Toolbar" kannst du dir die "Fenstergröße in Titelleiste" anzeigen lassen.
Vielen Dank für die Hilfe, damit wird mir die Sache klarer. Ich habe mich ohnehin auf die Contao3RC1 bezogen.
Eine weitere Frage hat sich mir gerade aufgetan: Standardmäßig wird ja nun - zwecks Suchmaschinenoptimierung, Barrierefreiheit etc. - die #main vor #left und #right gereiht. Was mache ich aber nun, wenn ich in der #left ein Menü habe? Dieses rutscht ja dann natürlich unterhalb des Content, soll aber oben sein? Wie löse ich das am Besten?
Danke!
Beim "HolyGrail"-Layout ist die Reihenfolge im Quelltext #main, #left und #right. Das Menü in #left rutscht also ohne die "HolyGrail-Float-Orgie" (so muss man das ja schon fast nennen) immer unter den Content in #main. Das ist ein Feature und kein Bug ;-)
Wenn du ein Menü oberhalb vom Content in #main haben möchtest, musst du es im Kopfbereich #header platzieren. Ein schönes Beispiel dafür, dass technische Gegebenheiten direkt Auswirkungen auf ein Design haben.
Eine andere Auswirkung des "HolyGrail" ist übrigens, dass #main, #left und #right von uns kein padding, border oder margin bekommen sollten. Das hängt mit der oben erwähnten "Float-Orgie" zusammen, denn der HolyGrail ist ja eine echte "Presspackung". Abstände zwischen den drei Spalten sollte man also am besten über die jeweiligen .inside-Klassen regeln: #main .inside, #left .inside und #right .inside.
Vielen Dank! Ich habe diese Reihenfolge ohnehin nicht als Bug gesehen - mir ist der Sinn bewusst - aber es hat eben die genannten Auswirkungen auf die Seitengestaltung in unterschiedlichen Umgebungen und muss "behandelt" werden ;-).
Heißt dann ein Mobile-Template, in dem das Menü einfach im #header steht? Wenn ja, wie einfach kann das Leben manchmal sein :-)!Zitat:
Wenn du ein Menü oberhalb vom Content in #main haben möchtest, musst du es im Kopfbereich #header platzieren.
Ebenfalls vielen Dank für den Hinweis, werde ich fürderhin so berücksichtigen!Zitat:
Abstände zwischen den drei Spalten sollte man also am besten über die jeweiligen .inside-Klassen regeln: #main .inside, #left .inside und #right .inside.
ich teste gerade und es haben sich mir zwei weitere Fragen aufgetan:
1. Die mobile Version kann ich mir nur auf einem Mobile-Device/Smartphone etc. ansehen, sehe sie aber nicht auf meinem Desktop-Rechner, was für die Entwicklung einigermaßen mühsam ist. Die Spalten brechen zwar bei einer Fenstergröße von 767px um, aber alle anderen Anweisungen werden ignoriert. Am iPhone wird das mobile Stylesheet tadellos angezeigt. Kann man bzw. wie kann ich das ändern?
2. Ich würde dem Benutzer gerne die Wahl lassen, ob er sich die mobile Version oder die Desktop-Version ansehen kann. Wie kann ich das nun mit Contao 3 am besten umsetzen?
Vielen Dank für Eure Hilfe!
1. Weiß ich auch nicht.
Das von dir beschriebene Verhalten ist aber logisch, denn wie gesagt bekommen die MediaQuery ja alle Browser, das mobile Seitenlayout aber nicht. Ich habe mein Smartphone neben mir liegen und drücke in den verschiedenen Browsern immer nur auf "aktualisieren". Und ein Lesezeichen habe ich gesetzt...
2. Es gibt ein Inserttag namens {{toggle_view}} genau zu diesem Zweck. Baue das einfach irgendwo ein, zum Beispiel im Header, und dann können Leute hin- und herswitchen.
ad 1. Gut, mach' ich auch gerade und freu' mich, dass ich mit dieser Improvisation nicht alleine bin .... ;-)
ad 2. Danke für den Hinweis --> Contao ist einfach genial!
Danke für Deine Hilfe!
Es gibt einen Mobil-Emulator, bei dem man viele Geräe einstellen kann:
http://www.opera.com/developer/tools/mobile/
Die Seite von oben sieht damit z.B. so aus:
Anhang 8362
Außer dem Menü, das man anklicken kann, ist dann von den einzelnen Seiten nichts zu sehen. ;)
So schlimm wie auf deinem Screenshot sieht die Beispielsite auf einem echten Mobilphone Gott sei Dank nicht aus.
Wie man auf meinem Screenshot sieht, liefert Contao über das mobile Seitenlayout nicht das Desktopmenü aus, sondern stattdessen ein SELECT-Dropdown, das viel weniger Platz weg nimmt. Und auf meinem S2 passt der Bonsai sogar perfekt neben den Titel "Beispielsite" ;)
Na, dann weiß ich jetzt wenigstens - was ich bisher nur befürchtet hatte -, dass ich mich auf den Emulator nicht verlassen kann. Da ich selber kein Smartphone habe, gibt es für mich sonst keine Testmöglichkeit.Zitat:
So schlimm wie auf deinem Screenshot sieht die Beispielsite auf einem echten Mobilphone Gott sei Dank nicht aus.
Zum Testen, ob ein Gerät als mobil erkannt wird usw. kann man auch gut dieses Addon benutzen https://addons.mozilla.org/de/firefo...itcher/?src=ss
Ein Link zu einer XML-Datei mit allen möglichen Geräten zum Importieren ist dabei.
Wo finde ich den denn genau? Ich habs direkt mal installiert und getestet, sieht gut aus, nur "Deinen" Impoertlink fide ich nicht.Zitat:
Ein Link zu einer XML-Datei mit allen möglichen Geräten zum Importieren ist dabei.
Im Addon 'Edit User Agents' - dann unten rechts der Link http://forums.chrispederick.com/disc...of-user-agents und auf der Seite der Link http://techpatterns.com/forums/about304.html dort ist dann oben der Link zur xml-Datei http://techpatterns.com/downloads/fi...ntswitcher.xml
Danke Andreas für den Tipp.Sehe gerade man kann das durchaus auch schon mal zum ersten CSS-Debuggen einsetzen.Im FF mal auf OSX FF einstellen und sehe wie da z.B. die Schrift läuft.
Meinst du 'Browsers - Mac' und dann Firefox 10? Wo läuft denn da welche Schrift? Kann ich nicht finden.
Ja ich wähle unter WIN mit FF den Mac mit FF aus und sehe, das dort z.B. die verwendete Schrift breiter angezeigt wird / läuft als im FF unter WIN.
Hallo,
ich teste den RC1 lokal und bin dabei auf diese Beiträge gestoßen - und nun etwas verwirrt.
Wenn ich den Layout Builder einsetze ( auch ohne das responsive grid ) reagieren die Browser durch die Contao layout.css ( @media (max-width:767px) ... )
hinsichtlich der Spalten responsive.
Das separate, mobile Seitenlayout greift dann zusätzlich bei ( aus Contao Sicht ) mobilen Geräten.
Ich dachte, das das mobile Layout halt für eine beispielsweise, komplett separate mobile Umsetzung wäre
und ein "normales" Desktop Seitenlayout z.B. mit einem festen 960 Pixel Grid weiterhin umgesetzt werden könnte.
Wenn ich dies nicht haben möchte - dann halt komplett responsive ( also ohne separate mobile Version).
So aber ist es irgendwie beides ???
Wie gesagt -
gerade etwas verwirrt
@pmmueller
Wann erscheint den das neue Contao3 Buch
Danke
Franko
Ach ja -
wahrscheinlich offTopic - aber wie verhindere ich, das die Contao css Dateien während der Arbeit/Testen im Frontend zusammengefaßt werden?
Franko
Yep. Korrekt. Ohne dass du auch nur irgendwas tust. Da werden aber im Wesentlichen nur die Anweisungen für den Holy Grail zurückgenommen und die drei Inhaltsspalten untereinander dargestellt. Du kannst doch damit ein ganz normales 960px Desktop-Layout umsetzen. Das einzige was passiert, ist das wenn das Browserfenster kleiner als 768px wird, dass die Inhaltsspalten untereinander stehen. Was ja doch eher praktisch ist.Zitat:
Zitat von Franko
Falls dein 960px-Layout unter 768px mit untereinander stehenden Spalten völlig im Eimer ist, bastele einfach ein kleines Stylesheet zur Begradigung mit einer Media Query wie im layout-Builder und binde das im Standardlayout mit ein, wenn du das für die mobile Version nicht haben willst.
"Zusätzlich" würde ich nicht sagen. Die Media Query aus dem Layout-Builder hat ja mit mobilen Layouts nicht soo viel zu tun. Mit dem mobilen Seitenlayout hast du die Möglichkeit, für mobil ein komplett anderes Seitenlayout zu basteln. Also nicht nur ein anderes Styling, sondern auch andere Frontend-Module, zum Beispiel für die Navigation.Zitat:
Zitat von Franko
In der Beispielsite für die neue Auflage habe ich momentan ein Standardlayout für die Desktopversion. Unter 768px stehen die Inhaltsspalten untereinander, aber das mobile Stylesheet habe ich da nicht aktiviert.
Für die mobile Version gibt es ein Seitenlayout Standardlayout (mobile), in dem dann zum Beispiel eine andere Navigation und ein Stylesheet "mobile" serviert werden. Und in dem die Stylesheets mit den IE-Patches nicht ausgeliefert werden.
Das ergänzt sich eigentlich ganz prima.
Geplant ist es für Ende November, aber das hängt auch ein bisschen vom Erscheinen der Final Version von Contao ab.Zitat:
Zitat von Franko
Ich bin justemang mit der Überarbeitung von Kapitel 10 fertig (Artikel, Inhaltselemente Text, Bilder, Galerien etc.), und selbst dabei hat sich jede Menge geändert. Besonders bei den Galerien. Und es ist echt gut geworden (datenbankgestütztes Dateisystem, keine meta.txt, Reihenfolge per Drag and Drop ändern etc.). Macht richtig Spaß, damit zu arbeiten.
Hallo,
vielen Dank für die rasche Antwort.
Hm, muß mir das anhand der MusicAcadamy oder über ein eigenes Beispiel mal auf dem iPad ansehen -Zitat:
Wesentlichen nur die Anweisungen für den Holy Grail zurückgenommen und die drei Inhaltsspalten untereinander dargestellt.
glaube nicht, das das autom. "verschieben" der Inhaltsspalten hier günstig wäre.
Hm - wie gesagt - muß ich erst auf dem iPad testen - ich möchte aber eigentlich grundsätzlich für die Desktop Version darauf verzichten wollen?Zitat:
bastele einfach ein kleines Stylesheet zur Begradigung mit einer Media Query wie im layout-Builder und binde das im Standardlayout mit ein, wenn du das für die mobile Version nicht haben willst.
UPDATE
Hm, zwingt mich ja keiner für die Desktop Version den Layout Builder zu nutzen - würde mir ja da schon das responsive.css (Grid) reichen!
Und dann halt für die mobile Version mit Layout Builder und zusätzlichem Seitenlayout ...
Yepp -Zitat:
Macht richtig Spaß, damit zu arbeiten
bin gerade mal den Nachmittag dran - und allein das Dateisystem ist schon Spitze ...
Danke
Franko
Hallo Peter
auch wenn mir noch einige Schritte fehlen für die 3.x, aktuell steht 2.10.4 -->2.11.x als nächstes bei mir an, xhtml --> html5 ist auch noch unbeackert, finde ich es Deine Erklärungen im Bereich Layout/CSS immer wieder sehr erfreulich. Dank Deiner beider Bücher und dank Contao und seiner Community bin ich mit dem Ergebnis von ca. 1 1/2 Jahren Arbeit zufrieden. Und unsere Kunden auch, wie mir unsere aktuellen Buchungszahlen zeigen.
Anhang 8546
@geraldo Vielen Dank für das Kompliment!
Das könnte die Ursache für mein Problem (https://www.contao-community.de/show...e-auf-Contao-3) sein, weiß jemand wie man das abstellt oder zumindest zum korrekten funktionieren bringt? Abstellen wäre eigentlich besser, denn Geräte wie das iPhone kauft man sich ja, weil man das „echte“ Netz wie gewohnt nutzen möchte und sich nicht mit abgespeckten Mobilversionen zufrieden geben möchte.Zitat:
Zitat von pmmueller
Wenn ich auf dem Mobilgerät versuche, mit den Fingern auf in der Gesamtdarstellung vielleicht sehr kleine Navigationen zu zielen und drei Anläufe mit Zoom benötige, um einen Link zu treffen, dann bin ich mir da nicht wirklich sicher.Zitat:
Zitat von Geronimo82
Zumal es sich ja auch nicht um eine abgespeckte Version handelt, nur ebend untereinander statt nebeneinander.
Ich finde das schon cool, das ich mit meinem kleinem Samsung Ace nun meine Webseite betrachten und auch bedienen kann. (kann ich übrigens auch in C2.11 mit Prozent grid :cool: )
Natürlich musste ich zusätzliche CSS Angaben noch dazu bauen, klar, was daran liegt dass ich eine horizontale Navi im Header habe die auf 320/480px Breite nunmal nicht ganz passt :-)