Design für mobile Browser

[heinetz]

Hallo Forum,

ich beschäftige mich gerade damit die Website eines Kunden für die Darstellung auf Handys zu optimieren. Je mehr ich mich damit beschäftige, desto komplexer wird das Thema. Und dann erzählt mir mein Kollege gerade, dass sein iphone4 eine Auflösung von 1024x darstellt. Das bringt mich völlig aus dem Konzept ... Wie testet man mit einem Desktop-Monitor eine sollche Darstellung?

Danke für Tipps und

beste gruesse,
heinetz

[Encoder]

Und dann erzählt mir mein Kollege gerade, dass sein iphone4 eine Auflösung von 1024x darstellt. Das bringt mich völlig aus dem Konzept

Warum?

Wie testet man mit einem Desktop-Monitor eine sollche Darstellung?

Indem du deinen Browser so groß machst dass die Auflösung hin kommt.
Z.B. wenn du es ganz einfach haben willst, mach dir ne Seite mit einem farbigen Bereich in deiner Größe und zien den Browser so dass der sichtbare Bereich die passende Größe erhält.
Oder es gibt Plugins dafür?

[heinetz]

Hallo Forum,

ich will etwas konkreter werden ;)

Ich hatte mir zunächst ein mobile.css angelegt und mit Firebug angefangen so zu entwickeln, dass die Site auf meinem Nokia E51 bei der Auflösung von 240X320 sowohl mit dem Symbian-browser also auch mit Opera Mobile ganz gut angezeigt worden ist. Alle Boxen und alle Bilder haben width:100% bekommen,
"überflüssige" Elemente wurden ausgeblendet und alles sah ganz gut aus.

Danach hörte ich dann, dass das IPhone die Site mit einer Auflösung von 1024 mal wasweissich darstellt. Super, die Site ist auf 1024x768 optimiert. Ich kann also die gesamte Website anzeigen ... Falsch! Ich habe die Abmessungen von dem IPhone-Screen nicht im Kopf aber 1024 Pixel sind bei 300dpi doch sehr klein! Wenn ich mir mobil.stern.de oder mobil.tagesschau.de ansehe, ist wird der Content unter Firefox 340 bzw. 480 Pixel breit dargestellt. Auf meinem Monitor also mit einer Menge Weissraum rum herum. Verkleinere ich das Fenster auf 240X320 Pixel werden unter Firefox Scrollbars angezeigt, während mein E51 den Inhalt skalliert. Und da komme ich nicht weiter ;(

Irgendwie kommt dort eine wie auch immer gearetete Weiche zum tragen, die man dummerweise nicht sieht. Auch habe ich vom meta-tag viewport gelesen,
habe aber leider keine Ahnung, was genau das macht.

danke für Tipps und

beste gruesse,
heinetz

[Multi]

Du solltest mal von der Auflösung wegkommen und lieber daran denken, dass es verschiedene Browser gibt. Auf Apple den Safari, auf Android den Chrome, beim WindowsPhone (und Handhelds) den IE usw. Jeder ist anders. Da dürfte die Auflösung dein geringstes Problewm sein, da jedes moderne Handy eine Zoomfunktion hat und man mit den Finger die Seite leicht verschieben kann.

[heinetz]

Du solltest mal von der Auflösung wegkommen und lieber daran denken, dass es verschiedene Browser gibt.

Warum? Habe ich daran möglicherweise schon gedacht?

Auf Apple den Safari, auf Android den Chrome, beim WindowsPhone (und Handhelds) den IE usw. Jeder ist anders. Da dürfte die Auflösung dein geringstes Problewm sein

Die Browser, die ich getestet habe, haben mir keine Probleme bereitet, also befasse ich mich nun mit der Auflösung.

da jedes moderne Handy eine Zoomfunktion hat und man mit den Finger die Seite leicht verschieben kann.

Es mag ja eine Frage des Geschmacks sein, ob man Websites auf dem Handy in der klassischen Ansicht sehen will, um sich dann mit einer Zoomfunktion zu helfen, aber ich versuchein beschriebener Weise, die für mobile Browser optimierte Version einer Website zu entwickeln auf der Inhalte anders dargestellt werden sollen als auf dem Monitor und komme an einem bestimmten Punkt nicht weiter:

Wie sorge ich dafür, dass von meiner mobile Website auf einem IPhone4, dass 1024 Pixel in der Breite darstellen kann, nicht 1024 Pixel, sondern nur
meinetwegen 340 hochskaliert darstellt werden, weil 684 Weissraum sind.
Das scheint in irgendeinem Zusammenhang mit dem Metatag "viewport" zu stehen, nur dass sich die Angabe content="width=device-width", die man nach alldem, was ich gelesen habe, bevorzugt verwenden sollte für mich liesst wie inhalt="breite=breite_des_anzeigegeraets". Dass es bei der breite_des_anzeigegeraets um eine Zentimeterangabe geht kann ich mir nicht so recht vorstellen und denke deshalb das die breite_des_anzeigegeraets 1024Pixel sind. Mein Content ist allerdings nur maximal 340 Pixel breit ;(

Da ich dummerweise gerade weder ein IPhone4 zur Hand habe, noch wüsste, wie man sich den generierten Quelltext ansieht, beim Opera Mobile Emulator dieses viewport-Tag buggy zu sein scheint (mit dem könnte man sich den Quelltext nämlich prima mit Dragonfly ansehen), frage ich mich, bzw das Forum hier, wie das gemacht wird.

danke für Tipps (die zur Klärung meiner Frage beitragen)

und beste gruesse,
heinetz

[Deus Figendi]

Es mag ja eine Frage des Geschmacks sein, ob man Websites auf dem Handy in der klassischen Ansicht sehen will, um sich dann mit einer Zoomfunktion zu helfen, aber ich versuchein beschriebener Weise, die für mobile Browser optimierte Version einer Website zu entwickeln

Ich finde das sehr löblich und ich finde es Mist, dass manche/viele Smartphone-Browser offenbar die Dinge, die man ihnen anbietet (z.B. WAP/WML/XHTMLmobile-Seiten oder eben CSS-mobile oder CSS-kleineDisplays...) nicht immer so richtig berücksichtigen.
Das ist eben der immerwehrende Konflikt, von "guten" Webdesignern, wie du zumindest einer zu sein versuchst, der alles richtig machen will und den Browser-Zusammenklumpern, die meinen jede ach so kaputt gecodete Seite irgendwie noch rendern zu müssen, dabei aber die guten Dinge aus den Augen verlieren :)
Ich kann sie ja verstehen, aber die Situation ist spätestens seit es JScript und JavaScript gibt total verfahren.

Ich habe von deinem meta, content, viewport, wasauchimmer noch nie gehört, aber meiner Meinung nach böte es sich einfach an das mobile Design ohne jede Angabe von Pixeln zu machen.
Ich denke du rechnest viel zu viel in Pixeln, so oft wie du sie erwähnst, mit X Pixeln Breite und Z Pixeln Weißraum und hastenichgesehen.
Wenn du dich darauf beschränkst mit % und em oder ex zu arbeiten wird das ganze Design vermutlich flüssiger (fließender). Du kannst deine Blockelemente immer schön über den ganzen View-Port ziehen und du kannst Größen relativ zur vom Benutzer eingestellten Schriftgröße deine Objekte anordnen und in ihrer Größe bestimmen.
_Gerade_ auf kleinen Displays (und das müssen ja nicht nur Telefone sein, sondern ggf. Navigationsgeräte oder Netbooks oder PDAs) macht es wenig Sinn auf die Auflösung zu schielen und mit Pixeln zu hantieren, ich denke du wirst damit immer auf die Nase fallen. Im Übrigen sollte man das für Desktop-Designs auch nicht unbedingt machen.
Verwende einfach relative Größeneinheiten anstelle von absoluten und gut.
Und wenn es doch absolute sein sollen dann bitte nicht Pixel, sondern Zentimeter oder Zoll, dann wird das Endgerät es (hoffentlich) passabel rendern und dir kann die Auflösung wiederum egal sein (allerdings die Display-Größe nicht).

[heinetz]

Ich denke du rechnest viel zu viel in Pixeln, so oft wie du sie erwähnst, mit X Pixeln Breite und Z Pixeln Weißraum und hastenichgesehen.
Wenn du dich darauf beschränkst mit % und em oder ex zu arbeiten wird das ganze Design vermutlich flüssiger (fließender).

vollkommen auf relative Angaben beschränken kann man sich sicher nicht, aber grundsätzlich gebe ich Dir recht ...

[heinetz]

Wie sorge ich dafür, dass von meiner mobile Website auf einem IPhone4, dass 1024 Pixel in der Breite darstellen kann, nicht 1024 Pixel, sondern nur
meinetwegen 340 hochskaliert darstellt werden, weil 684 Weissraum sind.
Das scheint in irgendeinem Zusammenhang mit dem Metatag "viewport" zu stehen, nur dass sich die Angabe content="width=device-width", die man nach alldem, was ich gelesen habe, bevorzugt verwenden sollte für mich liesst wie inhalt="breite=breite_des_anzeigegeraets". Dass es bei der breite_des_anzeigegeraets um eine Zentimeterangabe geht kann ich mir nicht so recht vorstellen und denke deshalb das die breite_des_anzeigegeraets 1024Pixel sind. Mein Content ist allerdings nur maximal 340 Pixel breit ;(

ich glaube, ich näher mich der Erklärung/Lösung und schreibe hier, wie ich das ganze verstehe:

1024px beim IPhone4 waren ein Gerücht. Es sind scheinbar 640X960px
... aber das tut eigentlich nichts zur Sache. Das IPhone3 hat zum Vergleich eine Auflösung von 320X480px, was nichts aussergewöhnliches ist. Beide stellen den gesamten Content einer Website dar, indem sie ihn schlicht verkleinern. Genau das kenne ich von Opera Mobile, der jede Website auf meinem E51 (240X320px) so weit verkleinert, dass sie erstmal vollständig vollständig quasi als Thumbnail dargestellt wird. Dahinter steckt, dass Safari auf dem IPhone, wie Opera Mobile unabhänig von der tatsächlichen Auflösung so tun, als seien sie grösser und einen Viewport von 850px (Opera) bzw. 960px (Safari) "vorgaukeln". Ein DOM-Object von 320px breite wird also auf eine IPhone von Safari 3fach verkleinert dargestellt. Dieses für Websites, die nicht für mobile Devices optimiert sind ansich nützliche Feature lässt sich aushebeln, indem man dem mobilen Browser klarmacht, dass er sich nicht grösser ausgeben soll, als er ist:

<meta name = “viewport” content = “width = device-width,  initial-scale=1″ />

Damit müsste ein IPhone4, dass bei der selben Bildschirmdiagonale im Vergleich zum IPhone3 doppelt so hoch auflöst den selben Content halb so gross anzeigen. Weil das aber auch nicht im Sinne des Erfinders ist bedient sich Apple eines einfachen Tricks und das IPhone4 gibt sich wie das IPhone3 mit einer Auflösung von 320X480px als device-width/height aus.

... wenn ich das:

http://www.mobilewebdesign.de/index.php?paged=6
http://www.engadgeted.net/2010/07/08/viewports-and-pixels-on-iphone-4/
http://learnthemobileweb.com/tag/viewport

... richtig verstanden habe. Wenn nicht freue ich mich, wenn mich jemand korrigiert ;)

beste gruesse,
heinetz

[MrMurphy]

Hallo,

testen geht natürlich am bestem mit einem entsprechenden Gerät, da es bei denen von Betriebssystem zu Betriebssystem natürlich auch Unterschiede gibt.

Für Firefox gibt es zudem ein Addon namens "Small Screen Rendering".

Das normale Browser-Fenster einfach schmal zu machen bringt nichts. Den Programmierern von Handy-Browsern sind die Einschränkungen durch den kleinen Bildschirm natürlich bewußt und die bauen entsprechende Routinen ein, die eine vernünftige Darstellung auch ohne spezielle Handy-Anpassungen ermöglichen. Wenn man sich an den HTML-Standard hält und zudem HTML und CSS strikt trennt ist schon mal 95% der Arbeit getan.

Gruss

MrMurphy

[LX]

Ich bin gerade selbst beruflich sehr, sehr intensiv mit diesem Thema beschäftigt, darf aber natürlich nicht zu sehr aus dem Nähkästchen plaudern. Trotzdem kann ich natürlich ein paar doch recht allgemein verfügbare Weisheiten aufgreifen, die in verschiedenen Winkeln des Internets zu finden sind.

Erst mal zum Testen von Seiten: ein paar der besten Testmöglichkeiten sind Simulatoren, beispielsweise die der Firma Blackberry, Google's Android SDK, Nokias OVI Browser und Opera Mini (welches sogar als Browser-Applet verfügbar ist) sowie Opera Mobile. Wer über zu viel Geld verfügt, der kann auch mit dem iOS SDK testen. Noch mehr Geld erkauft einem ein Abo bei DeviceAnywhere, eine Firma, die Handys in ihre Server einbaut und quasi eine Art Handy-VNC kostenpflichtig anbietet. Das alles ist jedoch nichts gegen einen Schrank voll echter Geräte, mit denen man direkt testen kann.

Jetzt zum Bauen der Seiten: Die coolste Fähigkeit der mobilen Webkit-basierten Browsern ist ganz zweifelsohne CSS Media Queries, die es einem ermöglichen, die Darstellung basierend auf der Bildschirmauflösung anzupassen.

Leider beherrscht der mobile IE selbst in Windows Phone 7 keine der Fähigkeiten, die ihn als modernen Browser erscheinen lassen würden, so dass man hier sowohl auf HTML5 als auch CSS3 getrost verzichten kann. Da verschiedene Hersteller die Marktmacht von Microsoft bewußt unterstützen, wird uns dieser Browser noch eine ganze Weile verfolgen (und er entspricht in seinen Unfähigkeiten in etwa dem IE7).

Ich könnte jetzt noch über andere Handy-Browser wie Netfront Access, Obigo, Teleca, Up, Novarra (später Ovi-Browser), Bold, Torch, Opera mobile/mini, etc. philosophieren - aber das würde wahrscheinlich zu tief ins Nähkästchen gehen und möglicherweise meinen Job gefährden.

Eins kann ich aber noch getrost anmerken: die gewohnten JavaScript-Events gibt es in den mobilen Browsern in den meisten Fällen nur teilweise (wenn überhaupt).

Gruß, LX

[Thomas]

Hallo,

Zusätzlich zu deiner Test-Liste:
Nokia ist recht großzügig im Umgang mit den Entwicklern. Da erhält man kostenlosen Zugang zu einer großen Auswahl an so ziemlich allen Nokia-Geräten. Nokia Remote Device Access nennt sich das.

Sehr informativ ist außerdem quirksmode.org. Dort werden viele Browser miteinander verglichen. Das viewport-Element dürfte dich z.B. sehr interessieren.

Gruß,
Thomas

[LX]

Zusätzlich zum Viewport-Meta-Tag gibt es auch noch ein paar andere, die ggf. nützlich sein könnten.

Außerdem ist der Suchbegriff "Graceful Degradation" für das Problem der überaus unterschiedlichen (Un-)Fähigkeiten mobiler Browser ein guter Ansatzpunkt für weitere Recherche. Dabei geht es im wesentlichen darum, moderne Techniken so einzusetzen, dass ältere Browser darunter nicht leiden.

Um ein ziemlich harmloses (da offensichtliches) Beispiel zu nennen: man kann HTML5-Tags dazu verwenden, solche Browser auszufiltern, die sie nicht beherrschen (denn sie werden sie als unbekannte Inline-Elemente interpretieren - oder im Fall vom IE als Fehler, so dass das jeweilige Element geschlossen vor und nach dessen eigentlichem Inhalt steht, solange man kein HTML5-Shim verwendet - was man aber bei Bedarf absichtlich unterlassen kann).

Zuguterletzt verstehen verschiedene Browser noch genug JavaScript, um damit bedarfsweise auch die Darstellung zu verändern.

Gruß, LX

[heinetz]

Klasse, danke für diese ausführlichen Infos, die ich leider viel zu spät gelesen habe! Ich bin mit meinen Recherchen zu dem Thema mittlerweile auch schon sehr weit gekommen und habe herausgefunden, wie man die verschiedenen mobilen Browser emulieren kann.

Aber erstmal (oder nochmal?) zu meiner Aufgabenstellung:
--------------------------------------------------------
Ich betreue eine Website, die ich 2007 ohne Inhalte gebaut habe. Ohne Inhalte meint, dass ich ein Framework und ein handmade CMS gebaut habe, mit dem der Kunde seit dem etwa 700 Unterseiten erstellt hat. Damals war eine der strengen Vorgaben "barrierefeiheit". Daher ist die Site zum Einen sehr sauber in XHTML programmiert, was die Trennung von Design und Inhalt angeht und kommt fast vollständig ohne Javascript aus.

Erste Einschätzung:
-------------------
Nun habe ich eine für mobile Endgeräte optimierte Version der Site angeboten und versuche mir ein Bild davon zu machen, welche Aufwände auf mich zukommen. Meinem ersten Endruck nach lässt sich das für Site sehr gut umsetzen und meine ersten Tests mit:

• meinem Nokia E51 (240px X 320px) Symbianbrowser und Opera Mobile
• dem Nokia Mobile-Simulator
• den unter Nokia Remote Device Access getesteten Geräten
• sowie dem IPhone4 meines Kollegen

... fallen alle schon ganz gut aus.

Besonderheiten mobiler Browser:
-------------------------------
Wie das viewport-Metatag funktioniert, wie es sich unter Opera, dem IPhone3 und dem IPhone4 verhält, habe ich mittlerweile herausgefunden

Aktuell bin ich aber wieder etwas überrascht über eine Verhaltensweise des IPhones:

Das Display stellt in der Portrait-Ansicht 320px X 480px dar, wenn man das automatische Skalieren mit:

<meta name = “viewport” content = “width = device-width″ />

... unterbindet. Da es in der Landscape-Ansicht entsprechend 480px X 320px darstellen müsste, habe ich das CSS entsprechend so angepasst, dass der Content bei 320px und bei 480px vernünftig dargestellt wird. Z.B. brechen Texte anders um. Zu meiner Verwunderung verhält sich das auf dem Telefon aber vollkommen anders: Bei Landscape-Darstellung werden die 320px auf 480px skaliert. Warum das so ist habe ich hier gefunden:

This device width stays the same when you switch to landscape mode. It is not updated to reflect the wider screen you now have available.

Die Frage, die ich mir bzw. euch stelle ist die, ob ich das nun als Bug oder Feature werten soll. Es gibt wohl Ansätze, wie man das in den Griff kriegen kann. Die Frage nur, ob es Sinn macht unterschiedliche Layouts für jeweils den Landscape-Mode und den Portrait-Mode zu machen. Wie machen es die Anroid & Co?

danke für Tipps und

beste gruesse,
heinetz