it-swarm-eu.dev

Entwerfen für mobile Webbrowser

Was ist der beste Ansatz für die Gestaltung einer Website, die in den meisten modernen mobilen Webbrowsern ausgeführt werden kann?

Reicht die Ausrichtung auf WebKit-basierte Browser aus?

8
rick schott

Nein, das Targeting von WebKit reicht nicht aus. Das erste, was zu tun ist, ist zu berücksichtigen, dass es zwei Segmente des Mobilfunkmarktes gibt: berührungsbasiert und nicht berührungsbasiert. Dies wirkt sich darauf aus, wie Sie Ihre mobile Benutzererfahrung gestalten. Zum Glück werden die Touch-basierten Modelle deutlich in Richtung WebKit (Android, iPhone und WebOS) tendieren. Die anderen werden in erster Linie IE Mobile (IE Mobile 6 unter Windows Mobile 6.5 und ein neues basierend auf IE7/IE8 unter Windows Phone 7) und Opera) sein = (Mobile und Mini) Weitere Informationen zum Rendern von Engines und Funktionen finden Sie in diesem Liste der mobilen Browser auf Wikipedia .

Bei berührungsbasierten Plattformen kann eine Bibliothek wie Sencha Touch Ihnen dabei helfen, vergleichbare Erlebnisse auf allen Geräten zu erstellen. Es wird jedoch schwierig sein, auf allen Geräten gleiche Erlebnisse zu schaffen. Tatsächlich empfehle ich Ihnen , es nicht zu versuchen . Der Unterschied zwischen mobilen Touch- und Non-Touch-Plattformen wird so groß, dass es fast wie der UX-Unterschied ist, eine Desktop-basierte Benutzeroberfläche auf einen Bildschirm mit mobiler Größe zu bringen - was auf Touch-basierten Plattformen in Ordnung ist, da sie das "Zoom" -Paradigma des iPhones verwenden - Es wird Ihnen jedoch schwer fallen, aus diesem Ansatz für ältere oder berührungslose Plattformen etwas Nützliches herauszuholen.

Beachten Sie jedoch den Artikel von LukeW und die nachfolgenden Vorträge zu zuerst für Mobilgeräte entwerfen , was nicht unbedingt eine Antwort auf Ihre Frage ist, sondern als gutes Prinzip angesehen werden kann: Beginnen Sie mit dem Entwerfen, indem Sie die Dinge identifizieren, die Verbraucher tun möchten auf Ihrer Website und stellen Sie diese Dinge schnell und einfach zur Verfügung. Das ist durchweg gutes Design für all Plattformen. In diesem Sinne können Sie dies als Muster für Ihr mobiles Design verwenden.

12
Rahul

Ich habe gestern einige Experimente mit einem iPhone 3 gemacht. Hier sind meine Erfahrungen:

  • Nehmen Sie nicht an, dass die Breite 320 Pixel beträgt. Verwenden Sie daher ein flüssiges Breitenlayout.

  • Verwenden Sie den richtigen Doctype. Ich benutze das XHTML Mobile 1.2. Aber ich bin mir nicht sicher, ob dies der richtige ist.

  • Machen Sie die Knöpfe riesig.

  • Kein Hover, verwenden Sie also Symbole, um anzuzeigen, was die verschiedenen UI-Elemente tun.

4
neoneye

Der Begriff "mobil" wächst außerhalb des Bereichs der Telefone und umfasst zunehmend Geräte wie Tablets, für die Touchscreens mit einem Durchmesser von 5 bis 9 Zoll erforderlich sind. Darüber hinaus sollte ein mobiles Design sowohl horizontale als auch vertikale Ausrichtungen berücksichtigen. Zusätzlich zu dem, was Neoneye gesagt hat, noch ein paar Empfehlungen/Vorschläge.

  • Verwenden Sie einen Rand oder Abstand, um sicherzustellen, dass kein Text direkt am Bildschirmrand angezeigt wird.
  • Stellen Sie neben der Verwendung eines Layouts mit flüssiger Breite (Breiten können von 320 bis 1024 Pixel reichen) sicher, dass die von Ihnen verwendeten Designelemente gut verpackt sind. Beispielsweise sehen Schaltflächen besser verpackt aus als eine horizontale Liste.
  • Der Text muss etwas größer, aber dennoch lesbar sein. Aus meiner Sicht ist hier ein guter typografischer Stil mindestens genauso wichtig. Die Elemente des typografischen Stils, die auf das Web angewendet werden ist eine gute Referenz.
3
waymost

Wenn Ihre Zielgruppe ein bisschen besser qualifiziert werden kann, können Sie möglicherweise einige fundierte Annahmen treffen, dass die meisten Kunden ein primäres Gerät oder einen Rendering-Browser verwenden. Gehen Sie zuerst auf die Kernbedürfnisse Ihres primären Publikums ein. Der Versuch, Ihre Anwendung am "Anfang" gleichmäßig auf alle Plattformen zu verteilen, könnte eine zu entmutigende Aufgabe sein.

Hier sind einige hilfreiche Artikel, auf die ich gestoßen bin:

Mobile Referenz http://www.quirksmode.org/mobile/

2
hungrysquirrel