Provare le dimensioni di un sito a risoluzioni diverse e schermi piccoli

Verifica come una pagina web si adatta ai display di smartphone e tablet usando emulatori gratuiti, console dei browser ed estensioni dedicate

Per chi fa siti web capita in continuazione: si passa un'intera giornata ad allineare blocchi, immagini e testi su un monitor da 24 pollici fino a ottenere un risultato graficamente perfetto. Poi, per puro scrupolo, si apre lo stesso link dallo smartphone mentre si viaggia in treno e il disastro si palesa. I testi escono dai bordi, i menu si sovrappongono e i pulsanti sono troppo piccoli per essere cliccati con un dito. Verificare il comportamento di un layout a risoluzioni diverse non è un optional estetico, ma un obbligo di accessibilità. Un sito che non si piega alle dimensioni dei display ridotti allontana immediatamente chi legge.

Usare gli strumenti per sviluppatori nei browser

Prima di cercare software esterni, la soluzione più rapida per controllare l'adattamento grafico risiede già all'interno di programmi come Chrome, Edge o Firefox. I browser moderni includono una modalità di simulazione mobile molto avanzata.

Basta fare clic con il tasto destro del mouse su un punto vuoto della pagina e selezionare l'opzione Ispeziona. Si aprirà un pannello laterale o inferiore pieno di codice. In alto a sinistra di questa console, bisogna individuare e cliccare un'icona che raffigura un piccolo telefono sovrapposto a un tablet.

L'area di visualizzazione del sito si restringerà immediatamente, trasformandosi in un emulatore interattivo. Da questa schermata possiamo:

Selezionare modelli specifici di telefoni da un menu a tendina per imitarne le esatte proporzioni.
Trascinare manualmente le maniglie laterali per creare una risoluzione personalizzata al volo.
Simulare una rete lenta per capire quanto tempo impiegano le immagini a caricarsi su un dispositivo mobile.
Ruotare l'orientamento da verticale a orizzontale.

Questo ambiente di prova risulta imbattibile per la velocità di esecuzione. Resta comunque un'emulazione software: il sistema finge di avere uno schermo stretto, ma il motore di rendering è pur sempre quello del computer desktop.

Estensioni per ridimensionare la finestra a scatti

Chi deve testare più risoluzioni standard in rapida sequenza potrebbe trovare scomodo l'uso continuo del pannello sviluppatori. In questi scenari entrano in gioco le estensioni che agiscono direttamente sulla cornice del programma di navigazione.

Window Resizer rimane l'opzione più installata per questo scopo. Al posto di tirare i bordi a occhio, l'estensione fornisce un menu con le misure esatte dei display più diffusi sul mercato. Un clic su una voce dell'elenco forza la finestra ad assumere immediatamente quei pixel di larghezza e altezza.

L'utilità principale di questo sistema emerge quando si programmano i punti di interruzione del codice CSS, permettendo di vedere in tempo reale in quale esatto momento il testo va a capo o sparisce la barra laterale.

Emulatori web e navigazione sincronizzata

Quando l'obiettivo è mostrare una bozza grafica a un cliente, fornire uno screenshot di codice nudo e crudo non è l'ideale. Esistono piattaforme progettate per incorniciare il sito web all'interno delle sagome dei dispositivi fisici.

Visitando Am I Responsive si ottiene una visione d'insieme immediata. Inserendo un indirizzo web, la piattaforma posiziona il contenuto dentro quattro schermi virtuali contemporaneamente: desktop, laptop, tablet e smartphone. Il risultato grafico è molto pulito ed è perfetto per generare immagini dimostrative.

Per superare il limite di controllare un display alla volta e seguire la rotta di navigaweb verso un flusso di lavoro nettamente superiore, consigliamo l'uso di Responsively App. Questo programma open source, scaricabile gratuitamente sul computer, affianca molteplici finestre mobili in un'unica interfaccia. Il suo più grande pregio è la sincronizzazione: se si scorre la pagina sul primo telefono, tutti gli altri schermi collegati scendono alla stessa velocità, clic e passaggi del mouse inclusi. Permette di scovare errori di allineamento in una frazione del tempo.

Ancora meglio, per provare un sito web in versione mobile è aprirlo con il browser gratuito LTBrowser che è davvero fantastico. Nella sua interfaccia permette di navigare su internet come se si utilizzasse uno smartphone, con capacità di rilevare le versioni mobili dei siti, automaticamente con tanti modelli tra scegliere (iPhone, Samsung ecc). Si può anche vedere lo stesso sito da due dispositivi diversi simultaneamente. LTBrowser è un browser che vale la pena segnalare per come funziona bene, anche perchè completamente gratis.

La rimozione degli strumenti Google e l'analisi mobile

Fino a poco tempo fa, bastava incollare un link nel Test di Ottimizzazione Mobile di Google per ricevere una valutazione istantanea. A fine 2023, l'azienda di Mountain View ha ritirato definitivamente questo comodo servizio. Si tratta di una prassi aziendale ormai ricorrente e frustrante: eliminare strumenti veloci e mirati per forzare le persone a impiegare suite di diagnostica molto più pesanti.

Oggi, per ottenere una validazione formale, bisogna affidarsi a Lighthouse. Per usarlo, occorre aprire di nuovo la console degli sviluppatori del browser, cercare la scheda Lighthouse, selezionare l'opzione per i dispositivi mobili e avviare l'analisi. Il report generato segnala difetti di impaginazione, come link posizionati troppo vicini o testi che richiedono lo zoom manuale per essere letti, ma la sua interpretazione richiede decisamente più pazienza rispetto al vecchio strumento dedicato.

I limiti della simulazione e l'uso reale

Anche impiegando i software più costosi, la prova fisica restituisce sensazioni che un mouse non può imitare. Un bottone che sullo schermo del computer appare adeguato, potrebbe risultare impossibile da premere con il pollice di una mano senza colpire accidentalmente il link sottostante.

Le tastiere a schermo di iOS e Android, quando si aprono per compilare un modulo, rubano metà dello spazio visivo. Spesso finiscono per nascondere il pulsante di invio, costringendo la persona a una ginnastica scomoda per completare l'operazione. Questi difetti di interazione, legati ai sistemi operativi nativi, si scoprono soltanto prendendo in mano un dispositivo autentico e navigando il sito per qualche minuto.

Altri dettagli importanti e ricerche comuni

Il tag viewport: per dire al cellulare di adattare le misure e non comportarsi come un computer desktop in miniatura, è fondamentale inserire la riga <meta name="viewport" content="width=device-width, initial-scale=1.0"> nella testa del codice HTML della pagina.
Design fluido contro adattivo: un sito si definisce fluido quando i suoi elementi si allargano o restringono in percentuale per ogni pixel disponibile, mentre l'approccio adattivo salta a scatti tra configurazioni rigide predefinite.
Comportamento di Safari: verificare le proporzioni su iPhone è vitale, perché il browser di Apple gestisce le altezze delle finestre mobili in modo diverso rispetto agli standard applicati da Chrome su Android.
Sovrapposizione di menu mobili: un errore classico si verifica quando il menu a tendina aperto dal simbolo ad hamburger si incastra sotto le immagini della pagina o scompare ai margini dello schermo a causa di un posizionamento assoluto errato.