Suggerimenti per la progettazione di pagine Web per browser mobile?

Question

Sto facendo il mio debutto nella progettazione di un'app Web specificamente mirata ai browser mobili. Anche se in precedenza ho scritto pagine Web in C#/ASP.NET, non ho mai fatto nulla in particolare per lo spazio limitato dello schermo e altre idiosincrasie dei browser mobili. Quindi sto cercando alcuni suggerimenti qui:

• Quali considerazioni di progettazione dovrei prendere in considerazione (a parte lo schermo ovviamente più piccolo)?
• Quali utili funzionalità ci sono in C# che possono essere messe a frutto per il client mobile?
• Come assicurate di offrire un'esperienza utente relativamente uniforme per tutti i diversi browser mobili?
• Qualche altro consiglio che hai?

Grazie!

Answer 1

Quali considerazioni di progettazione dovrei tenendo conto delle (a parte il schermo ovviamente più piccolo)?

Come circa l'interazione con l'utente, ad esempio, ci sono pochi dispositivi che permettono di "in bilico", in modo da non dipendono da pseudo-classi che non può essere emulato su un dispositivo mobile, ma non del tutto li ignorano , quindi i dispositivi mobili potrebbero usarli.

Pensa all'orientamento del progetto, se il dispositivo supporta la visualizzazione orizzontale e orizzontale.

Alcuni dispositivi come l'iPhone non possono essere utilizzati con una precisione millimetrica utilizzando uno stilo, quindi non rendere gli ingressi pericolosamente piccoli.

Se si utilizza effetti di crostata l'interfaccia utente, la maggior parte dei dispositivi mobili non mostrano effetti (come quelli forniti da jQuery) molto bene ...

Infine test, test, test! Prova su quanti più dispositivi mobili reali puoi, e quando hai finito prendi in considerazione l'uso di emulatori (come quelli per BlackBerrys o iPhone), mentre questo non ti dà la sensazione di usare il dispositivo, dovrebbe mostrare qualsiasi rendering i problemi.

Answer 2

Probabilmente ovvio, ma assicurati di definire un foglio di stile portatile su misura.

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" /> 

Mentre moderni smartphone (ad esempio iPhone) in grado di gestire i siti normali lo zoom costante dentro e fuori è meglio evitare per un'applicazione mobile dedicata. Tuttavia, vale la pena progettare due versioni nel caso in cui l'utente desideri accedere all'app utilizzando anche un laptop/desktop.

Answer 3

Fare una buona esperienza sui dispositivi mobili riguarda principalmente l'interfaccia utente e non l'applicazione di back-end.

• Utilizzare un foglio mobile di stile del dispositivo (media="handheld" attributo sul link -element)
• avere il minor numero HTTP-richieste possibili:
  • Comprimere tutti gli script e fogli di stile in un unico file (uno per .js, uno per.css, che è)
  • minor numero di immagini possibile
• Tenete a mente le differenze tra i dispositivi touch e dispositivi non-touch (dimensione dei tasti, per esempio)
• stare attenti con la quantità di contenuti ti trovi in ​​una pagina.

Answer 4

Non reindirizzare alla versione mobile del sito, perdendo il target previsto. Se voglio vedere un articolo su un sito, non portarmi alla home page mobile. Puoi portarmi alla visualizzazione mobile dell'articolo, ma dirottare interamente il mio obiettivo è inaccettabile.

Una certa cr *** ed.com fa questo sempre che è incredibilmente irritante ....

Answer 5

Compress, Minimizzando, ottimizzare per un paio di motivi. La larghezza di banda non è eccezionale, una pagina che si carica in un paio di secondi sul desktop potrebbe impiegare più di 30 secondi su un dispositivo mobile. Il caching è davvero scarso sui cellulari. Un esempio è che l'iPhone non memorizzerà nella cache i componenti di un sito Web oltre 25k. Quindi prendi le tue immagini, script, fogli di stile il più piccolo possibile.

Answer 6

Si consiglia di verificare WURFL che fondamentalmente è un enorme file xml che consente di identificare il dispositivo. Prendi l'agente utente e confrontalo con il loro file API per ottenere tutte le funzionalità e le funzionalità per quel dispositivo. L'ho usato in numerosi progetti con grande successo.