Website f. Browser/Mpbile

[Netzwerkidi]

Hallo,

wie entwickelt man eigentlich Webseiten, die sowohl auf dem Browser als auch auf mobile devices (Smart Phones) immer optimal aussehen und bedienbar sind?

Ich habe mir mal jQuery Mobile angesehen, und wenn man das einsetzt, ohne direkt viel zu ändern, dann sieht die Webseite im Browser aus wie auf einem breiten iPhone und umgekehrt natürlich auch.

Bei Meinestadt.de habe ich gesehen, dass die offenbar zwei Varianten haben: unter http://www.meinestadt.de und eine unter mobile.meinestadt.de.

Dasselbe mit hrs.de, die wap.hrs.de für mobile Geräte haben.

Flightstats.com hat wieder um ein Unterverzeichnis http://mobile.flightstats.com/go/Mobile/flightStatusByAirport.do

Ich würde eigentlich eher zu einer Endgeräteweiche (Browserweiche) tendieren.

Sollte man auf JS setzen oder nicht?

Was ist zu empfehlen, welche Tools sind gut, wie sollte man vorgehen, oder ist das von Fall zu Fall unterschiedlich?

Was empfehlen die Experten hier?


Beste Grüße

Idi

 

[ComFreek]

Hallo Netzwerkidi,

ich würde generell auf zwei unterschiedliche Layouts setzen. Wenn man nach dem MVC-Prinzip oder irgendeinem anderen Prinzip, welches Logik und Design trennt, programmiert, ist es eigentlich kein großes Ding zwei Layouts zu erstellen.

Du kannst natürlich auch jeweils ein anderes Stylesheet einbetten, aber das wird dann kompliziert, wenn du eine andere HTML-Struktur (z.B. wegen jQuery Mobile) benötigst.

Ich würde auch serverseitig auf eine andere URL bzw. auf eine Subdomain weiterleiten lassen.

Sollte man auf JS setzen oder nicht?

Du musst dir überlegen, ob du wirklich JS brauchst. Ich selber benutze das Internet bei meinem Smartphone, um Informationen nach zu schauen, nicht um aufwendige Animation zu sehen.

 

[chmee]

..grad jQuery mobile macht die Sache doch schon sehr einfach. Aber wie ComFreek schon sagte, es muß passen. Ich hab ne Suchseite, da passen Buttons, Auswahlmenues und vorgefertigte Listen sehr gut.

mfg chmee

 

[para_noid]

wie entwickelt man eigentlich Webseiten, die sowohl auf dem Browser als auch auf mobile devices (Smart Phones) immer optimal aussehen und bedienbar sind?

Ergänzend möchte ich noch erwähnen, dass man auch responsive Designs verwenden kann. Hierbei werden Mediaqueries eingesetzt, um für verschiedene Maximal-/Minimalbreiten und -höhen und etc. unterschiedliche CSS-Angaben zu wirken, meint also: unterschiedliche Ansichten zur Verfügung zu stellen, eben optimiert auf die verwendeten Abmessungen. Grundthema ist hier das Grid, also ab wann die Seite dreispaltig, zweispaltig, einspaltig angezeigt werden soll. Vorteil dabei ist, dass man im Optimalfall eine CSS-Datei für alle braucht, aber die Planung muss natürlich recht sorgfältig geschehen, sonst entwirft man nur 'nen Haufen Baustellen für später.
Das hat jetzt nichts mit irgendwelchen Weiterleitungen zu tun und vllt hat ComFreek das zum Teil auch gemeint, aber ich wollte das nochmal anmerken. Wäre auch nur der Punkt Aussehen und würde per se nur das CSS betreffen. Inwieweit das vor- oder nachteilig gegenüber Weichen ist vermag ich jetzt nicht zu sagen; mir fällt derzeit nur ein, dass CSS sich nicht um (manipulierte) UserAgents schert, die aber zum Großteil auch verlässlich sind und wenn nicht, dann wollte es der Endanwender eben so...mh. Naja.

Zum Thema Javascript: wo ich's für Desktopversionen eher vermeiden will, nehm ich's bei mobilen Sachen gern in Kauf. jQuery Mobile hab ich noch nicht verwendet, aber ich gehe bei mobilen Endgeräten eher davon aus, dass Javascript nicht deaktiviert ist. Zudem stufe ich die Usability auf Smartphones etc. als dringlicher bzw. weitläufer ein, und die darf man m.E. in dem Fall auch mit JS realisieren. Dass mit dem Einsatz von JS nicht irgendwelche nervigen Drecksgeschichten umgesetzt werden sollten, die man auch recht unkompliziert via Markup lösen könnte, ist klar.

Was ist zu empfehlen, welche Tools sind gut, wie sollte man vorgehen, oder ist das von Fall zu Fall unterschiedlich?

Naja, definitiv Letzteres. Man darf den Aufwand auch nicht unterschätzen. Wenn du zum Beispiel ein bestehendes System nachträglich umpolen willst, bist du vllt mit einem jQuery-Plugin und ein paar kleineren Anpassungen zufrieden, vorallem zeitlich. Wenn ich mir hier Wordpress anschaue: das Adminpanel ist so'n bisschen flexibel was die Menüleiste links betrifft (die MenüNAMEN sind erst ab ner gewissen Breite zu sehen, ansonsten kommen da nur die MenüICONS), aber so wirklich toll ist die Handhabung auf nem Smartphone trotzdem nicht. Ein Ding der Umöglichkeit ist (derzeit noch) das Ausloggen. Das geschieht normalerweise über ein Untermenü, das beim Mouseover/Hover über den Punkt rechts oben eingeblendet wird. Mit nem Smartphone ist's aber einfach Essig mit Hovern. Akzeptable Alternative in dem Fall war für mich die Wordpressapp. Die hat zwar mit dem Panel recht wenig zu tun, aber ich kann einige der Hauptfunktionen recht komfortabel nutzen. [ die App nimm mal als Pseudonym für ein neues/zweites Layout für mobile Geräte. Ist in dem Fall das Einfachste]
Für komplett neue Geschichten muss man einfach abwägen, was man genau erreichen will. In dem Zusammenhang sei noch erwähnt, dass sich HTML5 und CSS3 an sich sehr gut für Mobilgeräte eignen, die aber in Bezug auf Desktop-Crossbrowserkompatibilität (Stichwort: ältere IEs) wieder zu Problemen führen können. Kommt dann drauf an, wie weit du die Kompatibilität ziehen willst und ob sich der erhöhte Aufwand für dich lohnt.


Jetzt hab ich so aus'm Nähkästchen geplaudert und darüber den Faden verloren. Naja, vielleicht hilfts ja trotzdem.