Ergebnis 1 bis 32 von 32

Thema: C3RC1 - wann normales und wann mobiles Seitenlayout?

  1. #1
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard C3RC1 - wann normales und wann mobiles Seitenlayout?

    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?

  2. #2
    Contao-Urgestein
    Registriert seit
    03.06.2010.
    Ort
    Wuppertal
    Beiträge
    2.149
    User beschenken
    Wunschliste

    Standard

    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:
    PHP-Code:
    $blnMobile = ($objPage->mobileLayout && \Environment::get('agent')->mobile); 
    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.
    Geändert von Flex (15.08.2012 um 09:49 Uhr)

  3. #3
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    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:
    • Bekommt man auf dem iPad die Desktop-Navigation oder die Mobil-Navigation?
    • Wenn die Mobilnavigation erscheint, ist sie gestyled oder nicht?
    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
    Geändert von pmmueller (15.08.2012 um 10:57 Uhr)

  4. #4
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Hallo Peter,

    man bekommt die normale Version. Das finde ich grundsätzlich auch gut so:
    Foto2.PNG

    Problematisch ist allerrdings die Hochformatansicht. Dort muss man horizontal scrollen. Auch ein Doppel-Tap passt die Seite nicht auf die volle Breite an:
    Foto1.PNG
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  5. #5
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    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.

  6. #6
    Contao-Nutzer
    Registriert seit
    15.05.2012.
    Beiträge
    171

    Standard

    Ich sitze gerade an der gleichen Frage, bin aber im Verständnis von den Contao-Interna nicht so versiert wie Ihr, daher meine Fragen:

    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.
    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.

    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.
    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?

    Ich hoffe, die Fragen sind nicht zu unbedarft ....

  7. #7
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.376
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von pmmueller Beitrag anzeigen
    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.
    Was man auch anders sehen kann, siehe https://github.com/contao/core/issues/4150

  8. #8
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    > 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.
    Geändert von pmmueller (15.08.2012 um 12:11 Uhr)

  9. #9
    Contao-Nutzer
    Registriert seit
    15.05.2012.
    Beiträge
    171

    Standard

    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!

  10. #10
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    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.

  11. #11
    Contao-Nutzer
    Registriert seit
    15.05.2012.
    Beiträge
    171

    Standard

    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 ;-).

    Wenn du ein Menü oberhalb vom Content in #main haben möchtest, musst du es im Kopfbereich #header platzieren.
    Heißt dann ein Mobile-Template, in dem das Menü einfach im #header steht? Wenn ja, wie einfach kann das Leben manchmal sein :-)!

    Abstände zwischen den drei Spalten sollte man also am besten über die jeweiligen .inside-Klassen regeln: #main .inside, #left .inside und #right .inside.
    Ebenfalls vielen Dank für den Hinweis, werde ich fürderhin so berücksichtigen!

  12. #12
    Contao-Nutzer
    Registriert seit
    15.05.2012.
    Beiträge
    171

    Standard

    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!

  13. #13
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    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.

  14. #14
    Contao-Nutzer
    Registriert seit
    15.05.2012.
    Beiträge
    171

    Standard

    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!

  15. #15
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    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:
    mobil.jpg
    Außer dem Menü, das man anklicken kann, ist dann von den einzelnen Seiten nichts zu sehen.
    Angehängte Grafiken Angehängte Grafiken
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  16. #16
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    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"
    Angehängte Grafiken Angehängte Grafiken
    Geändert von pmmueller (15.08.2012 um 21:27 Uhr)

  17. #17
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    So schlimm wie auf deinem Screenshot sieht die Beispielsite auf einem echten Mobilphone Gott sei Dank nicht aus.
    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.
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  18. #18
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  19. #19
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    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.
    Grüße Edgar
    Dackelalarm

  20. #20
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  21. #21
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  22. #22
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Meinst du 'Browsers - Mac' und dann Firefox 10? Wo läuft denn da welche Schrift? Kann ich nicht finden.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  23. #23
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  24. #24
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    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
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  25. #25
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    Ach ja -
    wahrscheinlich offTopic - aber wie verhindere ich, das die Contao css Dateien während der Arbeit/Testen im Frontend zusammengefaßt werden?

    Franko
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  26. #26
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    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.
    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.

    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.


    Zitat Zitat von Franko Beitrag anzeigen
    Das separate, mobile Seitenlayout greift dann zusätzlich bei ( aus Contao Sicht ) mobilen Geräten.
    "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.

    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.


    Zitat Zitat von Franko Beitrag anzeigen
    @pmmueller Wann erscheint den das neue Contao3 Buch
    Geplant ist es für Ende November, aber das hängt auch ein bisschen vom Erscheinen der Final Version von Contao ab.

    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.
    Geändert von pmmueller (16.02.2013 um 16:25 Uhr)

  27. #27
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    Hallo,
    vielen Dank für die rasche Antwort.

    Wesentlichen nur die Anweisungen für den Holy Grail zurückgenommen und die drei Inhaltsspalten untereinander dargestellt.
    Hm, muß mir das anhand der MusicAcadamy oder über ein eigenes Beispiel mal auf dem iPad ansehen -
    glaube nicht, das das autom. "verschieben" der Inhaltsspalten hier günstig wäre.

    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.
    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?

    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 ...


    Macht richtig Spaß, damit zu arbeiten
    Yepp -
    bin gerade mal den Nachmittag dran - und allein das Dateisystem ist schon Spitze ...

    Danke
    Franko
    Geändert von Franko (07.09.2012 um 16:01 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  28. #28
    Contao-Nutzer Avatar von geraldo
    Registriert seit
    30.05.2011.
    Ort
    Calheta de São Miguel
    Beiträge
    141

    Standard Es macht Spaß Eulen nach Athen zu tragen

    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.
    pfiade.gif
    Cumprimentos von Geraldo
    Reiseträume

  29. #29
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    @geraldo Vielen Dank für das Kompliment!

  30. #30
    Contao-Nutzer
    Registriert seit
    03.03.2012.
    Beiträge
    174

    Standard

    Zitat Zitat von pmmueller Beitrag anzeigen
    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.
    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.

  31. #31
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.376
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Geronimo82 Beitrag anzeigen
    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.
    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.

  32. #32
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.553
    User beschenken
    Wunschliste

    Standard

    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 )
    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 :-)
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •