Mobile.css - Konzept für verschiedene Devices...

[netsrac]

Welche Funktion hat eigentlich die mobile.css in dem Design Ordnern?

Wie sieht das Konzept für unterschiedliche devices (z.b. IPhone, iPad, PC) aus? Sollte man hier für jedes Device ein eigenes XML erstellen und dieses über den entsprechenden Aufruf auswählen bzw. mit einen vorgeschalteten Skript? Oder gibt es hier andere Lösungsansätze.

Bin ich der Einzige, der die CV gerne auf verschiedenen Auflösungen betreiben will?!

Danke, Netsrac

[makki]

Sollte man hier für jedes Device ein eigenes XML..

Ich glaub (besser: ich bin überzeugt davon!) das ist mithin so ein bisschen der Witz dieser ganzen Nummer: das man zwar kann wenn man das will, aber das eben nicht muss..
Für jedes Endgerät in jeder Auflösung neu zu malen.. Sehnenscheidentzüdung gibts ja schon für viel Geld anderswo

Aber im Detail sollen das lieber die Kenner erklären, da ist auch noch viel Optimierungspotential drin aber ich denke ich gehe nicht zuweit, wenn ich behaupte das keiner der Entwickler anstrebt, das man sich für ein mobile 800x480 ggü dem Wandpanel mit 1600x900 die Visu nochmal malen soll/muss/will

Makki

[Chris M.]

Bin ich der Einzige, der die CV gerne auf verschiedenen Auflösungen betreiben will?

Eine gute Visu ist Auflösungs-irrelevant.

Was störts ob Steve auf die selbe Fläche ein paar grobe Pixel oder ein paar mehr mit Größen unter der Retina-Auflösung verteilt hat - die Finger bleiben gleich groß.

Daher ist eine gute Visu nur von der tatsächlichen Größe (in Millimeter) abhängig.

Und dann kann es, je nach Display-Größe (nicht Auflösung) Sinn machen, unterschiedliche Darstellungen zu haben.
So wird bei der CV z.B. im Pure Design auf normalen Größen alles in zwei Spalten dargestellt, auf einem kleinen mobilen Teil dagegen alles in eine Spalte umgebrochen.

(Übrigens, ich betreibe die CV in ca. 2,3 Mio verschiedenen Auflösungen. Jetzt darfst Du ausrechnen, welche Auflösung mein Bildschirm hat, auf dem der größenveränderbare Browser läuft )

[netsrac]

Daher ist eine gute Visu nur von der tatsächlichen Größe (in Millimeter) abhängig.

Okay...genau das meinte ich dann eigentlich auch. Ich gebe Dir recht, die Pixel-Dichte spielte keine Rolle, sondern es kommt auf die physikalische Größe des Displays an.

Aber vielleicht habe ich mich ja auch nicht korrekt ausgedrückt:

Fakt ist, dass eine Visu auf dem iPad oder PC in einem mehrspaltigen Design gut aussieht, ich das selbe Design aber so nicht auf dem iPhone nutzen kann.

Wenn ich z.B. Diagramme mit Pixelbreiten erstelle. Selbst wenn ich hier Prozent-Angaben nutze, dann sieht das auf dem iPad gut aus, auf dem iPhone aber nicht, da dann die Grafik zu klein wird.

Meine Frage war daher darauf gerichtet, wie das Konzept aussieht. Soll man hier mit mehreren XMLs arbeiten? Oder wird es einmal ein Design geben, was fürs iPhone & Co gedacht ist und man wechselt das Design, statt dem XML.

Da es bereits ein mobile.css gibt, ist doch hier bestimmt schon was angedacht, oder?!

Könnte man hier nicht auch mit jQuery-Mobile arbeiten?

Danke...Netsrac

[Chris M.]

Okay...genau das meinte ich dann eigentlich auch. Ich gebe Dir recht, die Pixel-Dichte spielte keine Rolle, sondern es kommt auf die physikalische Größe des Displays an.

Mir war es wichtig darauf hinzuweisen, da im Hauptforum regelmäßig Beiträge zu einer hier relativ weiter verbreiteten Visu-Lösung kommen, und man sich dort fragt, wie man die auf eine spezielle Auflösung bringt bzw. von einer bestehenden auf eine andere...

Fakt ist, dass eine Visu auf dem iPad oder PC in einem mehrspaltigen Design gut aussieht, ich das selbe Design aber so nicht auf dem iPhone nutzen kann.

Wenn ich z.B. Diagramme mit Pixelbreiten erstelle. Selbst wenn ich hier Prozent-Angaben nutze, dann sieht das auf dem iPad gut aus, auf dem iPhone aber nicht, da dann die Grafik zu klein wird.

Meine Frage war daher darauf gerichtet, wie das Konzept aussieht. Soll man hier mit mehreren XMLs arbeiten? Oder wird es einmal ein Design geben, was fürs iPhone & Co gedacht ist und man wechselt das Design, statt dem XML.

Es gibt verschiedene Möglichkeiten (und es wird bewusst nicht ein Weg festgelegt):
Man kann eine Config nehmen und z.B. per URL ein anderes (für Mobile Geräte optimiertes) Design "überladen".
Oder man kann für unterschiedliche Geräte eigene Configs erstellen (und per URL auswählen welches in Frage kommt). Hier kann man z.B. bewusst für's Mobile Gerät Inhalte weg lassen, damit es schneller und mit weniger Datentransfer geht.

[2ndsky]

Eben gesehen und gedacht, es wäre für euch vielleicht interessant: https://github.com/yyx990803/HTML5-Clear
schaut euch mal die Demo auf'm iPhone an... ist echt gut gelungen.

[netsrac]

Echt interessant...müsste man nur schauen, wie man das parallel zu dem "normalen" Interface einbaut, ohne dass man zwei Code-Bases pflegen muss und ohne dass der jetztige code durch die ständigen "if-browser-gleich" Abfragen unübersichtlich wird.

Habe gerade gestern gemerkt, dass sich die Silder für die Dimmer eigentlich auf meine iPhone gar nicht nutzen lassen, da man nicht silden, sondern nur tippen kann und da sind dann meine Finger einfach zu dick, um die richtige Position zu finden.

Netsrac

[hannes loehr]

Habe gerade gestern gemerkt, dass sich die Silder für die Dimmer eigentlich auf meine iPhone gar nicht nutzen lassen, da man nicht silden, sondern nur tippen kann und da sind dann meine Finger einfach zu dick, um die richtige Position zu finden.

Netsrac

Ich hatte eigentlich im Januar einen Fix dafür eingepflegt, damit Jquery-UI-Sachen auf iOS-Geräten besser funktionieren, insbesondere ging es da um den Slider und den von Dir beschriebenen Effekt.

Gruß
Hannes

[netsrac]

Ich hatte eigentlich im Januar einen Fix dafür eingepflegt, damit Jquery-UI-Sachen auf iOS-Geräten besser funktionieren, insbesondere ging es da um den Slider und den von Dir beschriebenen Effekt.

Hmmm...davon kann ich nix merken. Habe aber die aktuelle Version aus dem SVN. Habe "discreet" und "pitchblack" als theme im Einsatz.

Irgendeine Idee, wie man die aus iOS bekannten Slider und Switches einbauen könnte? Wie sieht das mit jQuerymobile aus? Wäre das nicht etwas für touch tables?

[Chris M.]

https://github.com/yyx990803/HTML5-Clear
schaut euch mal die Demo auf'm iPhone an... ist echt gut gelungen.

Auf dem PC hab ich leider kein Multi-Touch und auf'm Android mag die Demo-Seite nicht

Echt interessant...müsste man nur schauen, wie man das parallel zu dem "normalen" Interface einbaut, ohne dass man zwei Code-Bases pflegen muss und ohne dass der jetztige code durch die ständigen "if-browser-gleich" Abfragen unübersichtlich wird.

Die Idee der Bedienung (im Demo-Video sichtbar) finde ich auch sehr interessant - nur fehlt mir gerade die Idee, wie man diese für Aufgaben-Listen schöne Bedien-Metapher auf eine Visu übertragen kann, die ja vom Aufbau sehr statisch sein muss (Wiederfindbarkeit!), aber da drauf dynamische Stati anzeigt.

Was ich aber sehr inspirierend finde, ist dass man sich überlegen sollte, ob nicht andere Bedienmöglichkeiten nicht auch andere Bedienmethaphern verlangen.
Dass es einen Unterschied zwischen 15" PC und 15" Touch-Panel in der Wand gibt, ist klar (Maus vs. Wurschtfinger). Hier hat der Touch-Ansatz "gewonnen" und die PC-Anwendung nutzt diese Bedien-Methapher mit, auch wenn ich mit einer Maus viel filigraner auswählen kann und auch noch eine Tastatur für Eingaben hätte...
Bei einem mobilen Gerät ist nun das Verhältnis der Finger-Größe zur Anzeige-Fläche sehr schlecht. Dafür ist es immer dabei, so kann z.B. eine Nachricht/Popup/... auf einem Smartphone wesentlich besser informieren als auf einem Touchpanel, da ich das eine 24h bei mir habe, das andere aber z.B. während der Arbeit weit weg ist.
Und auch Multitouch ist am Touchpanel kaum und am PC so gut wie gar nicht angekommen.

Habe gerade gestern gemerkt, dass sich die Silder für die Dimmer eigentlich auf meine iPhone gar nicht nutzen lassen

Ich hatte eigentlich im Januar einen Fix dafür eingepflegt

Mobile Geräte habe ich für mich stark herunterpriorisiert, alleine weil ich bis vor kurzem noch gar keines hatte. So habe ich dankend anderen den Vortritt gelassen.

Dank meinem Androiden habe ich nun auch ein deutlich höheres Interesse an der Funktionalität. Werde aber weiterhin für mich iIrgendwas kaum beachten...

In Summe heißt das: Mobile Geräte sind sehr wichtig (waren von Anfang an immer Design Ziel, wenn auch nicht Design Umgebung...). Und hier müssen wir auch noch gut nachlegen.
Ziel sollte aber sein, eine gemeinsame Lösung mit den "großen" Geräten zu finden.

So ist die CV damit in's Rennen gegangen, dass auf großen Displays alles zweispaltig angezeigt wird, und das automatisch auf kleinen, schmalen Displays (= Hochkant) auf eine Spalte umgebrochen wird. (Dass die Slider trotzdem unsäglich schmal bleiben, war mir da noch nicht klar; von der technischen Bedienbarkeit abgesehen).
Jetzt wo wir auf die 12-spaltigen Designs gehen (für große Displays ein sehr sinnvoller Schritt), müssen wir uns überlegen, was das für die kleinen bedeutet.

Auch wenn man natürlich pro Geräte-Klasse eine eigene Config bauen kann (und das auch Sinn machen kann, um gewisse Dinge auszublenden), sollte es auch immer eine Möglichkeit geben, mit einer gemeinsammen Config zu leben.

[2ndsky]

Auch wenn man natürlich pro Geräte-Klasse eine eigene Config bauen kann (und das auch Sinn machen kann, um gewisse Dinge auszublenden), sollte es auch immer eine Möglichkeit geben, mit einer gemeinsammen Config zu leben.

Das wollte ich gerade fragen, denn das halte ich für sehr wichtig. Auf'm iPhone möchte ich nämlich ein viel flacheres Menü mit den wichtigsten Sachen aber auf dem iPad hätte ich schon gerne etwas mehr Möglichkeiten. Wie wird denn nach Geräte-Klassen unterschieden? Kann ich bei einer separaten Config auch ein separates CSS verwenden? Möchte mir für's iPhone die GUI angelehnt an die old scool iOS Apps erstellen, ähnlich wie hier:


Quelle: iPhone Gui im nativen iPhonedesign für IPS-Homecontrol 2007R2 - IP-Symcon Community Forum

[netsrac]

Nungut, was immer gehen würde ist es ein kleines PHP oder ein JS als index einsetzen, hier den Browser abfragen und in Abhängigkeit davon auf die "echte" index.html mit eintsprechenden Parameter für das Config weiterleiten.

Netsrac

[tht]

Hier geht es doch im Grunde um eine Browserweiche. Hierfür gibt es vielfältige Ansätze, sei es Perl, PHP, Conditional Comments (für den "Sonderfall" IE), JS oder sogar "tief unten" per useragent-basiertem url-rewrite. Die Frage ist: wie soll das Konzept aussehen und welchen Weg will man gehen?

[Chris M.]

Kann ich bei einer separaten Config auch ein separates CSS verwenden?

Klar, das geht jetzt schon wunderbar. In deiner Config nennst Du das zu verwendende Design. Da kannst Du statt pure, discreet, alaska, ... natürlich auch eines nehmen, das genau diese Optik erzeugt (dazu muss dieses Design natürlich exististieren )
Es geht sogar noch mehr: Du kannst ein beliebiges Design in der Config festlegen (z.B. eine Config für'n PC mit einem dafür passenden Design) und per URL-Parameter das zu verwendende Design übersteuern. Legst Du nun diesen URL-Parameter im Lesezeichen auf dem mobilen Gerät mit ab, dann erscheint dort die identische Config immer mit einem dort passend[er]en Design.

Hier geht es doch im Grunde um eine Browserweiche. [...]
Die Frage ist: wie soll das Konzept aussehen und welchen Weg will man gehen?

Design-Wahl per Browserweiche ist Müll. Der Anwender wählt das geeignete Design und fertig. Kein Grund ihn zu entmündigen!

Was als "Browserweiche" i.O. ist, und auch schon genutzt wird, ist z.B. für mobile Geräte ein paar CSS-Erweiterungen zu laden, die ein bestehendes Design dort etwas optimieren.

[tht]

Design-Wahl per Browserweiche ist Müll. Der Anwender wählt das geeignete Design und fertig. Kein Grund ihn zu entmündigen!

Was als "Browserweiche" i.O. ist, und auch schon genutzt wird, ist z.B. für mobile Geräte ein paar CSS-Erweiterungen zu laden, die ein bestehendes Design dort etwas optimieren.

Dann habe ich mich zu knapp ausgedrückt, sorry. Mir ging es um den zweiten Punkt. Der User soll sein Design durchaus selbst wählen, aber unterschiedliche Geräte können Anpassungen notwendig machen und dafür ist die Weiche nützlich. Auf einem Smartphone will ich Inhalte wahrscheinlich anders präsentiert bekommen, als auf einem Tablet oder gar Rechner.

Ich könnte mir auch halbwegs generische Möglichkeiten der Konfiguration dafür vorstellen, indem man beim Erstellen der Visu z.B. Geräteklassen definiert und die Inhalte dann pro Klasse entsprechend strukturiert, aber innerhalb des gewählten Designs darstellt. Die darzustellende Klasse könnte dann per Weiche ausgewählt werden, wobei die Möglichkeit zur manuellen Umschalten erhalten bleiben sollte. Und ja, ich bin mir der Komplexität dieser Idee durchaus bewusst und leider kann ich zu deren Umsetzung aktuell auch wenig betragen, da ich erstmal das Haus fertig bauen muss, für dass ich in ein paar Monaten meine Visu erstellen werde.