Best practice per le app web

Lo sviluppo di pagine web e applicazioni per dispositivi mobili presenta difficoltà diverse rispetto allo sviluppo di una pagina web per browser web desktop. Le best practice riportate di seguito possono aiutarti a fornire l'applicazione web più efficace per Android e altri dispositivi mobili.

  1. Reindirizza i dispositivi mobili a una versione per dispositivi mobili dedicata del tuo sito web. Esistono diversi modi per eseguire questa operazione utilizzando i reindirizzamenti lato server. Un metodo comune è "sniffare" la stringa dello user agent fornita dal browser web. Per determinare se pubblicare una versione per dispositivi mobili del tuo sito, cerca la stringa "mobile" nello user agent.
  2. Utilizza HTML5 per i dispositivi mobili. HTML5 è il linguaggio di markup più comune utilizzato nei siti web per dispositivi mobili. Questo standard incoraggia lo sviluppo mobile-first per garantire il funzionamento dei siti web su una varietà di dispositivi. A differenza dei linguaggi web precedenti, HTML5 utilizza dichiarazioni <DOCTYPE> e charset più semplici:
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Utilizza i metadati dell'area visibile per ridimensionare correttamente la pagina web. Nel documento <head>, fornisci metadati che specifichino come vuoi che l'area visibile del browser mostri la pagina web. Ad esempio, i metadati dell'area visibile possono specificare l'altezza e la larghezza dell'area visibile del browser, il ridimensionamento iniziale della pagina e la densità dello schermo target.

    L'esempio seguente mostra come impostare i metadati dell'area visibile:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Per ulteriori informazioni su come utilizzare i metadati dell'area visibile per i dispositivi Android, consulta Supporto di schermi diversi nelle app web.

  4. Utilizza un layout lineare verticale. Evitare che l'utente debba scorrere verso sinistra e verso destra durante la navigazione nella pagina. Scorrere verso l'alto e verso il basso è più facile per l'utente e la pagina è più semplice.
  5. Imposta l'altezza e la larghezza del layout su match_parent. L'impostazione dell'altezza e della larghezza dell'oggetto WebView su match_parent ti consente di assicurarti che le visualizzazioni dell'app vengano ridimensionate correttamente. Sconsigliamo di impostare l'altezza su wrap_content perché comporta un ridimensionamento errato. Allo stesso modo, l'impostazione della larghezza del layout su wrap_content non è supportata e fa sì che WebView utilizzi al suo posto la larghezza del relativo elemento principale. A causa di questo comportamento, è anche importante assicurarsi che l'altezza e la larghezza di nessuno degli oggetti del layout principale dell'oggetto WebView siano impostate su wrap_content.
  6. Evita più richieste di file. Poiché i dispositivi mobili hanno in genere una velocità di connessione più lenta rispetto ai computer desktop, fai in modo che la pagina venga caricata il più velocemente possibile. Un modo per velocizzare il processo consiste nell'evitare di caricare file extra come fogli di stile e file di script in <head>. Inoltre, prendi in considerazione l'esecuzione di analisi sui dispositivi mobili con PageSpeed Insights di Google per suggerimenti dettagliati di ottimizzazione specifici per la tua app.

Risorse aggiuntive