Contao 3 und Version für mobile Geräte

[heiko]

Hallo,

ich beschäftige mich jetzt mit Contao 3 auch erstmals mit der Problematik Website-Version 1 für Desktop und Website-Version 2 für mobile Geräte. Jetzt mal nicht Tablets, da ists mir klar. Es geht dabei um Mobiltelefone im allgemeinen und speziellen. Habe mir hierzu im Forum eine Menge Diskussionen durchgelesen. So richtig schlau bin ich aber daraus noch nicht geworden, weil dazu noch ein Newbie. Deshalb will ich hier noch mal nachfragen.

Im Groben also... ich will zum einen die Desktop-Version mit allen komplexen Inhalten, auf den mobilen bestimmte Inhalte aus der Desktop-Version nicht mit einbeziehen und auch Artikel z. T. abspecken. Das bedeutet ja, dass ich jeweils eigentlich völlig eigene Seiten/Artikel erstellen muss und es nicht einfach mit Media Querys getan ist.

1. Contao 3 installiert.
2. Seitenstruktur angelegt.
3. CSS-Dateien: style.css und mobile.css angelegt.
4. Layouts default und mobile erstellt und jeweils die CSS-Dateien zugewiesen.
5. Der Seite als Layout default und Layout für mobile Seiten mobile zugewiesen.
6. ... Und jetzt weiß ich nicht mehr weiter. Eigentlich müsste ich beginnend mit zwei Startpunkten die Seiten (hier werden die jeweiligen Layouts zugewiesen) mal für Desktopinhalte und zum anderen für die Mobilinhalte erstellen. Klar, leuchtet mir ein, dass diese Variante u. U. doppelte Arbeit für Redakteure beinhalten würde. Aber ich will ja eben nicht einfach nur für alle Medientypen optimieren, sondern die Inhalte, die bei der Desktopversion oftmals zu komplex und umfangreich sind, für die Mobilversion abspecken. Z. Bsp..

Zwei Fragen also.

1. Wie kann man das Beschriebene realisieren?
2. Weiß jemand schon, wie detailliert bzw. umfassend das kommende Buch von Peter Müller "Websites erstellen mit Contao 3" auf dieses Thema eingeht? Könnte ja sein, jemand von Euch hat da vorab schon dieses oder jenes in Erfahrung bringen können.

Gruß
heiko

[varix]

Hallo Heiko,

bin selber Newbie und kann deine Fragen nicht direkt beantworten. Aber vielleicht hilft dir folgendes. Habe gerade Contao3 mit Music Academy installiert. Auf dem Smartphone (Iphone) wird z. B. die Startseite
anders dargestellt, als die Desktopvariante. Im Backend kann man sich das sehr gut ansehen.

Grüße
varix

[heiko]

Hallo varix,

ich kann mich entsinnen, dass Du zu genau diesem Thema hier im Forum schon mal eine Diskussion geführt hast bzw. an ihr beteiligt warst. Wie gesagt, es geht mir nicht um das Anpassen einer Website an die unterschiedlichen Browser, Viewports und Auflösungen, sondern um jeweilig inhaltlich unterschiedliche/abgespeckte Versionen von Artikeln in der Desktop- und Mobilgeräteversion. Das geht über das einfache Ausblenden von Artikelinhalten hinaus. Die Verfahrensweise hierzu ist mir unklar.

Gruß
heiko

[heiko]

Auf dem Smartphone (Iphone) wird z. B. die Startseite
anders dargestellt, als die Desktopvariante. Im Backend kann man sich das sehr gut ansehen.

Hallo varix,

ansehen? Kannst Du mir das bitte erklären?

Gruß
heiko

[varix]

Für Mobilgeräte wird ein anderes Seitenlayout zugewiesen. Die Navi ist nicht mehr auf der linken Seite, sondern unten. Aber das löst deine eigentliche Frage nicht. Leider kann ich sie dir auch nicht beantworten und würde mich für eine Lösung interessieren. Es geht halt um die unterschiedlichen Inhalte, also abgespeckten Varianten für Desktop und Mobilgeräte.

Vielleicht kann das ja jemand mal für C3 erklären?!? Zwei Startpunkte (Einstellungen?) notwendig? Was ist zu beachten, etc.?

Wäre echt klasse.

Gruß
varix

[Nils Riel]

Man könnte mittels der Body-Klasse "mobile" Inhalte dynamisch anzeigen/ausblenden.

[heiko]

Hallo Nils,

angesichts ad hoc mir nicht besserer Beispiele einfallend folgendes: "Vietnamesisch-Chinesische Beziehungen". Auf der Mobilversion wäre es undenkbar den Besuchern einen solch komplexen Artikel zuzumuten. Viele laufende Meter Text zu scrollen. Vielmehr würde ich bei diesem Beispiel eine Kurzfassung des Artikels anbieten und einen Verweis auf die Desktopversion hinzusetzen. Z. Bsp..

Ok, das ist ein schlechtes Beispiel, weil ich ein solches Projekt von vornherein niemals für Handys umsetzen würde.

Aber nehmen wir das Beispiel der Werbung für ein Restaurant. Z. Bsp. hierzu (mal angedacht, ich würde das mit Contao umsetzen). Für die Gastronomie ist es in Zeiten der Absprachen unter den Benutzern per Handy/Smartphone/iPhone via Facebook gar nicht uninteressant. "Hallo Karla, wollen wir essen gehen? Wie wäre es heute abend 19:00 Uhr im Asia World?" Bitte, es geht hier nicht um Schleichwerbung für ein bestimmtes Restaurant. Es geht um die Findung einer Lösung am konkreten Beispiel. Die 1:1-Umsetzung des selbigen auf Handy ist nicht zumutbar. Also würde ich den Artikel völlig anders inhaltlich, konzeptionell und technisch für Mobiltelefone realisieren. Also doch zwei unterschiedliche Artikel. Der bestehende für den Desktop und ein anderer für Mobilfone.

Wie mit Contao 3 realisieren?

Gruß
heiko

[pmmueller]

[*]Weiß jemand schon, wie detailliert bzw. umfassend das kommende Buch von Peter Müller "Websites erstellen mit Contao 3" auf dieses Thema eingeht? Könnte ja sein, jemand von Euch hat da vorab schon dieses oder jenes in Erfahrung bringen können.

Die Beispielsite ist komplett neu und in Kapitel 18 ist es glaube ich, wird beschrieben, wie man eine mobile Version der Beispielsite erstellt. Du kannst gerne einen Blick auf den aktuellen Stand der Beispielsite werfen, die noch auf dem RC2 basiert, da ich momentan noch im Urlaub bin.

Was momentan glaube ich viele Leute durcheinander bringt, ist, dass zwei Dinge eine Rolle spielen:

• Layout-Builder. Im "Layout-Builder" ist eine Media Query eingebaut, die für das (neue) Holy-Grail-Layout die Inhaltsspalten #main, #left und #right automatisch untereinander darstellt, wenn der Viewport kleiner als 768px wird. Dafür musst du überhaupt gar nichts unternehmen, dass geht von alleine und wird in Kapitel 8 "Das CSS-Framework" ausführlich beschrieben. Das kann man auch im Desktop-Browser testen, wenn man das Fenster verkleinert.
• Mobiles Seitenlayout. Für eine mobile Version der Seite kannst du im selben Startpunkt (!) zusätzlich ein neues Seitenlayout erstellen und damit zum Beispiel ein anderes Navigationsmodul servieren. In diesem mobilen Seitenlayout bietet es sich auch an, ein zusätzliches Stylesheet für die mobile Version einzubinden und zum Beispiel Stylesheets für IE<9 komplett rauszuschmeißen.

Das Buch erscheint am 28. November 2012

Du kannst also mit Contao 3 unterschiedliche Seitenlayouts servieren, sprich z. B. Stylesheets und Frontend-Module. Unterschiedliche Inhaltselemente und Artikel geht mit Bordmitteln momentan nicht (es sei denn, du packst sie in ein Frontend-Modul), aber es gibt bereits eine Erweiterung dafür, die hier letztens im Forum mal erwähnt worden ist, deren Name mir aber gerade nicht geläufig ist.

EDIT
Und hier die Erweiterung: https://github.com/Paratron/contao-m...ibility#readme

[mike_mcfly]

Also wenn ich das richtig sehe, brauchst Du eine Funktionalität, wie die der mobilecore-Extension aber eben nur für C3, oder?

Siehe:
http://contao.org/en/extension-list/...obilecore.html

[Juke]

Mich würde interessieren, ob die beiden Erweiterungen den für Mobile nicht gebrauchten Inhalt, ähnlich wie bei einer CSS-Lösung, nur verstecken oder ob es damit so ist, dass wirklich komplett andere Inhalte erstellt werden können? Bei dem ersten Link sieht es für mich so aus, dass Inhalte nur versteckt werden, der zweite ist dann wohl eher die Lösung, bei der für Mobile auch nur die für mobile erstellten Inhalte ausgegeben werden. Sehe ich das richtig?

[Acocalypso]

Hallo zusammen,

ich bin auch grad auf der Suche was ich beachten muss das meine Mobil Seite funktionert.
Ich habe jetzt zweit Tage damit verbracht, einen weg zu finden mir die Mobile Ansicht im Browser anzeigen zu lassen, nur leider hatte ich keinen Erfolg.
Habe jetzt das kiss modul installiert doch leider funktioniert es bei mir nicht. ich kann zwar sagen ok das hier will ich als mobil anzeigen lassen, aber im Browser nimmt er immer noch die Desktop version.

Habe auch ein neues Layout angelegt und das als Mobil zugewießen. Doch wie gesagt im FE sehe ich nur die Desktop variante (INFO: ich arbeite auf dem Localhost, daher kann ich das nicht mit tablet/smartphone testen.)

[MartinG]

Die Erkennung, ob der Besucher ein Mobilgerät nutzt oder nicht, läuft AFAIK über den sog. "User Agent" des Browsers. Das ist ein HTTP-Header, den der Browser bei jeder Anfrage an den Server schickt.

Du kannst ein Addon für Firefox nutzen, um den User Agent zu ändern - z.B. User Agent Switcher. Wenn du mit diesem Addon z.B. den "iPhone 3" User Agent einstellst, stuft Contao deinen Browser als Mobilversion ein und liefert das entspr. Layout.

EDIT: Das bedeutet natürlich nicht, dass deine Seite dann genauso aussieht wie später auf einem echten iPhone 3! Aber du kannst so testen, welchen HTML- und CSS-Code dein Contao an ein iPhone ausliefern würde.

[xchs]

Mich würde interessieren, ob die beiden Erweiterungen den für Mobile nicht gebrauchten Inhalt, ähnlich wie bei einer CSS-Lösung, nur verstecken oder ob es damit so ist, dass wirklich komplett andere Inhalte erstellt werden können?

Ich meine, bei "Mobile Visibility" wäre Letzteres der Fall. So jedenfalls in meinem kurzen Test.

[pmmueller]

ich bin auch grad auf der Suche was ich beachten muss das meine Mobil Seite funktionert. ...Ich habe jetzt zweit Tage damit verbracht, einen weg zu finden mir die Mobile Ansicht im Browser anzeigen zu lassen, nur leider hatte ich keinen Erfolg.

Zwei Tage. Wow. Du hast Ausdauer.

Hier zwei Möglichkeiten, auf dem Desktop die Mobilversion zu testen:

• Hänge einfach den URL-Parameter ?toggle_view=mobile an deine URL auf dem localhost: http://localhost/contaobuch/?toggle_view=mobile. Zurück dann mit ?toggle_view=desktop. Lesezeichen vereinfachen das switchen. Musst nur noch die Größe des Viewports selbst anpassen, was im Firefox z. B. mit der Web Developer Toolbar schnell gemacht ist.
• Oder man nimmt den neuen Inserttag namens {{toggle_view}}. Erstelle einfach ein neues Frontend-Modul mit diesem Inserttag und binde dieses Modul im normalen und mobilen Seitenlayout ein. Der Inserttag hängt den URL-Parameter automatisch hinten dran. Damit kann man den Besuchern überlassen, ob sie die Mobil- oder die Desktop-Version sehen möchten.

Auf der Beispielsite für die neue Auflage vom Contaobuch sitzt der Inserttag-Schalter im Fußbereich.

[chris_engel]

Noch eine Anmerkung zu meiner "Mobile Visibility" Extension:
Da ich genau das Problem hatte, dass ich (bzw. der Kunde) nur einen Seitenbaum pflegen will, aber leicht unterschiedliche Inhalte für Desktop und Mobile braucht, musste ein Weg her um Sichtbarkeit von Elementen spezifisch für Desktop und Mobil zu steuern. Dabei wollte ich mich nicht auf eine Ausblendung durch CSS verlassen, da ja z.B. Bilder dennoch von den mobilen Browsern heruntergeladen werden, was eine unglaubliche Traffic-Verschwendung ist.

Das Mobile Visibility Modul verhindert die Ausgabe der betroffenen Elemente im HTML. Steuerbar sind dabei einzelne Content-Elemente, ganze Artikel, oder ganze Seiten im Seitenbaum.
Bei letzteren wird die Seite "nur" aus allen generierten Menüs ausgeblendet, ist aber über einen Direktaufruf noch abrufbar. Für mich hat das aber bisher völlig ausgereicht.
Der Name des Moduls ist mittlerweile nicht mehr 100% treffend, denn man kann auch einstellen, dass bestimmte Inhalte nicht auf Desktop Browsern angezeigt werden. So ist das Hinzufügen von Mobile-Only Elementen möglich.

Sollten noch Fragen zum Modul aufkommen, einfach im Vorstellungsthread posten.

[Master-Lu]

Hallo zusammen,

mir erschien meine Frage in diesem Thema wohl am besten...

Davon mal abgesehen, dass man mittlerweile verrückt werden könnte, weil ein Layout auf FF, IE, Safari (Desktop), IOS (iPhone), IOS (iPad), Opera jedes mal unterschiedlich aussieht und scheinbar die CSS Hacks überhaupt nichts bringen, stehe ich hier vor einem für mich im Moment unlösbaren Problem.

Seit Contao 3.0 werden die Webseiten auf dem iPhone nicht mehr verkleinert dargestellt, sodass man die Webseite als ganzes sieht, (wie z.B. bei Contao 2.11.), sondern nur einen geringen Teil der oberen linken Kante. D.h. die Seite wird stark vergrößert.

Wie kann ich das abstellen? bzw. mit welchen Hacks kann ich Safari für IOS Geräten per CSS ansprechen? Contao scheint nicht auf die üblichen Hacks zu reagieren.

Vielen Dank für Eure Hilfe und ein schönes Wochenende inkl. 3. Advent!

Gruß

[planepix]

Guten Morgen MasterLu,

nun müsste man sicher wissen, wie das Layout aufgebaut ist.

Dieser Meta-Tag ist enthalten?:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

[Master-Lu]

Guten Morgen Planepix,

ja der scheint enthalten zu sein.

[planepix]

Auf Android ist auch nichts skaliert - also betrifft es nicht nur iOS und das iPhone.

[pmmueller]

Seit Contao 3.0 werden die Webseiten auf dem iPhone nicht mehr verkleinert dargestellt, sodass man die Webseite als ganzes sieht, (wie z.B. bei Contao 2.11.), sondern nur einen geringen Teil der oberen linken Kante. D.h. die Seite wird stark vergrößert. Wie kann ich das abstellen?

Wenn man mit mobilen Seitenlayouts arbeitet, ist der Viewport-Meta-Tag sehr nützlich, aber wenn du ihn abstellen möchtest:

• Geh ins Backend-Modul Templates
• Erstelle ein neues Template fe_page
• Suche die Zeile <?php echo $this->viewport; ?> (etwa Zeile 11)
• Lösche diese Zeile oder kommentiere den PHP-Befehl aus <?php // echo $this->viewport; ?>

Und schon zoomt's wieder runter, egal ob auf iOS oder Android.

[Master-Lu]

Guten Morgen,

vielen Dank euch beiden.
Hat geklappt.

Einen guten Start in die Woche wünsche ich.

Grüße

[Sabine_P]

Ich habe für die mobile Version ein neues Layout angelegt
- mit einer Navigation, die ein individuelles Modul ist. (Wichtig!)
Dort sind dann die Seiten, die ich für die Mobile-Version haben möchte, eingehängt.
Zusätzlich habe ich einen Header und einen Footer als Modul ins Layout eingehängt.
Es funktioniert ganz gut und springt automatisch um.
Die Stylesheets habe ich natürlich auch extra angepasst.

Ich hoffe dir hilft das was. Sonst kannst du dich gern noch mal melden.

Viele Grüße von Sabine