Mobile Version erkennen Plugin

Ideen für neue Funktionen in CONTENIDO?
contenidoAmateur

Mobile Version erkennen Plugin

Beitrag von contenidoAmateur » Fr 5. Apr 2013, 00:40

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 :)

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Mobile Version erkennen Plugin

Beitrag von Spider IT » Fr 5. Apr 2013, 08:43

Hallo,

sowas ist nicht notwendig wenn man sich mit dem Thema "Responsive Webdesign" (oder "Responsive Design") auseinander setzt.

Gruß
René

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von Faar » Fr 5. Apr 2013, 11:58

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?
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

xmurrix
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von xmurrix » Fr 5. Apr 2013, 15:21

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

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von Faar » Sa 6. Apr 2013, 16:46

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?
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von McHubi » Sa 6. Apr 2013, 20:36

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)

Dodger77
Beiträge: 3626
Registriert: Di 12. Okt 2004, 20:00
Wohnort: Voerde (Niederrhein)
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von Dodger77 » So 7. Apr 2013, 16:51

McHubi hat geschrieben:Kennt jemand eine Möglichkeit die ppi eines Displays zu ermitteln?
Ich hätte da jetzt auf @media-queries getippt, z.B.:

https://gist.github.com/wylieconlon/3456250

xmurrix
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von xmurrix » So 7. Apr 2013, 22:57

Faar hat geschrieben:...aber könnte man mit Content-Allocation eine reine parallele m.-Seite aufbauen? Oder irre ich mich da...
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.

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.

contenidoAmateur

Re: Mobile Version erkennen Plugin

Beitrag von contenidoAmateur » Mo 8. Apr 2013, 17:57

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

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von Faar » Mi 10. Apr 2013, 18:04

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 :wink:

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.

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Mobile Version erkennen Plugin

Beitrag von Spider IT » Do 11. Apr 2013, 07:50

Faar hat geschrieben:Einfach das eigene Browserfenster kleiner machen, ist also nur eine Hilfsmittel zum testen aber keine Garantie für die Darstellung.
Das stimmt, eine Garantie gibt es nicht.
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é

MakD42
Beiträge: 103
Registriert: Sa 8. Nov 2003, 19:01
Wohnort: Marburg
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von MakD42 » Mo 10. Jun 2013, 07:40

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

Code: Alles auswählen

display:none;
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
MakD 42
______________________
Contenido 4.6.8 & 4.8.15
MySQL 5.1.54
Linux/Apache
Meine Contenidoprojekte: art & weise | StadtMedia | aidea

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von McHubi » Mo 10. Jun 2013, 10:28

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

MakD42
Beiträge: 103
Registriert: Sa 8. Nov 2003, 19:01
Wohnort: Marburg
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von MakD42 » Mo 10. Jun 2013, 11:13

Hallo Markus,

gute Idee! Ich weiss nicht ob das geht -
ich weiss sicher, dass ich das leider selber nicht umsetzenn kann. :motz:

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

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Mobile Version erkennen Plugin

Beitrag von McHubi » Mo 10. Jun 2013, 12:25

Ähhh... Die Lösung steht doch schon im Post... Du brauchst lediglich um die Modul-Ausgabe die if-Bedingung einsetzen... :wink:
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)

Antworten