Mobiles Seitenlayout als Erweiterung in 4.9 - Nachteile in der Zukunft?

[pipkin]

Hallo zusammen,

ich stehe gerade vor der Entscheidung, wie ich eine Website umsetze und habe einen Anwendungsfall, wo mir ausnahmsweise ein separates Layout für mobile Endgeräte absolut sinnvoll erscheint. Es geht darum, dass im der Desktop-Version etliche hochaufgelöste, bildschirmfüllende Bilder geladen werden sollen.

Im Smartphone wird ein anderes Bildformat (Seitenformat) benötigt, die Bilder werden dafür extra neu angelegt. Ich habe also zwei Versionen.

Da es das mobile Seitenlayout nicht mehr gibt, zögere ich aufgrund der Diskussion, dass dies ein veralteter Ansatz sei, die Erweiterung zu installieren. Denn wer weiß, ob es die irgendwann überhaupt noch gibt.

Ein anderer Ansatz könnte sein, im Content Element jeweils ein anderes Bild für die mobile Ausgabe anzulegen, aber hierfür habe ich keine Erweiterung gefunden.

Mediaqueries sind da auch keine Lösung, da trotz display none die JPGs ja trotzdem geladen werden, wenn sie im Quellcode stehen.
In Contao sind die Bilder alle über ce_text-Elemente organisiert und werden nicht etwa als css Background-Images o.ä. eingesetzt.


Wie gehe ich am besten vor?

a) Ruhig die Erweiterung nehmen, wird es schon noch ein paar Jahre geben?
b) Eine andere Idee...?

Ich bin dankbar für jeden Denkansatz...!

Nachtrag: In der Beschreibung der Erweiterung steht:

In Contao 4.8 wurde die Unterstützung für mobile Seitenlayouts entfernt. Wenn deine Webseite diese Funktion weiterhin benötigt, installiere diese Erweiterung. Beachte, dass dabei der Cache für alle entsprechenden Seiten deaktiviert wird!

Was bedeutet der Hinweis mit dem Cache?
Ohje... habe gerade das hier dazu gelesen:https: //contao.org/de/news/contao_4-8-0.html

Jetzt steigt bei mir gerade dezent Panik auf. Der Cache soll natürlich genutzt werden.

Herrje... wie mach ich das bloß. Ich kann doch nicht im Smartphone per display none versteckte Content Elemente von 18 MB im Hintergrund laden lassen.......

[mlweb]

Diese Erweiterung hat @lucina letztens empfohlen https://extensions.contao.org/?q=mobile-only&pages=1
Ich kenne sie allerdings selbst nicht. Nach Deiner Beschreibung könnte sie Dein Problem vielleicht lösen.
So wie Du es beschreibst kann man allerdings m.E. mit responsiven Bildern arbeiten, denn ein anderes Seitenformat ist ja mit den Bildgrößen von Contao möglich.

[pipkin]

Danke für den Tipp, über die Erweiterung bin ich auch gestolpert. Weißt Du zufällig, wie sie arbeitet? Ich hatte die Befürchtung, dass sie ggf. auch wieder nur mit css arbeitet. Aber ich probiere sie am besten einfach mal aus!

So wie Du es beschreibst kann man allerdings m.E. mit responsiven Bildern arbeiten, denn ein anderes Seitenformat ist ja mit den Bildgrößen von Contao möglich.

Die Smartphone-Versionen werden leider angeliefert - und die Bildausschnittsdiskussion führen Designer. Diese Abstimmung wäre über Contao etwas schwierig. Ich könnte natürlich dann diese Version einfach nicht verwenden und stattdessen versuchen, das Bild pixelgenau als Bildausschnitt festzulegen, aber da bin ich mir nicht sicher, ob das klappt... wäre vielleicht aber auch einen Versuch wert. Ist bei so vielen Bildern aber natürlich ein mega Aufwand...

[pipkin]

Diese Erweiterung hat @lucina letztens empfohlen https://extensions.contao.org/?q=mobile-only&pages=1

Du hast mir gerade das Wochenende gerettet!!!!!

Die funktioniert klasse. Die Elemente (habe es gerade mit Artikeln und Inhaltselementen getestet) erscheinen tatsächlich nicht im Quellcode. HAMMER!!! :-)

Ein riesiges Dankeschön!!!!!

[Franko]

Ich nutze bisher dazu auch nur resp. (bzw. Art Direction) Image Möglichkeiten in Contao.
Auf welcher Grundlage/Kriterien entscheidet die Erweiterung denn zwischen Desktop/Mobile bzw. kann man das zusätzlich konfigurieren?

[pipkin]

Die Frage beschäftigt mich auch gerade.
Ich verstehe davon leider nicht viel, aber beim Querlesen der Codes ist mir $isMobileDevice aufgefallen, was irgendwie auf dem vom Browser gesendeten User Agent basiert. Auf Serverseite wird das mit den hoffentlich hinterlegten Browserdefinitionen abgeglichen. Abgesehen von den Ausnahmen, die sich nicht richtig identifizieren, wird also serverseitig entschieden, was mobil ist.

Es ist insofern schwierig, weil es keinen zwingenden Zusammenhang mehr gibt zwischen "tragbarem Gerät", Datenverbindung und Auflösung.

Man muss sich also gut überlegen, wann man das überhaupt einsetzt. In meinem Fall möchte ich Smartphone-User nicht mit 18 Megabyte "beglücken" sondern mit einer mobilfreundlicheren Variante. Ich muss aber damit rechnen, dass dieselbe Variante auf einem großen iPad landet. Hierfür dann eine responsive "Extrawurst" zu bauen, die bei ausreichender Auflösung dann doch die große Bild-Version lädt, würde die mobile Ausgabe dann wieder völlig unsinnig machen, da in der responsiven großen Version ja wieder die 18MB Bildmaterial drinstecken würden.

Perfekt wäre eine Lösung, die feststellen könnte, mit welcher Datengeschwindigkeit jemand gerade unterwegs ist und eine Kombination mit Auflösungen ermöglicht. Aber gibbet wahrscheinlich nicht...

[Franko]

Naja,
hinsichtlich images erstellt Contao ja mit diesem Feature verschieden Auflösungen mit entsprechenden unterschiedlichen Datei Größen.
Die Browser entscheiden dann welche davon optimal passen und zur Anzeige kommen. Ältere Infos - aber immer noch richtig - hierzu:

https://kulturbanause.de/blog/respon...izes-adaptive/
https://rocksolidthemes.com/de/conta...picture-contao

[pipkin]

Das ist richtig... aber kann ich leider nicht nutzen, da ich einen Schwung Bilder für die mobile Version bekomme, und zwar so, dass diese nicht einfach nur ein Ausschnitt der Desktop-Version sind, sondern einen völlig anderen Anschnitt haben - oder sogar ein anderes Motiv. Beispielsweise wird in der Bildversion für 5k ein entsprechend hochaufgelöstes Superbild eines Portraits gewählt, das der Fotograf im Querformat konzipiert hat, und in der Hochkant-Version im Smartphone wird die vom Fotografen geschossene Hochkant-Aufnahme genutzt.

[Franko]

Responsive Images mit „Art Direction“ wird ja mit Contao ebenfalls unterstützt ...
Wenn die Vorgaben aber, wie es scheint, auf unterschiedlichen Images basieren MÜSSEN - ist es schwierig.

[tab]

Hmm. Dann vielleicht eine mobile URL für die Mobilversion oder zumindest für langsame Downloadgeschwindigkeiten? Das müsste dann freilich der Besucher selbst auswählen. Für die zur Verfügung stehende Bandbreite gibts wohl keine Media Queries, für fast alles denkbare Andere dagegen schon. Das CSS wird dadurch aber natürlich beliebig kompliziert.

[pipkin]

Das CSS wird dadurch aber natürlich beliebig kompliziert.

Exakt...........

Ich habe gerade den Plan, eine Standard-Variante zu machen, die auch voll responsiv ist mit allem Zipp und Zapp, responsiven Bildern usw.

Und dann könnte eine Weiche (mit noch völlig unbekannter Technik), die die Auflösung abfragt, zu einer separaten Nur-Smartphone-Version (Subdomain o.ä.) führen, die dann wirklich nur die Extra-Smartphone-Bilder lädt. Dann sind es eben doch zwei Websites. Dann wird da gar nichts mehr über den User Agent entschieden. Mal schauen...... Wobei mich das ganze sehr an die Zeit erinnert, als man noch Weichen für Netscape und Explorer gemach hat :-)))

[tab]

Naja, eigentlich will man ja davon wegkommen, für jedes Gerät und jeden Browser eine Extrawurst zu braten. Wenn ich wirklich eine 18 MB Webseite hätte - was ich noch nie hatte - würde ich vielleicht beim Aufruf eine Warnung anzeigen und eine mobile Seite bzw eine mit kleineren/weniger Bildern anbieten. Aber Verbindungsgeschwindigkeit soll ja wohl auch bald kein Kriterium mehr sein im weltführenden Land der superschnellen Netze bis zur letzten Milchkanne . Wenn 5G dann bis ca im Jahr 2100 hier flächendeckend verfügbar ist, kann man sich wieder voll auf Viewport-Größen und Bildgrößen fokussieren . Was sind dann schon 18 MB? Soviel lädt und sendet dann schon der Einsteiger-Kühlschrank pro Sekunde. Natürlich nur solang er voll aufgefüllt ist, sonst natürlich mehr.

[pipkin]

Naja, eigentlich will man ja davon wegkommen, für jedes Gerät und jeden Browser eine Extrawurst zu braten.

Eigentlich ja, sehe ich auch so. Und war in den letzten *zähl* 12 Jahren bei mir auch nicht nötig!!

Das mit der Warnung - oder nennen wir es politisch besser "Service-Hinweis" lasse ich mir auch nochmal durch den Kopf gehen.

Es wäre auch alles nicht so wild, wenn die Datenmengen nicht auf ein und derselben Seite geladen werden würden und leider auch alle Bilder vor dem ersten Klick quasi geladen sein müssten, damit es nicht zu unschönen Effekten kommt. Also nix mit scrollen + nachladen im Hintergrund, lazy load o.ä. Ok, zu unerwünschten Effekten kann es natürlich auch völlig unabhängig von Gerät, Auflösung oder Netz kommen: 5K-iMac daheim mit O2-Störung macht auch keinen Spaß.

Wenn 5G dann bis ca im Jahr 2100 hier flächendeckend verfügbar ist

[mlweb]

Das ist richtig... aber kann ich leider nicht nutzen, da ich einen Schwung Bilder für die mobile Version bekomme, und zwar so, dass diese nicht einfach nur ein Ausschnitt der Desktop-Version sind, sondern einen völlig anderen Anschnitt haben - oder sogar ein anderes Motiv.

So etwas habe ich schon mal umgesetzt mit reinem html. Waren allerdings nur wenige Bilder und der Redakteur muss diese nicht pflegen. Kann man aber wahrscheinlich auch mit einem custom-Element umsetzen, würde ich mir auf jeden Fall mal genauer anschauen, ob das geht.

[3dr]

Das ist richtig... aber kann ich leider nicht nutzen, da ich einen Schwung Bilder für die mobile Version bekomme, und zwar so, dass diese nicht einfach nur ein Ausschnitt der Desktop-Version sind, sondern einen völlig anderen Anschnitt haben - oder sogar ein anderes Motiv. Beispielsweise wird in der Bildversion für 5k ein entsprechend hochaufgelöstes Superbild eines Portraits gewählt, das der Fotograf im Querformat konzipiert hat, und in der Hochkant-Version im Smartphone wird die vom Fotografen geschossene Hochkant-Aufnahme genutzt.

Wer will denn eine solche Konstruktion auf Dauer pflegen? Frankos Ansatz ist m.E. der einzig zielführende und ich würde daher mal den Entscheidern die Problematik erläutern und die genialen Möglichkeiten der in Contao implementierten responsiven Bildgrößenberechnungen in Kombination mit MediaQueries und etwas CSS erklären. Und selbst für einen 5K Monitor braucht es doch kein 18MB großes Bild, oder habe ich da was verschlafen?