it-swarm-eu.dev

Progettazione per browser Web mobili

Qual è l'approccio migliore per la progettazione di un sito Web per l'esecuzione su quasi tutti i browser Web mobili moderni?

Il targeting dei browser basati su WebKit è sufficiente?

8
rick schott

No, il targeting di WebKit non è sufficiente. La prima cosa da fare è considerare che ci sono due segmenti del mercato mobile: basato sul tocco e non basato sul tocco. Ciò influisce sul modo in cui si progetta la propria esperienza utente mobile. Per fortuna, quelli touch-based andranno significativamente verso WebKit (Android, iPhone e WebOS). Gli altri saranno principalmente IE Mobile (IE Mobile 6 su Windows Mobile 6.5 e uno nuovo basato su IE7/IE8 su Windows Phone 7) e Opera = (Mobile e Mini). Fare riferimento a questo elenco dei browser mobili su Wikipedia per ulteriori informazioni sui motori e le funzionalità di rendering.

Per le piattaforme touch-based, una libreria come Sencha Touch può aiutarti a creare esperienze comparabili su tutti i dispositivi, ma sarà difficile creare esperienze uguali su tutti i dispositivi. In effetti, ti consiglio di non provare . La differenza tra piattaforme mobili touch e non touch sta diventando così grande che è quasi come la differenza UX nel provare a adattare un'interfaccia utente basata su desktop su uno schermo di dimensioni mobili - che funziona bene su piattaforme touch-based poiché usano il paradigma "zoom" di iPhone - ma avrai difficoltà a ottenere qualcosa di utile da questo approccio per piattaforme più vecchie o non touch.

Tuttavia, considera l'articolo di LukeW e i successivi discorsi su prima la progettazione per dispositivi mobili , che non è necessariamente una risposta alla tua domanda ma può essere considerato un buon principio: inizia a progettare identificando le cose che i consumatori vogliono fare sul tuo sito e rendi queste cose disponibili in modo rapido e semplice. Questo è sempre un buon design uniforme su tutte le piattaforme all, quindi in questo senso puoi usarlo come modello che guida il tuo design mobile.

12
Rahul

Ieri ho fatto alcuni esperimenti con un iPhone 3. Ecco le mie esperienze:

  • Non dare per scontato che la larghezza sia di 320 pixel, quindi utilizza un layout a larghezza fluida.

  • Usa il giusto doctype. Uso XHTML Mobile 1.2. Ma non sono sicuro che sia quello giusto.

  • Rendi i pulsanti enormi.

  • Non hover, quindi usa le icone per indicare cosa fanno i diversi elementi dell'interfaccia utente.

4
neoneye

Il termine mobile sta crescendo al di fuori del regno dei telefoni e sta iniziando a includere dispositivi come i tablet, che comportano schermi touch da cinque a nove pollici. Inoltre, un design mobile dovrebbe tenere conto sia degli orientamenti orizzontali che verticali. Oltre a ciò che ha detto Neoneye, qualche altro consiglio/suggerimento.

  • Usa un po 'di margine o di riempimento per assicurarti che nessun testo si trovi sul bordo dello schermo.
  • Oltre a utilizzare un layout a larghezza fluida (le larghezze possono andare da 320px a 1024px), assicurati che gli elementi di design che usi avvolgano bene. Ad esempio, i pulsanti hanno un aspetto migliore rispetto a un elenco orizzontale.
  • Il testo deve essere un po 'più grande, ma comunque leggibile. A mio avviso, un buon stile tipografico è almeno altrettanto importante qui. Gli elementi dello stile tipografico applicati al Web è un buon riferimento.
3
waymost

Se il tuo pubblico può essere qualificato un po 'di più, potresti essere in grado di fare alcune ipotesi istruite sul fatto che la maggior parte dei clienti utilizza un dispositivo principale o un browser di rendering. Per prima cosa, soddisfa le esigenze principali del tuo pubblico principale. Tentare di distribuire la tua applicazione su tutte le piattaforme allo stesso modo all'inizio potrebbe essere un'attività troppo scoraggiante.

Ecco alcuni articoli utili che ho trovato:

Riferimento mobile http://www.quirksmode.org/mobile/

2
hungrysquirrel