Come posso progettare un sito per telefoni cellulari

StackOverflow https://stackoverflow.com/questions/624262

  •  05-07-2019
  •  | 
  •  

Domanda

Come posso iniziare lo sviluppo di un sito che può essere sfogliato dai telefoni cellulari? Ad esempio, se navighi nel sito Gmail da un iPhone, il sito appare diverso dal sito normale. Devi progettare due diversi siti per fare questo? Come posso sapere se al sito si accede da un browser mobile?

È stato utile?

Soluzione

Non DEVI progettare due siti diversi, ma probabilmente vorrai farlo se è importante consentire agli utenti mobili di accedere al tuo sito.

Esistono alcuni modi per affrontare questo problema, ciascuno con pro e contro. Suppongo che il tuo sito abbia le sue informazioni in un database e pubblica quei dati usando una serie di modelli? (Come un sito Ruby on Rails o Django; un sito PHP; un blog; ecc.) Se hai codificato manualmente un sacco di pagine HTML statiche, questo sarà molto più laborioso per te.

1: stesso HTML, fogli di stile diversi per SCREEN e MOBILE

L'idea: fornire la stessa struttura HTML a tutte le richieste. Si crea un foglio di stile per SCREEN e uno per MOBILE.

Buono: per te, il programmatore. È più facile per te mantenere 2 fogli di stile che mantenere 2 siti di template totalmente separati.

Cattivo: per i tuoi utenti. Un sito facile da usare su un dispositivo mobile di solito è inefficiente per un normale browser; e i siti ottimizzati per un desktop / laptop spesso falliscono miseramente su un dispositivo mobile. Ovviamente dipende da come codifichi le tue pagine, ma nella maggior parte dei casi, spingere il tuo sito normale su un browser mobile sarà dannoso per i tuoi utenti. (Vedi http://www.useit.com/alertbox/mobile-usability.html per un riepilogo della recente ricerca sull'usabilità di Jakob Nielsen sui siti mobili.)

2: Gestisci siti separati

(Gmail mantiene anche più di 2 sistemi! Fondamentalmente hanno applicazioni / modelli container diversi che elaborano gli stessi dati: la versione completa del browser AJAX; la versione semplice del browser HTML; una versione mobile di base; un'applicazione Blackberry nativa; e un applicazione iPhone nativa.)

Questo è lo standard emergente per i siti a cui interessa davvero avere una presenza sia mobile che desktop. È più lavoro per te, ma in generale è molto meglio per i tuoi utenti.

Sul lato positivo, puoi probabilmente creare un sito HTML puro ridotto che funziona per dispositivi mobili e che funge da fallback per il raro utente Web che non ha javascript o che ha importanti problemi di accessibilità che ne impediscono l'utilizzo il "pieno" posto.

Inoltre, a seconda della base di utenti: negli Stati Uniti, le persone generalmente hanno accesso a un desktop / laptop e usano i loro dispositivi mobili per l'accesso ausiliario. Ad esempio, prenoto i biglietti aerei e l'auto a noleggio utilizzando il mio computer desktop, ma desidero cercare il mio codice di prenotazione sul cellulare. In molti casi, puoi evitare di limitare le funzionalità che offri sul sito mobile e richiedere che il computer completo esegua casi d'uso non comuni.

La procedura di base:

  1. Design & amp; costruire interfacce utente per dispositivi mobili e schermo.
  2. Avvia i siti in due URL diversi; la convenzione emergente è www.yoursite.com per la versione desktop e m.yoursite.com per la versione mobile. (Ciò consente agli utenti di navigare direttamente su m.yoursite.com se conoscono la convenzione.)
  3. Su www.yoursite.com, annusa l'agente utente e verifica se il browser dell'utente è mobile. In tal caso, indirizzare l'utente a m.yoursite.com.
    1. Esistono sniffer scritti in varie lingue del server (PHP, Perl, qualunque cosa) che è possibile utilizzare. Controlla le licenze. Ecco un esempio di uno sniffer scritto in php .
    2. Da L'articolo di Wikipedia sull'annusamento degli user agent : " Siti web destinati specificamente ai telefoni cellulari, come I-Mode di NTT DoCoMo o Vodafone's Vodafone Live! i portali, spesso fanno molto affidamento sullo sniffing degli user agent, poiché i browser mobili spesso differiscono notevolmente l'uno dall'altro. Negli ultimi anni sono stati fatti molti sviluppi nella navigazione mobile, mentre molti telefoni più vecchi che non possiedono queste nuove tecnologie sono ancora ampiamente utilizzati. Pertanto, i portali Web mobili generano spesso codici di markup completamente diversi a seconda del telefono cellulare utilizzato per esplorarli. Queste differenze possono essere piccole (ad es. Ridimensionamento di determinate immagini per adattarsi a schermi più piccoli) o piuttosto estese (ad es. Rendering della pagina in WML anziché XHTML). & Quot;
  4. Su m.yoursite.com, fornire un collegamento a www.yoursite.com. Gli utenti che fanno clic su questo link NON devono essere reindirizzati al sito mobile e il modo in cui lo fai dipende dalla tua implementazione.

Potresti voler seguire Quirksmode per i suoi emergenti articoli sui test mobili.

3: i modelli generano blocchi di dati diversi a seconda dell'agente utente e mantengono fogli di stile separati

Come (2), questo richiede di annusare l'agente utente. A differenza di (2), stai ancora utilizzando la stessa logica di pagina e non devi mantenere due siti separati. Questo potrebbe andare bene se hai solo a che fare con un blog o un sito Web che riguarda principalmente la lettura dei dati.

Nel codice del modello, puoi dire cose come 

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

Ciò consente principalmente di mantenere un set di file modello. Puoi anche semplificare le pagine che invii ai tuoi utenti mobili, in modo che non ottengano una grande pagina gonfia quando volevano solo leggere il tuo post sul blog o altro.

Altri suggerimenti

La maggior parte dei dispositivi mobili oggigiorno supporta "fogli di stile mobili" che sono semplicemente fogli di stile alternativi per visualizzare le cose in modo più semplice. Puoi aggiungere un foglio di stile mobile al tuo sito in modo normale e includere l'attributo media = " palmare " : 

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

Quindi quegli stili si applicheranno ai cellulari.

L'unico problema con questo metodo è se l'HTML è ingombrante, il caricamento della pagina potrebbe richiedere del tempo poiché la maggior parte dei browser per dispositivi mobili è più lenta (tranne Opera Mini). Ecco perché i siti più grandi come flickr e digg usano siti separati.

Note aggiuntive:

  • Bulky HTML non influisce tanto su Opera Mini perché utilizza un proxy che esegue il rendering esternamente, quindi invia una speciale "immagine" al dispositivo.
  • Utilizza HTML semplice e pulito, quindi puoi inviare lo stesso a normali browser e dispositivi mobili
  • Dovrai controllare le combinazioni di fogli di stile con gli attributi media . L'aggiunta di IIRC al codice precedente farà sì che i browser ignorino il primo foglio di stile. Se aggiungi media = " all " al primo, verranno utilizzati entrambi (e puoi quindi sovrascrivere gli stili originali anziché ricominciare da capo).

Per verificare l'aspetto di un weppage in un browser mobile, utilizzare Opera Mini Emulator

Guarda il progetto WURFL . La sua intenzione è di aiutare gli sviluppatori a rivolgersi a più browser di telefoni e ha iniziato molto prima che esistesse Mobile Safari, ai tempi di HDML, WAP e XHTML-MP. È aggiornato, tuttavia, per archiviare le capacità di dispositivi moderni come iPhone. Ha dati su oltre 400 dispositivi e ha librerie in Java, PHP, Perl, Ruby, Python, .NET, C ++. A seconda dell'ampiezza che desideri scegliere come target per la tua app mobile, è qualcosa da guardare. Ecco un elenco di siti che utilizzano WURFL.

Un altro progetto correlato scritto da Luca Passani (il co-fondatore e manutentore di WURFL) è Switcher . Puoi utilizzarlo per reindirizzare automaticamente alla versione mobile del tuo sito.

Mantieni la semplicità, pensa opera mini e otterrai il risultato giusto. (iPhone ha più di un normale browser ...)

  1. Focus sul contenuto

  2. Evita plug-in

  3. Segui gli standard web

  4. Separare il contenuto dal layout / design, utilizzare CSS quanto più possibile.

  5. Usa testo e immagini.

Aggiungi il resto delle campane e dei fischi se necessario, ma assicurati che il contenuto del sito sia sempre disponibile anche quando le campane e i fischi sono spenti. Se riesci a navigare nella pagina con un semplice browser come Lynx e un normale browser come Firefox, allora sei sulla buona strada.

Per maggiori informazioni, visita la qualsiasi campagna per browser

Modifica: nel caso in cui non sia ovvio che lavori con diversi CSS per diversi tipi di browser, ma usi sempre lo stesso contenuto. Visita il css zen garden per una bella demo.

Aggiornamento: L'aggiunta di un collegamento ai tipi di supporto CSS e, come affermato da altri, è l'opzione del palmare che è interessante.

  

Devi progettare due diversi siti per farlo?

Si

  

Come faccio a sapere se al sito web accede un browser mobile?

Il tuo linguaggio di programmazione ha probabilmente un modo per consultare le informazioni del cliente. PHP, ad esempio, ha una variabile superglobal $ _SERVER che contiene tutti i tipi di informazioni sia del server che serve, sia del client in visita. In questo caso, ti interesserebbe il valore di $ _SERVER ['HTTP_USER_AGENT'] , che darebbe il seguente risultato, se dovessi visitare una pagina: 

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

Questo ti dice che sto usando Mac OS X 10.5.6, usando Safari 4.0. Esistono parole chiave conosciute per vari browser mobili. Una versione del browser di iPhone, ad esempio, ha il seguente agente utente: 

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

l'iPhone " lo dà già, ma è ulteriormente confermato dalle parole chiave "mobile" e " Safari "

La maggior parte dei siti ha un sottodominio leggermente diverso per i siti mobili (la maggior parte usa "m"). per esempio. flickr utilizza m.flickr.com

(vi è una raccomandazione di utilizzare il .mobi TLD ma non ho mai visto che usato)

Rendi il design super semplice, non usare troppi elementi grafici, dove devi mantenerli il più piccoli possibile. Questo potrebbe essere utile per la progettazione.

Probabilmente costruirò un diverso set di pagine per utenti mobili, facendo uso degli stessi oggetti business ecc. che stai usando per il sito principale.

Se le differenze tra il design delle due attrazioni non sono eccessive, potresti riuscire a trovare un modo per servire solo file CSS separati?

Il tuo sito deve essere limitato al telefono cellulare che può supportare i requisiti massimi. non puoi nemmeno intrattenere tutti i cellulare .

Il tuo sito web dovrebbe avere un set diverso di stile css e HTTP AGENT deve controllare il tipo di client in base alla richiesta di selezione Css.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top