Optimierung für Smartphone-Browser

Funktioniert bei mir nicht jedes Mal, wenn ich die Seite aufrufe. Bisher 
hab ich das neue Layout nur ein einziges Mal zu Gesicht bekommen.
Re-Login, Coockies löschen, Cache löschen... hat alles nichts gebracht.

Browser ist Dolphin Browser HD 8.0.0

Michael H. schrieb:
> Funktioniert bei mir nicht jedes Mal, wenn ich die Seite aufrufe. Bisher
> hab ich das neue Layout nur ein einziges Mal zu Gesicht bekommen.
Die Darstellung ist bei mir von der Orientierung des Telefons abhängig. 
In "Landscape" wird die Seite wie am PC dargestellt. Erst bei hochkant 
gehaltenem Telefon und Reload der Seite bekomme ich die neue Darstellung 
zu sehen.

@  chivas (Gast)

>Nichtsdestotrotz ein wenig Feedback zum aktuellen Erscheinungsbild
>(siehe Anhang).

Unlesbar.

Die Startseite ist ohne Zoom noch nicht benutzbar, das weiß ich, mir 
geht es erst mal um's Forum, das durch Wegfall der Seitenleiste lesbar 
sein (zumindest im Querformat). Auf meinem iPhone funktioniert das ganz 
gut (s. Anhang). Im Android-Emulator (4.0.3) sieht es fast genauso aus. 
Aber anscheinend braucht die Erkennung per CSS3 noch etwas Tuning.

Herzlichen Dank für Deine Bemühungen, lese hier öfters mal mit meinem 
htc Desire HD ...

Der Ansatz mit der Menüleiste oben statt links ist schonmal nicht 
schlecht.
Habe allerdings das gleiche Problem wie Michael H., sobald ich das Gerät 
ins Querformat drehe, bekomme ich die normale Standardansicht mit Menü 
links statt oben.

Das gilt für die Benutzung mit FireFox auf dem Smartphone.
Mit dem Standard-Android-Browser bekomme ich nie die Mobilgeräte-Ansicht 
zu sehen, unabhängig von Hoch- oder Querformat und auch unabhängig von 
der Einstellung unter "Mobile Ansicht" (Mobile Versionen von Webseiten 
aktivieren).

Wie erkennst Du die Mobilgeräte? Über die Bildschirmbreite?
Mein htc hat ein WVGA-Display, also im Querformat 800 x 480 Pixel.

Auf einem Smartphone 480x320 mit Android 2.3 mit Opera kommt das neue 
Layout, egal ob hoch oder quer. User-Agent steht auf "Mobile". Bloss 
kann ich auf einem 3-Zoll Zwerg trotzdem nicht viel damit anfangen.

Auf einem 7-er Tablet 1024x600 mit Android 2.3 mit Opera gibts das 
PC-Layout, egal ob hoch oder quer. User-Agent steht auf "Tablet", 
"Mobile" steht nicht zur Wahl. Das wär aber nun grad jene Plattform, bei 
der es wirklich Sinn ergäbe. Mit Webkit oder Firefox sieht es auch nicht 
anders aus.

Fortsetzung: Dolphin HD ebenfalls Pleite. Aber dann gabs doch mal einen 
Erfolg! Opera Mini liefert das Mobil-Layout auf dem Tablet. Im 
Querformat sieht das recht gut aus.

Wovor hängt es eigentlich ab? Der User Agent scheint es nicht zu sein, 
denn mit dem Dolphin kann man den frei wählen, nützt aber nix.

A. K. schrieb:
> Wovor hängt es eigentlich ab?

1

<link h r e f="/stylesheets/mobile.css?1335299494" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />

Also maximal 480px breite und der Browser muss natürlich den mediastring 
korrekt dekodieren können.

@Andreas: Eventuell noch zusätzlich eine mit media="handheld", mit dem 
Useragent könnte man das eventuell auch via JS noch etwas tunen.

Läubi .. schrieb:

> Also maximal 480px breite und der Browser muss natürlich den mediastring
> korrekt dekodieren können.

M.a.W: Auf dem Opera Mini geht es nur deshalb, weil der entweder zu faul 
ist, die Bildschirmgrösse abzufragen, oder dessen Remote-Renderer 
implizit von einem kleinen Bildschirm ausgeht?

Manchmal hängt das noch von der Skalierung ab, hier sind ein paar 
Beispiele genannt:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://nmsdvid.com/snippets/
leider sind solche Optimierungen immer etwas hakelig.

Aber was wird dann aus Tablets? 10er quer mögen für das Desktop-Layout 
gross genug sein, bei 7ern quer oder 10ern hochkant hingegen ist die 
Mobilversion sinnvoller.

Mich dünkt, getrennte Seiten wären praktischer als der wohl vergebliche 
Versuch, es per Erkennung allen recht zu machen. Dann kann sich jeder 
aussuchen, welches Layout er gerne hätte.

Ich sehe schon, das nur mit CSS zu machen dürfte nichts werden. 
Theoretisch müsste man mit max-device-width und einer Angabe in cm 
perfekt zwischen Smartphones, Tablets usw. unterscheiden können, 
allerdings wird diese Abfrage von den Browsern nicht ordentlich 
unterstützt. Vermutlich werde ich doch den User Agent auswerten, und 
dann eine Option zum Umschalten zwischen mobiler und Desktop-Version 
anbieten.

Andreas Schwarz schrieb:
> eine Option zum Umschalten zwischen mobiler und Desktop-Version

Es gibt Leute mit geschädigten Augen. Wäre es da nicht sinnvoll, wenn 
auch ein Desktop-Benutzer die Mobilversion auswählen könnte?

Vorschlag bzw. Denkanstoß:

Einfach einen Dialog anbieten, aus dem man die gewünschte Version aus 
einer Liste der verfügbaren Versionen auswählt und diese Auswahl dann 
für die nächsten Besuche in einem Keks speichern. So wird zu jedem 
System per Keks die gewünschte Version ausgewählt. Wer Kekse unterdrückt 
oder löscht, bekommt eben die Desktop-Version.

...

Tablet User schrieb:
> Ich hab zeitweise ein Tablet, und erachte die scollerei als eher
> muehsam.

So besser (s. Anhang)?

Yep, das wäre super.

Das ist bereits implementiert, geht wenn dein Gerät als Tablet oder 
Smartphone erkannt wird und Touch-Events sendet.

Mein Erkennungscode:

1

  SMARTPHONE_USER_AGENTS = /palm|blackberry|iphone|windows ce|android/i

2

  TABLET_USER_AGENTS = /ipad|tablet|galaxy tab/i

3

  def is_tablet?

4

    TABLET_USER_AGENTS.match(request.user_agent)

5

  end

6

  def is_smartphone?

7

    SMARTPHONE_USER_AGENTS.match(request.user_agent) and !is_tablet?

8

  end

Scheint beim Opera Mini auf dem Tab nicht zu funktionieren. Beim Opera 
Mobile geht es nur wenn er lokal rendert. Im Turbo-Modus, der nicht 
lokal sondern wie Opera Mini in der Cloud rendert, geht es nicht.

Beim Standard-Browser kriege ich am oberen Ende den Knopf zum 
runterfahren ans untere Ende. Die andere Richtung habe ich bei dem noch 
nicht gesehen.

Michael H. schrieb:
> Die Darstellung ist bei mir von der Orientierung des Telefons abhängig.
> In "Landscape" wird die Seite wie am PC dargestellt. Erst bei hochkant
> gehaltenem Telefon und Reload der Seite bekomme ich die neue Darstellung
> zu sehen.
Das ist bei mir noch immer so. User-Agent ist "Android". Ich kann ihn 
zwar auch auf was anderes stellen, bringt aber nicht mal bei der 
Einstellung "Desktop" eine Änderung.
Andreas, falls ich da irgendwas für dich testen kann, schreib mich ruhig 
an - die Änderungen find ich nämlich super.

Die Pfeile sollten jetzt auch mit Opera funktionieren.

Yep, Danke. Fehlt nur noch das Layout. Denn mit dem Mini geht es immer 
noch nicht. Nur mit dem Mobile.

A. K. schrieb:
> Yep, Danke. Fehlt nur noch das Layout. Denn mit dem Mini geht es immer
> noch nicht. Nur mit dem Mobile.

Wie werden denn bei dem andere Webseiten mit optionaler Mobilansicht 
dargestellt? z.B. http://www.gmx.de
Kanns sein, dass sich der als "normaler" Browser ausgibt?

Michael H. schrieb:

> Wie werden denn bei dem andere Webseiten mit optionaler Mobilansicht
> dargestellt? z.B. http://www.gmx.de

Der User Agent lässt sich beim Opera Mobile auf dem Tablet zwischen 
"Tablet" und "Desktop" umschalten und auf dem Smartphone zwischen 
"Mobile" und "Desktop". Die Ansicht von GMX folgt dieser Umschaltung.

und das menu is nun oben?

Hi

ich finde die pfeile auch nur störend

ich hab mit meinem ipod das selbe problem wie mpl (Gast)

MfG Alex

Michael P. schrieb:
> und das menu is nun oben?

Andreas Schwarz schrieb:
> Die Seitenleiste wird jetzt ausgeblendet,
> und die Navigation wird stattdessen oben angezeigt

macht doch auch mehr sinn, oder?
wie kann man da nur von einem "problem" sprechen...

Johann schrieb:

> Die Zeit der Smartphones mit Zwergwinzlingsbildschirm
> ist halt zu Ende. Da sollte man nicht mehr versuchen Webseiten auf
> 320x240 Punkte-Displays zu optimieren.

Die Desktop-Version wird vielen Leuten auf einem 4-Zöller keine Freude 
bereiten. Egal ob dessen Schirm 800x480 oder 1920x1080 Pixel darstellt.

Auf einem 7-Zöller mit 1024x600 ist die Mobil-Version für mich grad 
richtig. Bei der Desktop-Version ist mir die Schrift auf Dauer zu winzig 
- und die Chancen, irgendwas beim Touch zu treffen auch. Die finde ist 
erst auf dem 9-Zöller brauchbar.

Trotzdem wäre ein aktivieren des "mobilen" Layout per cookie und daran 
angepasstes HTML vermutlich zielführender als das irgendwie zu versuchen 
zu detektieren,

Hm, der Rest der Welt schafft es doch auch zuverlässig.

Mal unabhänig vom Layout habe ich das Problem, dass der Browser selbst 
keinen Zeilenumbruch machen kann. D.h. wenn ich auf anderen Seiten 
weiter rein zoome um größeren Text zu haben bricht der Browser die 
Zeilen eigenständig am Ende des Bildschirms um.

Hier bleibt der Text einfach so wie er ist. Also kann ich die Schrift 
nicht größer machen, weil dann der Text links bzw rechts abgeschnitten 
ist.

System:
Android 4.0.3 mit Opera Mobile als auch Dolphin Browser.

Und die grünen Pfeile finde ich jetzt auch nicht so den Brüller. Ein 
komfortables weit rauf und runter scrollen ist die Aufgabe des Browsers, 
nicht die der Website. Opera mobile macht das im übrigen sehr gut. Wenn 
man da der Seite einen kräftigen Stubs nach oben oder unten gibt 
erscheint am rechten Rand ein Pfeil der nach oben oder unten zeigt. 
Tippt man da drauf bewegt sich die Seite schnell in die gewünschte 
Richtung.
Die grünen Pfeile stören mich eher, tauchen die ganze Zeit wieder auf, 
dann tippt man auserversehen drauf weil sie durch einen Zoom in die 
Website (Link anklicken etc) auch so groß geworden sind, wenn man nur so 
kurz scrollt wie die Pfeile brauchen um zu erscheinen bewegt sichd die 
webseite garnicht usw. Einfach nicht das wahre

Michael H. schrieb:
> Hm, der Rest der Welt schafft es doch auch zuverlässig.

Die machen es dann aber i.d.R. gleich mit eigener Adresse wie m.xyz.de

Wäre doch auch ne Lösung, oder?

Reinhard S. schrieb:
> Michael H. schrieb:
>> Hm, der Rest der Welt schafft es doch auch zuverlässig.
>
> Die machen es dann aber i.d.R. gleich mit eigener Adresse wie m.xyz.de
Die aber auch über eine automatische Weiterleitung von der normalen 
Domain xyz.de erreicht wird.

Zurück zum Thmea: rauf- runter- Pfeilbuttons.

Bitte bitte bitte wieder entfernen!

es stört und funktioniert nicht wirklich!

Danke,
Christian

Also so richtig überzeugt bin ich da noch nicht mit dem Design auf 
meinem HTC Mozart WP7 Handy.

Vieleicht wäre mal noch überlegenswert sich mit dem Thema zu 
beschäftigen http://jquerymobile.com/ und dann eine komplett neue Mobile 
Site zu bauen.

Bei iOS-Geräten ist zumindest der Peil nach oben völlig überflüssig. 
Diese Funktion ist in Safari nämlich schon eingebaut: einfach den oberen 
Bildschirmrand antippen (Uhr).

Und ich finde die grünen Pfeile auch störend und nervend.

Gruß
John

P.S. Es gibt doch bestimmt eine Statistik über die benutzten 
Betriebssysteme und Browser. Könnte man da mal ein paar Daten sehen. 
Würde mich interessieren.

John Bauer schrieb:
> P.S. Es gibt doch bestimmt eine Statistik über die benutzten
> Betriebssysteme und Browser. Könnte man da mal ein paar Daten sehen.
> Würde mich interessieren.
zumindest von 2008
Beitrag "Re: Browser - Google Chrome"