Come si vedono i siti web sui cellulari dei clienti?
Usare Firefox su desktop è il modo più semplice per verificare l'aspetto dei siti web su cellulare, senza avere fisicamente tutti gli smartphone. Basta impostare correttamente i parametri
Per chi fa siti web, il cliente che non conosce le regole del web ma "vuole il sito bello" è una disgrazia. Ha da ridire su tutto: su come va a capo una frase, se il testo appare troppo grande o troppo piccolo, su quanto testo ci sta su una riga e così via. Ed è inutile tentare di fargli capire che proprio questa è l'essenza del web: il contenuto viene automaticamente ridisposto secondo lo strumento che lo visualizza.
E che, nell'impossibilità di prevedere qualunque situazione (già pensare all'attuale suddivisione tra desktop, tablet e smartphone può far venire il mal di testa), occorre accettare il fatto che qualunque studio grafico è un compromesso e che anche il layout più ricercato può apparire non troppo elegante su alcuni dispositivi.
Tuttavia è importante verificare come il sito viene visto dai tipi diversi di dispositivi, per evitare almeno gli errori (estetici e funzionali) più importanti. Ed è anche importante verificare in anticipo come il cliente vede il sito sui suoi dispositivi, che siano PC, tablet o smartphone: in questo modo è possibile anticipare le sue obiezioni e non perdersi in battibecchi che possono diventare estenuanti.
Il problema è che non si possono acquistare apparecchi uguali a quelli del cliente per ogni sito web che si costruisce...
In questo articolo scopri come è possibile emulare gli apparecchi del cliente, istruendo il tuo browser a funzionare come se fosse proprio quei dispositivi.
Di che strumenti c'è bisogno?
Per poter vedere i siti con gli apparecchi del cliente occorrono due cose:
- Firefox, possibilmente alla versione più recente. In realtà è possibile fare la stessa cosa anche con Chrome, ma poiché (secondo noi) vi sono ottime ragioni per preferire Firefox il tutorial usa questo browser. Se proprio vuoi usare Chrome, non avrai difficoltà ad adattare le isruzioni al browser di Google.
- La collaborazione del cliente, almeno all'inizio. Questa collaborazione può essere ampiamente inconsapevole, ma è necessaria per farti sapere quali strumenti usa e quali sono i suoi parametri.
Una precisazione: non c'è bisogno di raccontare balle al cliente. È sufficiente dire che hai bisogno di conoscere i parametri dei suoi dispositivi per verificare la resa del sito su dispositivi diversi da quello su cui è stato sviluppato. È la verità. E non è difficile ottenere la collaborazione del cliente.
I dati da conoscere
Per configurare Firefox in modo che si comporti come i dispositivi del tuo cliente devi conoscere, per ogni apparecchio:
- la risoluzione lineare fisica, detta anche risoluzione effettiva
- la risoluzione lineare logica
- l'altezza in pixel
- il rapporto pixel dispositivo, detto anche rapporto pixel CSS (o, con termini inglesi, device pixel ratio o CSS pixel ratio). Non deve essere confuso con il rapporto tra i lati (aspect ratio), che è un'altra cosa e i cui valori più comuni sono 4:3, 2:3, 16:9 e tanti altri che si riferiscono ai cellulari.
- lo user agent del dispositivo utilizzato. Questo dato è una stringa di testo che riporta il browser usato, il sistema operativo e altre informazioni.
In pratica, i primi tre valori si riferiscono strettamente al dispositivo, il quarto si riferisce al browser e al sistema operativo.
Nota che i primi tre dati sono strettamente correlati, secondo la formula
A dirla tutta, per i nostri scopi non è necessario conoscere la risoluzione lineare fisica, ma è bene avere presente che cos'è e qual è la differenza con la risoluzione lineare logica. Se vuoi approfondire questo argomento, ti consigliamo di leggere quanto riportato in questa pagina. Se invece ti basta conoscere l'essenziale, sappi che attualmente ciò che conta davvero è la risoluzione lineare logica.
Per conoscere i dati che ti occorrono, puoi usare le funzioni di un linguaggio di programmazione adatto. Oppure, più semplicemente, puoi ricorrere a siti che di offrano immediatamente e gratuitamente le informazioni che cerchi.
Ti consigliamo My Device, che riporta tutto ciò che ti serve.
Tra tutti i dati riportati, quelli che ti servono sono:
- risoluzione lineare logica: è riportata nella voce JS screen.width
- l'altezza: è riportata nella voce JS screen.height
- rapporto pixel dispositivo: è riportato nella voce JS pixel-ratio
- user agent: è riportato nella voce User agent.
Nota che ti consigliano di usare il valore della voce JS pixel-ratio anziché quello della voce CSS pixel-ratio (che parrebbe proprio ciò che stai cercando) perché è un valore più preciso nel caso avessi a che fare con un numero decimale.
Ora sei pronto per configurare Firefox.
Attivazione della modalità di visualizzazione flessibile
Firefox dispone della modalità di visualizzazione flessibile, che permette di usare il browser su desktop come se fosse su un altro apparecchio. Per attivare questa modalità, devi cliccare il pulsante del menu di Firefox e poi il comando Altri strumenti → Modalità visualizzazione flessibile. oppure, molto più semplicemente, usare la scorciatoia da tastiera Ctrl+Maiusc+M.
Ora Firefox mostra il sito web come se ad operare non fosse il tuo computer ma l'ultimo dispositivo usato tra quelli disponibili nell'apposito elenco, come mostrato nella figura sottostante.
Ma attenzione! In alcuni siti che forniscono contenuti diversi agli smartphone rispetto ai desktop l'emulazione del dispositivo può non essere completa (dipende da come forniscono le pagine). Per rendere totale l'emulazione devi semplicemente rigenerare la pagina: puoi cliccare il pulsante nella barra del browser, premere il tasto F5 o usare la combinazione Ctrl+R.
Dall'elenco dei dispositivi già presenti in Firefox puoi scegliere quello da utilizzare. Ma anche se gli apparecchi presenti sono numerosi, non sono che una minimissima parte di quelli sul mercato, perciò è facile che quelli usati dal tuo cliente non siano riportati.
Puoi però inserire nell'elenco i dispositivi che vuoi tu.
Configurazione di un nuovo dispositivo
Dall'elenco dei dispositivi, clicca l'ultima voce, Modifica elenco. Viene così aperta la finestra che riporta tutti i dispositivi disponibili, suddivisi per categorie: quelli selezionati sono quelli visibili nell'elenco.
Clicca ora il pulsante Aggiungi dispositivo personalizzato...: nella finestra compare quindi la sezione in cui inserire i dati del nuovo dispositivo.
Nella casella Nome puoi assegnare un nome a piacere; ovviamente, scegline uno che sia descrittivo dell'apparecchio e del cliente. Nelle altre caselle, inserisci i dati che hai ricavato dal sito My Device. Se si tratta di un cellulare o di altro dispositivo con lo schermo sensibile al tocco, seleziona la casella Schermo touch. Quindi clicca Salva.
Ora il dispositivo compare nell'elenco e può essere scelto ogni volta che ne hai bisogno. Ricorda però che a volte è indispensabile aggiornare la pagina sia quando passi alla modalità flessibile sia quando torni alla modalità normale.
Puoi modificare i parametri di un dispositivo personalizzato quando vuoi: nella finestra Impostazioni dispositivo, porta il puntatore sul dispositivo e clicca l'icona di matita che appare accanto ad esso.
Ti cambia la vita?
Se sviluppi siti web, sì: questa possibilità (e con essa, tanti altri strumenti di Firefox) ti cambia la vita.
