Come creare una web app ottimizzata per mobile

Una web app ottimizzata per mobile è un sito web che funziona come un'app sul telefono: si adatta allo schermo stretto, ha aree di tocco grandi, si carica in fretta con la connessione mobile e può essere aggiunta alla schermata home come progressive web app (PWA). Per la maggior parte delle nuove app è la prima versione pratica: un solo codice, un solo link, nessuna revisione dello store. Ha però dei limiti reali, soprattutto per le notifiche su iPhone e per l'accesso profondo ai dispositivi, e questa guida è diretta su quando serve davvero un'app nativa.

Tre modi di essere «su mobile»

Una PWA è una web app reattiva con qualche funzione in più, quindi non devi scegliere tra i primi due. Costruisci prima la versione reattiva, poi rendila installabile. Per un confronto più approfondito, consulta app native vs progressive web app.

Cosa possono fare e non fare le web app sul telefono

I browser possono fare più di quanto molti pensino:

• Fotocamera e caricamento di foto, tramite i normali campi di input file.
• Posizione, con il permesso dell'utente.
• Installazione nella schermata home con un'icona e un avvio a schermo intero.
• Uso offline, mettendo in cache pagine e dati con un service worker (uno script in background che il browser esegue per il tuo sito).
• Notifiche push, con un'avvertenza su iPhone. Apple, tramite il suo team WebKit, dice che le web push sono arrivate su iOS e iPadOS 16.4 per le web app aggiunte alla schermata Home. Gli utenti devono prima installare l'app, poi consentire le notifiche.

Dove il nativo vince ancora:

• Funzioni profonde del dispositivo, come la posizione in background, gli accessori Bluetooth, i dati sanitari e i widget della schermata Home: il supporto nel browser è limitato o varia da piattaforma a piattaforma.
• Scoperta sullo store. Se le persone cercheranno la tua app nello store, devi esserci.
• Lavoro offline pesante, come grandi insiemi di dati sincronizzati in background.
• Grafica che richiede molte prestazioni, come i giochi complessi.

Se nessuna di queste cose è centrale per la tua app, una web app probabilmente andrà benissimo.

Progettare prima per il telefono

Progetta prima il layout per il telefono e poi lascialo espandere sugli schermi più grandi: il percorso inverso di solito produce schermate da telefono affollate.

Layout

• Una colonna sugli schermi piccoli. Le barre laterali diventano una barra in basso o un menu.
• Nessuno scorrimento orizzontale. Le tabelle larghe diventano schede o scorrono dentro un contenitore proprio.
• Testo leggibile senza zoom: il testo del corpo intorno ai 16 px.

Tocco

• Aree di tocco grandi. Intorno ai 44 per 44 pixel è un minimo comune. Lascia spazio tra un'area e l'altra.
• Azioni principali a portata di pollice, vicino alla parte bassa dello schermo sui telefoni alti.
• Nessuna funzione che richiede il passaggio del mouse. Tooltip e menu che compaiono al passaggio del mouse non esistono sugli schermi touch.
• La tastiera giusta. I campi email devono aprire la tastiera per le email, i campi telefono il tastierino numerico. Chiedi i tipi di input corretti.

Velocità

• Immagini leggere di dimensioni sensate, caricate quando entrano nella vista.
• Meno librerie pesanti. Ognuna aggiunge tempo di download con la connessione mobile.
• Schermate scheletro o stati di caricamento chiari, così l'app non sembra mai bloccata.

Aree sicure e barra degli indirizzi

Sui telefoni moderni il contenuto può finire sotto la tacca o la barra inferiore, soprattutto in un'app installata a schermo intero. Chiedi un padding per le aree sicure. Fai attenzione anche ai layout a tutta altezza che saltano quando la barra degli indirizzi del browser compare e scompare.

Rendere l'app installabile (PWA)

Per essere installabile, una web app ha bisogno di:

1. Un manifest dell'app: un piccolo file con nome dell'app, nome breve, icone, colore del tema e modalità di apertura (di solito a schermo intero, «standalone»).
2. Icone nelle dimensioni che le piattaforme si aspettano, incluso un formato adatto ai dispositivi Apple.
3. HTTPS, che ogni app ospitata correttamente già ha.
4. Un service worker se vuoi il supporto offline o le push.

Poi spiega agli utenti come installarla. I browser Android di solito propongono un prompt di installazione o una voce di menu; su iPhone si usa il pulsante Condividi, poi «Aggiungi a Home». Una breve nota «Installa questa app» con questi passaggi aiuta molto.

Il supporto offline è la parte complicata delle PWA. Mettere in cache le pagine dell'app così da aprirla senza connessione è semplice. Permettere alle persone di modificare i dati offline e sincronizzarli dopo è un lavoro vero: chiedilo solo se i tuoi utenti ne hanno davvero bisogno.

Un primo prompt che funziona

Costruisci una web app per la nostra squadra di pulizie, per vedere i lavori di oggi e segnarli come completati. Progetta prima per il telefono: una colonna, aree di tocco grandi, il pulsante di azione principale fisso vicino al fondo, nessun controllo che richieda il passaggio del mouse, nessuno scorrimento orizzontale e tastiere corrette per i campi telefono ed email. Ogni lavoro mostra l'indirizzo (tocca per aprirlo nelle mappe), il telefono del cliente (tocca per chiamare), una checklist e un pulsante «Segna completato» che può scattare una foto. I manager fanno il login da un laptop per assegnare i lavori; su uno schermo largo mostra una tabella invece delle schede. Rendila una PWA installabile con manifest, icone e visualizzazione standalone, e metti in cache la struttura dell'app così si apre senza segnale. Salva i dati in un database.

Passaggi di costruzione

1. Costruisci prima il layout per il telefono con dati di esempio e controllalo in un'anteprima di dimensioni da telefono.
2. Testa su telefoni veri: almeno un iPhone e un Android, se i tuoi utenti hanno entrambi. Gli emulatori non mostrano cose come la tastiera a schermo che copre i campi.
3. Percorri l'attività principale con un solo pollice. Se qualcosa richiede due mani o lo zoom, sistemalo.
4. Aggiungi manifest e icone, poi installa l'app su entrambe le piattaforme e controlla icona, nome e schermata di avvio.
5. Decidi sull'offline. Parti con «si apre senza segnale e mostra un messaggio chiaro»; aggiungi la modifica offline solo se serve.
6. Verifica la velocità con una connessione lenta. Gli strumenti per sviluppatori del browser possono simularne una.
7. Aggiungi le notifiche per ultime, se mai, e prevedi un'alternativa via email per chi non installa l'app.

Errori comuni

• Progettare solo su un monitor grande. Controlla ogni schermata alla larghezza del telefono man mano che lavori.
• Tabelle che escono dai bordi. Trasforma le righe in schede sugli schermi piccoli.
• Aree di tocco piccole e link troppo vicini.
• Moduli che lottano con la tastiera: tipi di input sbagliati, campi nascosti dalla tastiera, nessun flusso «avanti».
• Dare per scontato che le push su iPhone funzionino nella scheda del browser. Richiedono che l'app sia installata nella schermata Home.
• Promettere un'app per l'App Store che non puoi pubblicare. Se lo store conta, pianificalo a parte.
• Avvolgere un sito web e chiamarlo app. Le App Review Guidelines di Apple chiedono app che vadano oltre un sito riconfezionato; un involucro sottile rischia il rifiuto.

Quando serve un'app nativa

Passa al nativo (o pianifica una versione nativa dopo la web app) quando:

• La presenza nello store è il modo in cui i clienti ti troveranno.
• Ti serve la posizione in background, il Bluetooth, i dati sanitari, i widget o altre funzioni del dispositivo che i browser non offrono in modo affidabile.
• La tua app deve funzionare del tutto offline per periodi lunghi.
• I tuoi utenti se lo aspettano: alcuni pubblici semplicemente non usano nulla che non sia nello store.

La pubblicazione sullo store ha costi e passaggi propri. A settembre 2026, secondo i loro stessi siti, il programma per sviluppatori Apple costa 99 USD l'anno e un account Google Play per sviluppatori costa 25 USD una tantum, e ogni rilascio passa dalla revisione. Molti team partono da una web app ottimizzata per mobile per dimostrare che le persone vogliono il prodotto, e investono nel nativo quando lo sanno. Come creare un'app con l'AI copre quella prima fase dall'inizio alla fine.

Costruirlo con Mythex

Mythex costruisce web app: descrivi l'app in chat e la verifichi nell'anteprima dal vivo su desktop e in una cornice da telefono che puoi ridimensionare. La documentazione include un prompt per il responsive mobile per correggere i layout sugli schermi piccoli. Puoi chiedere un manifest PWA e le icone come qualsiasi altra funzione, poi pubblicare su un link pubblico che funziona su qualsiasi telefono. Con il piano Pro, Mythex può anche racchiudere l'app in un'app per Android e iPhone, inviata al test interno di Google Play e a TestFlight. Per iniziare, vedi l'AI web app builder o sfoglia i template di app. Per un esempio completo, leggi come creare un'app per il monitoraggio delle abitudini.

Domande