Optimierung für Smartphone-Browser

[Andreas S. (andreas) (Admin)]

Ich habe mich mal an ein paar Optimierungen der Seite für 
Smartphone-Browser versucht. Die Seitenleiste wird jetzt ausgeblendet, 
und die Navigation wird stattdessen oben angezeigt (noch nicht ganz 
optimal, das gebe ich zu). Über Feedback, Vorschläge und Fehlermeldungen 
würde ich mich freuen!

[Michael H. (michael_h45)]

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

[chivas (Gast)]

Hallo,

zunächst einmal viel Erfolg bei der Umsetzung. So ein Forum für 
Smartphones anzupassen ist meiner Meinung nach nicht vernünftig 
realisierbar.
Nichtsdestotrotz ein wenig Feedback zum aktuellen Erscheinungsbild 
(siehe Anhang).

[Michael H. (michael_h45)]

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.

[Falk B. (falk)]

@  chivas (Gast)

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

Unlesbar.

[Andreas S. (andreas) (Admin)]

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.

[Thorsten S. (thosch)]

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.

[sandboxgangster (Gast)]

Hm benutze Opera mit Android 3.6.3 bei mir geht es auch nur im 
Portraimode, ansonsten schon mal besser als die org. Seite man muss 
weniger Scrolen.

[Jojo S. (Gast)]

ich lese das Forum oft auf dem iPhone und das neue Layout gefällt mir 
gut, ist praktisch weil des rechts-links wechseln entfällt. Ist mir vor 
ein paar Tagen sofort aufgefallen und ich dachte gleich 'endlich hat der 
Andreas auch ein Smartphone' und optimiert das endlich mal :-)
In dem Pseudo-Menu fehlen nur noch die die Unterpunkte bei AVR, ARM, 
usw.

[(prx) A. K. (prx)]

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.

[(prx) A. K. (prx)]

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.

[Läubi .. (laeubi)]

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

<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.

[(prx) A. K. (prx)]

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?

[Läubi .. (laeubi)]

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.

[K. J. (Gast)]

Das an der Auflösung anleine festzumachen ist nen Fail selbst kleinst 
Displays haben mittlerweile ne grosse Auflösung, ich würde es am OS 
b.z.w. der Browserkennung machen.

function check_mobile() 
{
    $agents = array(
        'Windows CE', 'Pocket', 'Mobile',
        'Portable', 'Smartphone', 'SDA',
        'PDA', 'Handheld', 'Symbian',
        'WAP', 'Palm', 'Avantgo',
        'cHTML', 'BlackBerry', 'Opera Mini',
        'Nokia', 'PSP', 'J2ME'
    );
    $result = false;

    if ( isset( $_SERVER["HTTP_USER_AGENT"]))
    {
        foreach( $agents as $agent)
        {
            if ( strpos( $_SERVER["HTTP_USER_AGENT"], $agent))
            {
                $result = true;
                break;
            }
        }
    }
    return $result;
}

[(prx) A. K. (prx)]

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.

[Andreas S. (andreas) (Admin)]

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.

[Hannes L. (hannes)]

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 (Gast)]

Ich hab zeitweise ein Tablet, und erachte die scollerei als eher 
muehsam. Das Element fuer 'seite vor/zurueck' ist zuoberst an der seite. 
Das Aktuelle, plus ein Kommentar ist zuunterst. Ich wuerd daher 
periodisch auf die Seitenhoehe verteilte 'ganz hoch' und 'ganz runter' 
Bedienelemente begruessen

[Andreas S. (andreas) (Admin)]

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

So besser (s. Anhang)?

[(prx) A. K. (prx)]

Yep, das wäre super.

[Andreas S. (andreas) (Admin)]

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

Mein Erkennungscode:

  SMARTPHONE_USER_AGENTS = /palm|blackberry|iphone|windows ce|android/i
  TABLET_USER_AGENTS = /ipad|tablet|galaxy tab/i
  def is_tablet?
    TABLET_USER_AGENTS.match(request.user_agent)
  end
  def is_smartphone?
    SMARTPHONE_USER_AGENTS.match(request.user_agent) and !is_tablet?
  end

[Tablet User (Gast)]

Zu den Navigationspfeilen - wow. Toll. So passt es. Vielen Dank.

[(prx) A. K. (prx)]

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.

[heinrichs, oliver (Gast)]

Also auf dem iPhone 4 kann man jetzt die Forenbeiträge endlich halbwegs 
angenehm lesen ohne dauernd nach links oder rechts zu scrollen. 
Zumindest im Widescreen. Vielen Dank. Macht weiter so.

[Tablet User (Gast)]

Ich vergass zu erwaehnen. Ich hab ein Samsung Galaxy Tab 10.1 mit 
Android 3.2 und dem Google Browser drauf. Da geht's.
Beim Opera Mini geht es nicht.
Beim Dolphin geht es auch.

[Michael H. (michael_h45)]

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.

[Andreas S. (andreas) (Admin)]

Die Pfeile sollten jetzt auch mit Opera funktionieren.

[(prx) A. K. (prx)]

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

[Michael H. (michael_h45)]

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?

[Gerd (Gast)]

Opera Mobile 12 auf HTC Sensation:

Umschalten geht, ABER:

Bei Landscape kann ich die Seite in kompletter Breite wunderbar Lesen, 
inkl. Menü links. Hochkant nur mit <10cm zu den Augen oder zoomen. Der 
Text geht aber auch nur über ca. 60% des Displays (100% =^ breite der 
orangen Streifen). Was hier im Layout allerdings die Breite vorgibt ist 
mir schleierhaft. Das Menü wird wird schön gestapelt.

[(prx) A. K. (prx)]

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.

[Soenio (Gast)]

Auf Windows Phone 7.5 geht die neue Version nicht.

[mpl (Gast)]

Kann man diesen käse auch wieder abschalten? Ich hab beim reinzoomen nur 
noch 2 fette Buttons

[Johann (Gast)]

Dem kann ich mich nur anschliessen. Diese Verschlimmbesserung sollte 
schleunigst wieder verschwinden.

[Michael P. (mpl)]

und das menu is nun oben?

[Alex B. (alex96)]

Hi

ich finde die pfeile auch nur störend

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

MfG Alex

[Michael H. (michael_h45)]

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 (Gast)]

Das Problem besteht darin, das man ewig rauf und runter scroolen muss.
(1) Das Menu ist zwar oben, aber der Rest der Seite ist praktisch leer.
(2) Scroolt man runter, kommt nur leerer Raum mit Werbung links.
(3) Hat man dann endlich den Beitrag erreicht, kann man ihn kaum lesen.
Das alte Layout war da viel praktischer.

[mh (Gast)]

Johann schrieb:
> Das Problem besteht darin
das sind doch zwei völlig unterschiedliche dinge...

> Das alte Layout war da viel praktischer.
die darstellung ist einfach fehlerhaft... von neuem layout kann DA keine 
rede sein.
das "alte layout" hat funktioniert.

warum sagst du nicht einfach, dass die darstellung fehlerhaft ist, 
anstatt dir die alte version zurück zu wünschen?

wenn dein neues auto ein kaputtes rücklicht hast, tauschst du das doch 
auch nicht gegen deine letzte druchgerostete karre ein, nur weil da das 
rücklicht ging?!

leute gibts...

hilfreich wären dann von deiner seite aus ein paar fakten: geröt, OS, 
browser, usw...

[Johann (Gast)]

mh schrieb:
> warum sagst du nicht einfach, dass die darstellung fehlerhaft ist,
> anstatt dir die alte version zurück zu wünschen?

Weil es mir einfach mit dem Layout auf der linken Seite wesentlich 
besser gefällt. Die Zeit der Smartphones mit Zwergwinzlingsbildschirm 
ist halt zu Ende. Da sollte man nicht mehr versuchen Webseiten auf 
320x240 Punkte-Displays zu optimieren.

mh schrieb:
> hilfreich wären dann von deiner seite aus ein paar fakten: geröt, OS,
> browser, usw...

Samsung Galaxy Note (nein, das ist kein Tablet sondern ein Smartphone)
Android 2.3.6
Opera Browser

[(prx) A. K. (prx)]

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.

[Läubi .. (laeubi)]

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

[Michael H. (michael_h45)]

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

[Simon S. (-schumi-)]

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

[Reinhard S. (rezz)]

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?

[Michael H. (michael_h45)]

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.

[Christian R. (mrrotzi)]

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

Bitte bitte bitte wieder entfernen!

es stört und funktioniert nicht wirklich!

Danke,
Christian

[Fabian (Gast)]

Was sollen die blöden Pfeile denn machen, wenn sie funktionieren 
würden?! Mich machen sie nur traurig.. :-(

[Stephan W. (stipo)]

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.

[John B. (johnbauer)]

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.

[Michael H. (michael_h45)]

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"