Quando si realizza una web app occorre prendere delle decisioni cruciali per quanto riguarda il suo design. In questo articolo analizzeremo il workflow relativo alla realizzazione di una web app per i dispositivi mobile.
I contenuti
Ogni web app differisce dalle altre per i contenuti. Una web app che mostra una galleria di prodotti è diversa da una web app che ospita contenuti testuali. Il primo step è l'analisi dei contenuti in base alle specifiche del progetto.
Occorre categorizzare i contenuti in due macrocategorie:
- contenuti statici
- contenuti dinamici
I contenuti statici e i contenuti dinamici ci portano a due importanti considerazioni:
- Nel primo caso, la web app potrà funzionare completamente anche offline.
- Nel secondo caso, alcuni contenuti dovranno essere reperiti dalla rete.
Una volta categorizzati i contenuti si passa alla loro divisione in sottocategorie, ossia:
- testo
- immagini
- video
A livello di design ciascuna di queste sottocategorie richiede un trattamento diverso. L'errore che non si deve mai commettere in questa fase è quello di pensare a tali contenuti come a dei normali elementi di una tradizionale applicazione desktop.
Su mobile infatti:
- Il testo dovrà avere una certa spaziatura orizzontale in modo da evitare lo spiacevole effetto visivo derivante dall'assenza di spazi tra i margini orizzontali e la finestra del browser.
- Le immagini dovranno adattarsi al dispositivo e al suo cambio di orientamento (landscape o portrait).
- Per i video vale quanto detto per le immagini. In più occorre valutare attentamente l'impatto di questi elementi sulla performance.
Il file Cache Manifest
Non bisogna abusare di questa caratteristica di HTML5. Costringere un browser a scaricare svariati megabyte di contenuti ha un senso solo se si è assolutamente certi che gli utenti dispongono di una connessione veloce (Wi-Fi).
Nel caso in cui gli utenti navighino con una connessione diversa (per esempio tramite SIM), il browser non riuscirà a scaricare tutti i file in tempi umanamente ragionevoli. Safari Mobile ad esempio può semplicemente interrompere il download dei file se la connessione non lo consente. Effettuare un test in questo caso è semplice:
- Salvate la web app su Home
- Attivate la modalità aereo (disabilitando così la SIM)
- Lanciate la web app.
Qualora manchino dei file o la web app non funzioni come previsto, allora siete sicuri che il vostro file Manifest è inadatto a supportare questo tipo di connessione.
Il design
Il design va strutturato in moduli:
- Struttura: HTML5
- Presentazione: CSS
- Comportamento: JavaScript
Ciascun modulo è interdipendente con gli altri. Un errore in un modulo si ripercuoterà sugli altri e la web app non funzionerà come previsto. L'ordine è sempre quello presentato nella lista: lavorare seguendo un ordine diverso è deleterio.
Occorre innanzitutto verificare che la struttura sia flessibile: cosa succede se occorre aggiungere un blocco di elementi? Per rendere flessibile la struttura:
- Limitate il numero di attributi
idai blocchi fondamentali - Usate le classi CSS in modo cumulativo sfruttando la cascata
- Aggiungete dati agli elementi tramite gli attributi custom data di HTML5.
I CSS possono essere sfruttati in due modi:
- per creare il layout statico della web app
- per aggiungere dinamismo tramite animazioni e transizioni CSS3
I CSS vanno usati al pieno del loro potenziale, ad esempio sfruttando tutti i selettori. Se usate delle animazioni o delle transizioni, legate il codice alle classi che verranno poi manipolate da JavaScript.
Il codice JavaScript deve essere OOP. Evitate sempre l'approccio procedurale perché il rischio è quello di dover ripartire da zero ad ogni nuova app realizzata. Pensate il codice in modo astratto. Considerate ad esempio un elemento come un oggetto con proprietà e metodi.
Questo vi permetterà di riusare e riusare spesso i vostri oggetti in nuove web app cambiandone solo il comportamento e non la struttura.