Hinschauer: Mobile Content

Hi,

ich möchte meine Website bzw. eine Version dieser für Iphone und andere Mobilfunkgeräte anpassen. Ich selbst habe ein solches Gerät nicht, deshalb kann ich es auch nicht testen, deshalb habe ich auch keinerlei Erfahrung.

Was gibt es zu beachten? Welche Geräte muss ich berücksichtigen? Gibt es Simulatoren, oder muss ich ins Blaue hinein arbeiten?

Wäre schön, wenn jemand seine Erfahrung teilen könnte. Surfen auf Mobilfunkgeräten wird ja anscheinend immer wichtiger, überall sieht man Menschen, die in diese Geräte starren.

Vielen Dank
Hinschauer

  1. Was gibt es zu beachten? Welche Geräte muss ich berücksichtigen?

    Jene, die deine Besucher in relevanten "Stückzahlen" verwenden (oder künftig verwenden).

    Gibt es Simulatoren

    Apple verlangt 60 Dollar pro Monat - dafür bekommst du aber locker ein iPhone mit Vertrag :p

    oder muss ich ins Blaue hinein arbeiten?

    Auch eine Möglichkeit, wenn du sauberes HTML und CSS schreibst, funktionierts auf Opera Mini/Mobile und dem iPhone-Safari schon mal relativ gut ohne irgendwelches zutun.

    1. hallo,

      Gibt es Simulatoren

      Apple verlangt 60 Dollar pro Monat - dafür bekommst du aber locker ein iPhone mit Vertrag :p

      In der Tat lächerlich.

      oder muss ich ins Blaue hinein arbeiten?

      Auch eine Möglichkeit, wenn du sauberes HTML und CSS schreibst, funktionierts auf Opera Mini/Mobile und dem iPhone-Safari schon mal relativ gut ohne irgendwelches zutun.

      Wie funktioniert das z.b. bei einem fixen Layout? Wird skaliert?

      1. Wie funktioniert das z.b. bei einem fixen Layout? Wird skaliert?

        Am iPhone wirds meistens 1:1 so dargestellt wie im Desktop-Safari, nur poportional kleiner.

        Opera Mobile/Mini nuckelt automatisch ein paar Eigenschaften um, maximalbreiten von Bildern auf die breite des Viewports. Floatende Element werden untereinander mit manipulierten Breiten dargestellt. Hintergrundbilder werden teilweise entfernt.

        Relativ gut kann man das im Debug-Menu von Opera Testen

        -> Layout -> Mobile View

        Allerdings verhalten sich die echten Browser teilweise doch leicht anders. z.B. ist JavaScript auf Opera Mini etwas träger, die Animationen diverser sind ggf. ruckeliger. Das Minimum von setInterval und setTimeout etwas höher angesetzt um die Mobil-CPUs nicht zu vie zu belasten.

        1. Hallo Suit,

          Danke für die Hinweise. Dann ist dein Fazit: Seiten extra für mobile content anpassen ist nicht zwingend nötig?

          Gruß
          Hinschauer

          1. Hallo Suit,

            Danke für die Hinweise. Dann ist dein Fazit: Seiten extra für mobile content anpassen ist nicht zwingend nötig?

            Nicht unbedingt - das muss man einfach ausprobieren.

            Wie erwähnt sind die meisten ordentlichen Seiten (valider Code, ordentlich ausgezeichneter Inhalt, keine Tabellenlayouts) problemlos auf Mobilgeräten bedienbar.

            Eine extra Anpassung ist imho nur notwenig, wenn es dort auch perfekt aussehen soll.

            Das Forum hier z.B. sieht in Opera Mini etwas uncool aus, das Logo ist z.B. viel zu groß.

        2. [latex]Mae  govannen![/latex]

          Relativ gut kann man das im Debug-Menu von Opera Testen

          -> Layout -> Mobile View

          Das geht aber auch besser

          Cü,

          Kai

          --
          Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken in Richtung "Mess up the Web". (suit)
          Foren-Stylesheet Site Selfzeug JS-Lookup
          SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
          1. Das geht aber auch besser

            Interessant, kannte ich bisher nicht.

            Emuliert das Ding auch die langsamen CPUs der Mobilgeräte oder die "langen Ladezeiten" (sprich gibts eine Bandbreitenbeschränkungssimulation)?

            1. [latex]Mae  govannen![/latex]

              Das geht aber auch besser

              Interessant, kannte ich bisher nicht.

              Emuliert das Ding auch die langsamen CPUs der Mobilgeräte oder die "langen Ladezeiten" (sprich gibts eine Bandbreitenbeschränkungssimulation)?

              Keine Ahnung; ich finde diesbezüglich nichts. Aber ich gehe davon aus, daß das Ding eher dahingehend entworfen wurde, daß man als Developer die reine Darstellung von Websites überprüfen können soll denn als echte 1:1-Emulation. Obwohl man dann schön sehen könnte, wie sich eine Seite im mobilen Umfeld aufbauen würde. Kannst das ja mal vorschlagen ;)

              Die Ladezeiten werden mobil i.d.Regel ohnehin durch Opera Turbo optimiert (Das ist im Emu zu-/abschaltbar).

              Cü,

              Kai

              --
              Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken in Richtung "Mess up the Web". (suit)
              Foren-Stylesheet Site Selfzeug JS-Lookup
              SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
          2. Hallo Kai,

            Das geht aber auch besser

            danke für den Link. Ich kenne mich mit dem Surfen auf Mobilgeräten nicht aus bzw. habe das im Prinzip noch nie gemacht. Meinst du, die Erkenntnisse, die ich durch diese Opera-Mini-Simulation gewinne, sind auch auf andere "Minibrowser" (z.b. iphone oder blackberry) übertragbar? Oder anders gesagt, ist die Wahrscheinlich hoch, dass die Webseiten auf anderen Geräten dann ebenfalls *gut* ausschauen bzw. funktionabel sind, wenn sie im Opera-Mini ordentlich sind?

            grüße
            hinschauer

            1. [latex]Mae  govannen![/latex]

              Das geht aber auch besser

              Meinst du, die Erkenntnisse, die ich durch diese Opera-Mini-Simulation gewinne, sind auch auf andere "Minibrowser" (z.b. iphone oder blackberry) übertragbar?

              Keine Ahnung, aber ich denke nicht. Genauso viel oder wenig wie man bei korrekter Darstellung in Firefox auf korrekte Darstellung im IE/Chrome/Safari/Opera/... schließen kann. Also hängt es davon ab (wenn die Seiten valide sind, was ich dabei voraussetze) ob der mobile Browser das auch dementsprechend umsetzt, welche Bugs er hat etc.
              Cü,

              Kai

              --
              Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken in Richtung "Mess up the Web". (suit)
              Foren-Stylesheet Site Selfzeug JS-Lookup
              SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
              1. Hi,

                Meinst du, die Erkenntnisse, die ich durch diese Opera-Mini-Simulation gewinne, sind auch auf andere "Minibrowser" (z.b. iphone oder blackberry) übertragbar?

                Keine Ahnung, aber ich denke nicht. Genauso viel oder wenig wie man bei korrekter Darstellung in Firefox auf korrekte Darstellung im IE/Chrome/Safari/Opera/... schließen kann. Also hängt es davon ab (wenn die Seiten valide sind, was ich dabei voraussetze) ob der mobile Browser das auch dementsprechend umsetzt, welche Bugs er hat etc.
                Cü,

                Konkret hiesse das, dass man für jedes Gerät (resp. jeden darauf verfügbaren Standardbrowser)testen müsste...

                Dann lass ich das mal lieber. Dafür ist meine Site zu unwichtig.

                Viele Grüße
                Hinschauer

                1. [latex]Mae  govannen![/latex]

                  Konkret hiesse das, dass man für jedes Gerät (resp. jeden darauf verfügbaren Standardbrowser)testen müsste...

                  Wie bei "normalen" (Dektop) Browsern auch, ja.

                  Dann lass ich das mal lieber. Dafür ist meine Site zu unwichtig.

                  Ich habe mich bisher darauf beschränkt, der Testversion meiner Site per meta-element nachzuhelfen, im Opera Mini Emulator sieht die Site größtenteils ok aus[1]. Über media-queries kann man dann noch ein paar Feinheiten regeln. Wenn valides HTML und quasi-valides[2] CSS verwendet wird, sollte das Meiste schon passen.

                  Cü,

                  Kai

                  [1] mit den Hover-Infos muß ich mir allerdings was einfallen lassen bzw. recherchieren
                  [2] Mein Name für CSS, das ohne Hersteller-spezifische Deklarationen valide wäre.

                  --
                  Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken in Richtung "Mess up the Web". (suit)
                  Foren-Stylesheet Site Selfzeug JS-Lookup
                  SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
                  1. [2] Mein Name für CSS, das ohne Hersteller-spezifische Deklarationen valide wäre.

                    Herstellerspezifische Eigenschaften sind völlig Standardkonform.

                    1. [latex]Mae  govannen![/latex]

                      [2] Mein Name für CSS, das ohne Hersteller-spezifische Deklarationen valide wäre.

                      Herstellerspezifische Eigenschaften sind völlig Standardkonform.

                      Solange der CSS-Validator vendor-spezifische Werte wie display: -moz-inline-stack; oder Eigenschaften wie filter: .... als Fehler ansieht, ist das CSS logischerweise nicht valide. Muß man dann halt ignorieren. Wenn _nur_ solcherlei Zeilen beanstandet werden, ist das dann für mich „quasi-valides CSS“

                      Cü,

                      Kai

                      --
                      Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken in Richtung "Mess up the Web". (suit)
                      Foren-Stylesheet Site Selfzeug JS-Lookup
                      SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
    2. 'ǝɯɐu$ ıɥ

      Gibt es Simulatoren

      Apple verlangt 60 Dollar pro Monat - dafür bekommst du aber locker ein iPhone mit Vertrag :p

      Wie ich schonmal sagte: die SDK inkl. Simulator is kostenlos.

      ssnɹƃ
      ʍopɐɥs

      --
      Answers: $1, Short: $5, Correct: $25, dumb looks are still free ...