Mobile Version erkennen Plugin
Mobile Version erkennen Plugin
Hi,
ich hoffe ich hab mal den richtigen bereich getroffen
Also ich frage mich gerade ob jemand schon an einem Plugin sitzt, welches mobile Aufrufe erkennt und dann alle Layouts und Seitentemplates einer Einstellung nach ändert, denn bis jetzt stell ich mir ne Extra Mobile Webseite für Contenido recht schwierig vor.
Danke
ich hoffe ich hab mal den richtigen bereich getroffen
Also ich frage mich gerade ob jemand schon an einem Plugin sitzt, welches mobile Aufrufe erkennt und dann alle Layouts und Seitentemplates einer Einstellung nach ändert, denn bis jetzt stell ich mir ne Extra Mobile Webseite für Contenido recht schwierig vor.
Danke
Re: Mobile Version erkennen Plugin
Hallo,
sowas ist nicht notwendig wenn man sich mit dem Thema "Responsive Webdesign" (oder "Responsive Design") auseinander setzt.
Gruß
René
sowas ist nicht notwendig wenn man sich mit dem Thema "Responsive Webdesign" (oder "Responsive Design") auseinander setzt.
Gruß
René
Re: Mobile Version erkennen Plugin
Zum einen hat René es bereits gesagt (sogar alte Designs lassen sich responsive machen) und zum anderen kann man auch extra Mobilseiten mit Contenido aufbauen und alle Mobilgeräte per .htaccess darauf laufen lassen wie http://m.heise.de/
Ich hab zwar noch keine Beispielseite gemacht aber ich denke, es könnte so gehen:
Einen Kategoriebaum anlegen, Inhalte per Content-Allocation reinziehen.
Eine m-Subdomain machen, auf diesen Kategoriebaum verlinken.
.htaccess mobile Umleitung auf diese Subdomain machen.
Falls das so doch nicht geht, dann vielleicht mit extra Mandanten oder CSS-Auswahl und/oder Template-Auswahl.
Das Problem mit dem Inhalt müsse man in den Griff kriegen, damit man nicht doppelt schreiben muss.
Aber vielleicht hat einer das schon mal aufgebaut?
Ich hab zwar noch keine Beispielseite gemacht aber ich denke, es könnte so gehen:
Einen Kategoriebaum anlegen, Inhalte per Content-Allocation reinziehen.
Eine m-Subdomain machen, auf diesen Kategoriebaum verlinken.
.htaccess mobile Umleitung auf diese Subdomain machen.
Falls das so doch nicht geht, dann vielleicht mit extra Mandanten oder CSS-Auswahl und/oder Template-Auswahl.
Das Problem mit dem Inhalt müsse man in den Griff kriegen, damit man nicht doppelt schreiben muss.
Aber vielleicht hat einer das schon mal aufgebaut?
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.
Re: Mobile Version erkennen Plugin
Wenn du dein Layout entsprechend aufgebaut hast (responsive layout), ist es kein Problem für mobile Endgeräte die gleiche Version der Webseite nur mit einer anderen CSS-Datei auszuliefern.
Eventuell kann man manche Module daraufhin anpassen, aber das sollte eine Ausnahme sein.
Schau dir mal folgende Seite an:
- twitter.github.com/bootstrap/
- http://unsemantic.com/
- http://foundation.zurb.com/
Du kannst auch deine vorhandene CSS um einige Media-Queries erweitern, um für mobile Endgeräte, die in der Regel geringere Auflösungen haben, eine andere Version des Layout zu liefern.
Gruß
xmurrix
Eventuell kann man manche Module daraufhin anpassen, aber das sollte eine Ausnahme sein.
Schau dir mal folgende Seite an:
- twitter.github.com/bootstrap/
- http://unsemantic.com/
- http://foundation.zurb.com/
Du kannst auch deine vorhandene CSS um einige Media-Queries erweitern, um für mobile Endgeräte, die in der Regel geringere Auflösungen haben, eine andere Version des Layout zu liefern.
Gruß
xmurrix
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.
Re: Mobile Version erkennen Plugin
Hi Xmurrix,
mit media queries und responsive Design kann man das sowieso umsetzen (haben wir ja auch so gemacht), aber könnte man mit Content-Allocation eine reine parallele m.-Seite aufbauen? Oder irre ich mich da?
mit media queries und responsive Design kann man das sowieso umsetzen (haben wir ja auch so gemacht), aber könnte man mit Content-Allocation eine reine parallele m.-Seite aufbauen? Oder irre ich mich da?
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.
Re: Mobile Version erkennen Plugin
Mit der Auflösung von mobilen Endgeräten ist das so eine Sache... So manches Smartphone hat eine höhere Auflösung als die "Notebook-Standard-Breite" 1.366px oder kommt in die Nähe. Dabei ist die tatsächlich Abmessung in cm erheblich kleiner. Bedienelemente, die auf einem 15Zöller groß genug sind, werden dann auf einem 4 oder 5-Zöller Smartphone futzelig. Es fehlt einfach eine "Echtgröße" um zuverlässig einschätzen zu können wie groß jetzt Buttons sein müssen um sowohl auf einem großen als auch kleinen Bildschirm verwendbar zu sein. Bis dahin müsste man verschiedene Abfragen miteinander in Beziehung setzen um zuverlässig ermitteln zu können was der User für ein Gerät verwendet. Kennt jemand eine Möglichkeit die ppi eines Displays zu ermitteln?
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.
Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)
Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.
Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)
Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)
-
- Beiträge: 3626
- Registriert: Di 12. Okt 2004, 20:00
- Wohnort: Voerde (Niederrhein)
- Kontaktdaten:
Re: Mobile Version erkennen Plugin
Ich hätte da jetzt auf @media-queries getippt, z.B.:McHubi hat geschrieben:Kennt jemand eine Möglichkeit die ppi eines Displays zu ermitteln?
https://gist.github.com/wylieconlon/3456250
Re: Mobile Version erkennen Plugin
Schwer zu sagen, mit Content-Allocation habe ich nicht genug Erfahrung, um das beurteilen zu können. Aber mein Bauchgefühl sagt mir, dass das mit Content-Allocation keine Erleichterung wäre, sondern in Mehrarbeit enden würde. Wenn ich mich nicht täusche, ist Content-Allocation eine Art Tagging, für die Ausgabe getagten Inhalte muss man dann die Module selber Programmieren.Faar hat geschrieben:...aber könnte man mit Content-Allocation eine reine parallele m.-Seite aufbauen? Oder irre ich mich da...
Wäre gut zu erfahren, ob das jemand schon gemacht hat, also eine zweite Version der Seite per Content-Allocation.
Gruß
xmurrix
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.
Re: Mobile Version erkennen Plugin
Hey LEUTE
freut mich das ich so viel Input bekommen habe Ich werde dann bevor ich in doppelte Pflege ö. Ä. immer Mehrarbeit stecke, gleich diesen Aufwand in ein Responsive Design
Wenn es irgendwann in den nächsten Monaten fertig ist lasse ich diese gerne kritisieren
Kurz noch kennt ihr aus Erfahrung gute Seiten, die sich mit dem Thema auseinander setzen?
Danke und euch einen schönen Abend
LG CA
freut mich das ich so viel Input bekommen habe Ich werde dann bevor ich in doppelte Pflege ö. Ä. immer Mehrarbeit stecke, gleich diesen Aufwand in ein Responsive Design
Wenn es irgendwann in den nächsten Monaten fertig ist lasse ich diese gerne kritisieren
Kurz noch kennt ihr aus Erfahrung gute Seiten, die sich mit dem Thema auseinander setzen?
Danke und euch einen schönen Abend
LG CA
Re: Mobile Version erkennen Plugin
Ich würde danach googeln und mit ein Bild von Responsive Design machen.
Es ist ja nicht nur Gummiband-HTML sondern auch grundlegende Gedanken, was will ich auf einem 1920 Monitor zeigen, was auf einem Tab und was auf einem Handy.
Viele sagen, man solle zuerst anfangen, für das kleinste Mobielgerät zu designen und sich dann auf die größeren Geräte hin arbeiten.
Da fällt die "Kunst des weg lassens" nicht so schwer wie andersrum.
Man kann leider nicht wirklich die Geräte simulieren, das geht wegen der Software nicht, denn manche Geräte verschleiern ihre Mobil-Kennung und zoomen die Seite klein und die Browser auf diesen Geräten sind teils recht unterschiedlich.
Einfach das eigene Browserfenster kleiner machen, ist also nur eine Hilfsmittel zum testen aber keine Garantie für die Darstellung.
Aber man kann ja mal eine hübsche junge Dame oder einen Herrn einfach fragen, ob man mal kurz auf dessen Gerät eine Seite sehen könne
Es gibt Hilfsmittel für Menüs und anderes, solche wie jQuery Touch.
Damit lässt sich ein Menü zu einem Button zusammenfalten und der klappt dann aus, wenn man darauf ditscht.
Bei etwas größerer Auflösung (und Gerät, weil es gibt ja auch Retina Displays) kann man das Menü dann Vertikal gestalten und bei noch größeren Displays dann horizontal.
Mit dem Viewport kann man unterschiedliche CSS ansteuern, so lässt man z.B. einfach bei kleineren Displays das "float" weg und schon hat man es vertikal.
Dreispalten Design muss auf einem Tab nicht angezeigt werden und zweispalten Design macht auf einem Handy auch wenig Sinn.
Wenn man mal weiß wie das responsive Design tickt, kann man sich so manche Tricks gut auch bei anderen Seiten abschauen die das sehr gut umgesetzt haben.
Aber auch altes Design lässt sich responsive machen, kostet zwar Mühe und Arbeit, aber größtenteils geht es.
Es ist ja nicht nur Gummiband-HTML sondern auch grundlegende Gedanken, was will ich auf einem 1920 Monitor zeigen, was auf einem Tab und was auf einem Handy.
Viele sagen, man solle zuerst anfangen, für das kleinste Mobielgerät zu designen und sich dann auf die größeren Geräte hin arbeiten.
Da fällt die "Kunst des weg lassens" nicht so schwer wie andersrum.
Man kann leider nicht wirklich die Geräte simulieren, das geht wegen der Software nicht, denn manche Geräte verschleiern ihre Mobil-Kennung und zoomen die Seite klein und die Browser auf diesen Geräten sind teils recht unterschiedlich.
Einfach das eigene Browserfenster kleiner machen, ist also nur eine Hilfsmittel zum testen aber keine Garantie für die Darstellung.
Aber man kann ja mal eine hübsche junge Dame oder einen Herrn einfach fragen, ob man mal kurz auf dessen Gerät eine Seite sehen könne
Es gibt Hilfsmittel für Menüs und anderes, solche wie jQuery Touch.
Damit lässt sich ein Menü zu einem Button zusammenfalten und der klappt dann aus, wenn man darauf ditscht.
Bei etwas größerer Auflösung (und Gerät, weil es gibt ja auch Retina Displays) kann man das Menü dann Vertikal gestalten und bei noch größeren Displays dann horizontal.
Mit dem Viewport kann man unterschiedliche CSS ansteuern, so lässt man z.B. einfach bei kleineren Displays das "float" weg und schon hat man es vertikal.
Dreispalten Design muss auf einem Tab nicht angezeigt werden und zweispalten Design macht auf einem Handy auch wenig Sinn.
Wenn man mal weiß wie das responsive Design tickt, kann man sich so manche Tricks gut auch bei anderen Seiten abschauen die das sehr gut umgesetzt haben.
Aber auch altes Design lässt sich responsive machen, kostet zwar Mühe und Arbeit, aber größtenteils geht es.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.
Re: Mobile Version erkennen Plugin
Das stimmt, eine Garantie gibt es nicht.Faar hat geschrieben:Einfach das eigene Browserfenster kleiner machen, ist also nur eine Hilfsmittel zum testen aber keine Garantie für die Darstellung.
Aber anstatt das Fenster zu verkleinern, kann man eine Seite wie responsinator.com bemühen, diese zeigen die Seite auf Smartphones und Tablets, zumindest von der Größe her.
Man sollte schon bedenken, dass es immer noch der eigene Browser ist der die Darstellung produziert, aber man hat zumindest mal eine Richtung.
Gruß
René
Re: Mobile Version erkennen Plugin
Hallo ersteinmal,
habe gerade die Diskusion gelesen. Ich bin gerade dabei, mein erstes HTML5 +CSS3 Responsive Webdesign zu erstellen. Dabei habe ich nur ein Problem. Ich möchte in der Phone Ansicht (z.B. < 420px) im Kopf ein Bild anzeigen und in der Tablet bzw. PC Ansicht eine Slidshow. Wie löse ich das Problem? Kann ja nicht zwei Module in einen Container legen. Einfach nur ist auch keine Lösung weil dann doch wieder alle Daten gelesen werden müssen - in allen Darstellungsgrößen.
Ich möchte aber nicht den Inhalt einfach verdoppeln und dann via Template zwei verschiedene Seiten zuweisen und pflegen müssen.
Kann man den Inhalt eines Container mit htaccess "variabel" machen? Wenn Auflösung < 420px = Modul Image, > 420px = Modul Slider?
Oder geht es noch einfacher und ich hab nur nicht den Wald vor lauter Bäumen nicht gesehen!
LG aus Marburg
habe gerade die Diskusion gelesen. Ich bin gerade dabei, mein erstes HTML5 +CSS3 Responsive Webdesign zu erstellen. Dabei habe ich nur ein Problem. Ich möchte in der Phone Ansicht (z.B. < 420px) im Kopf ein Bild anzeigen und in der Tablet bzw. PC Ansicht eine Slidshow. Wie löse ich das Problem? Kann ja nicht zwei Module in einen Container legen. Einfach nur
Code: Alles auswählen
display:none;
Ich möchte aber nicht den Inhalt einfach verdoppeln und dann via Template zwei verschiedene Seiten zuweisen und pflegen müssen.
Kann man den Inhalt eines Container mit htaccess "variabel" machen? Wenn Auflösung < 420px = Modul Image, > 420px = Modul Slider?
Oder geht es noch einfacher und ich hab nur nicht den Wald vor lauter Bäumen nicht gesehen!
LG aus Marburg
MakD 42
______________________
Contenido 4.6.8 & 4.8.15
MySQL 5.1.54
Linux/Apache
Meine Contenidoprojekte: art & weise | StadtMedia | aidea
______________________
Contenido 4.6.8 & 4.8.15
MySQL 5.1.54
Linux/Apache
Meine Contenidoprojekte: art & weise | StadtMedia | aidea
Re: Mobile Version erkennen Plugin
Wie wäre es, wenn Du beide Module in einem zusammenführst?
->
INPUT:
ursprünglicher Modul-Input für Bild
ursprünglicher Modul-Input für Slideshow
OUTPUT:
if(endgeraet=="mobile")
{
ursprünglicher Modul-Output für Bild
}
else
{
ursprünglicher Modul-Output für Slideshow
}
Oder Du bindest in Deinem Template beide Module ein und ergänzt die beiden Outputs mit einer if-Abfrage, so dass die Ausgabe je nach Endgerät differiert.
->
INPUT:
ursprünglicher Modul-Input für Bild
ursprünglicher Modul-Input für Slideshow
OUTPUT:
if(endgeraet=="mobile")
{
ursprünglicher Modul-Output für Bild
}
else
{
ursprünglicher Modul-Output für Slideshow
}
Oder Du bindest in Deinem Template beide Module ein und ergänzt die beiden Outputs mit einer if-Abfrage, so dass die Ausgabe je nach Endgerät differiert.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.
Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)
Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.
Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)
Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)
Re: Mobile Version erkennen Plugin
Hallo Markus,
gute Idee! Ich weiss nicht ob das geht -
ich weiss sicher, dass ich das leider selber nicht umsetzenn kann.
Hast Du schon mal eine solche "Verbindung" zweier Module verwendet/umprogrammiert?
... oder kennst du jemanden?
LG
gute Idee! Ich weiss nicht ob das geht -
ich weiss sicher, dass ich das leider selber nicht umsetzenn kann.
Hast Du schon mal eine solche "Verbindung" zweier Module verwendet/umprogrammiert?
... oder kennst du jemanden?
LG
MakD 42
______________________
Contenido 4.6.8 & 4.8.15
MySQL 5.1.54
Linux/Apache
Meine Contenidoprojekte: art & weise | StadtMedia | aidea
______________________
Contenido 4.6.8 & 4.8.15
MySQL 5.1.54
Linux/Apache
Meine Contenidoprojekte: art & weise | StadtMedia | aidea
Re: Mobile Version erkennen Plugin
Ähhh... Die Lösung steht doch schon im Post... Du brauchst lediglich um die Modul-Ausgabe die if-Bedingung einsetzen...
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.
Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)
Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.
Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)
Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)