Il paradosso dello smartphone

scritto da Mauricio

Immagina di essere un maestro o una maestra di una scuola materna, questa però non è una classica scuola materna: questa scuola impiega i suoi maestri in modo tutto suo. In che modo?
Hai una classe che va dai 30 ai 70 bambini, forse anche di più, ma non conosci mai il numero quando arrivi la mattina. Devi tenere in braccio tutti quei bambini che piangono, tutti insieme. Ci sono almeno 4 bambini che ti circondano e ti fanno domande su vari argomenti, devi rispondere altrimenti non smettono di chiedere. Non hai la pausa caffè, né pausa pranzo, non puoi proprio mangiare. Inizi molto presto la mattina e finisci tardi la sera. Visto che finisci tardi non ci sono più mezzi pubblici per tornare a casa… ah, dimenticavo, non hai la macchina.

Sì va bene, il paragone è un po’ forzato, ma serve a rendere l’idea per comprendere come si sente il tuo smartphone. Senza saperlo, tu maltratti questo tuo piccolo amico. Non è colpa tua, non puoi sapere cosa accade sotto lo schermo: quando navighi in un sito non puoi (o meglio non ti interessa) sapere come è stato fatto, vuoi solo le informazioni che ci sono nelle pagine, non puoi conoscere quali regole o contenuti sono stati previsti per quel sito a seconda del tipo di dispositivo che lo sta visitando.

Gli smartphone ormai si possono definire come dei "veri e propri computer", dei piccoli computer. Hanno processori dual o quad core, uno o due Gb di Ram, parecchi Gb di memoria per i dati, schermi ad alta definizione. Se ci penso, il mio smartphone -che ormai ha due anni di vita- supera di almeno 10 volte la potenza e capacità di memoria del mio primo computer! Ok, va bene, questo paragone potrebbe essere utile più che altro a indicare la mia età piuttosto che il reale progresso tecnologico, ma penso che delle mie (ipotetiche!) rughe non interessi a nessuno.
Nonostante le grandi potenzialità di uno smartphone questo non sarà mai come un computer desktop. Non ha la possibilità di montare processori di potenza paragonabile, non avrà la stessa disponibilità di Ram, nemmeno scheda video, memoria per i dati, disponibilità energetica e di velocità dati.

Per spiegare il paradosso devo fare alcune premesse, cose che magari molti ignorano o non prendono in considerazione, ma che sono però fattori determinanti. Potresti anche scoprire qualcosa di interessante.

La risoluzione
Il fattore più importante è la corsa della risoluzione degli schermi nei dispositivi: tra i primi (o forse più famosi) a implementare uno schermo ad altissima risoluzione è stato l’iPhone con il suo Retina display, con una risoluzione di 326 PPI, una densità di punti anche più alta di una stampa di qualità. Tra la concorrenza, invece, Samsung con il Galaxy S5 ha addirittura uno schermo con 432 PPI di risoluzione... incredibile, non è vero?
Purtroppo queste risoluzioni servono quasi esclusivamente per il marketing, dato che l’occhio umano non è in grado di distinguere più di 11 linee per millimetro a 25 cm, circa 280 PPI (DPI). Questo vuol dire che se il tuo smartphone ha 300 PPI o 1.000 PPI, non potrai accorgerti della differenza. Questo non ti vieta comunque di vantarti con gli amici.
Negli schermi desktop, invece, (nella grande maggioranza dei casi) la risoluzione è di 96 PPI: in questi schermi la risoluzione può essere tranquillamente molto più bassa dei 280 PPI, semplicemente perché vengono guardati da almeno 50 cm e non da 25 cm, e quindi avere un'altissima risoluzione in questo caso sarebbe ancora più inutile.

Questa differenza di risoluzione crea un problema. Per fare un esempio pratico, se una fotografia di 300×200 pixel, inserita all’interno di una pagina di un sito, viene visualizzata in un schermo desktop ci apparirà ben nitida, se invece la stessa pagina del sito, con la stessa immagine, viene visualizzata in un schermo da 300 PPI (o più) questa ci apparirà molto meno nitida. L’effetto è dovuto al fatto che la stessa quantità di pixel (300×200) viene distribuita su una “riproduzione” più densa.

Per ovviare a questo inconveniente i siti devono caricare le immagini almeno al doppio della risoluzione, quindi la nostra immagine di 300×200 pixel che si vede bene su un desktop, per essere vista bene anche sullo smartphone deve essere caricata a 600×400, mantenendo però la sua grandezza "originale" e riducendo quella "visiva" del 50%: in altre parole si comprime un'immagine di una grandezza doppia sullo spazio di una “normale”, in modo da ottenere una maggiore densità di pixel. Spesso un'immagine al doppio della risoluzione non raddoppia il suo peso in Kb, bensì lo triplica! Visto che la maggior parte del peso di una pagina è determinato dalle immagini, si capisce subito che la quantità di dati da scaricare sarà maggiore.

Velocità di connessione
Negli ultimi anni l’evoluzione della rete telefonica ha fatto grandi passi, tanto che oggi possiamo assaggiare le prime reti di quarta generazione, con velocità (teoriche) di trasmissione dati impensabili fino a poco tempo fa. Teoriche, appunto. Se guardiamo la realtà, le cose sono diverse. Chiunque abbia uno smartphone sa bene che la rete ha un'infinità di variabili: copertura dell’operatore, condizioni meteorologiche, disturbi di altre fonti elettromagnetiche, disturbi da ostacoli fisici (un edificio che blocca la rete oppure l’essere all’interno dell'edificio stesso). Quante volte ti sei spostato in una stanza dove la rete prendeva meglio? Anche la quantità/concentrazione di dispositivi in una stessa zona riduce notevolmente la velocità di trasmissione... prova a guardare in streaming un video in HD allo stadio durante una partita…
Al momento la connessione via radio non è paragonabile alla connessione via cavo, anche nella migliore condizione del 4G non arriverebbe a competere con la migliore condizione del cavo, tipo la fibra ottica. Le differenze vanno da 40 volte a 1.000 volte in più a favore del cavo.

Limite di dati
Le offerte disponibili tra gli operatori (almeno in Italia) sono ridicole, davvero troppo scarse, soprattutto se si utilizza lo smartphone nel "modello" proposto nelle pubblicità. Si va nell’ordine di uno o qualche Giga al mese, alcune hanno anche dei massimi settimanali che non possono essere superati. Altre vendono la connessione come illimitata (la chiamano “Unlimited”... sarcastici?), per cui la connessione non viene mai bloccata, ma al superamento di una certa soglia, la banda viene ridotta a 32Kbits/s... questo però vuol dire nella pratica bloccarla. Non sto esagerando, per fare un esempio: la pagina di ricerca di Google, quella semplice e minimale pagina che apri per cercare qualcosa, pesa grosso modo 433 Kb, per cui con la velocità di 32 Kbits/s l’apriresti in 108 secondi (433Kb / (32Kbits / 8bit) = 108s). Sì forse esagero, non sei bloccato, basta solo avere molto tempo libero!

Alimentazione
Sarò breve in questo paragrafo. Quanto ti dura la batteria dello smartphone quando lo usi in modo intensivo? Mezza giornata, una giornata, poco… di certo queste non sono unità di misura, ma si sa benissimo quanta poca disponibilità energetica abbiano questi dispositivi.

I limiti tecnici citati qui sopra, si sommano al fattore “progettazione sito”.
Da qualche tempo è esplosa la moda del sito “responsive”: in sostanza il front-end del sito si adatta alla grandezza o risoluzione del dispositivo (desktop, tablet, smartphone). Sulla carta questo comportamento è fantastico, in una unica entità del sito avrei diverse versione dello stesso, non devo nemmeno reindirizzare l’utente. Più comodo di così non esiste!
Definisco “moda” perché lo vogliono tutti, sembra essere la panacea per tutti i mali, ma non è così.

La (non) progettazione front-end
Come parlavo in un altro articolo, molto spesso i siti vengono fatti con l’installazione di famosi CMS. A questi CMS vengono accoppiati dei “template”, che sono moduli che hanno il compito di creare la struttura delle pagine del sito, il cosiddetto “front-end”. Questi template non vengono fatti sulla base dei contenuti che si vuole inserire nelle pagine, bensì vengono fatti sulla base di un risultato grafico. Chi sviluppa un template non lo fa sulla base di una specifica necessità di contenuti, lo fa su un obiettivo estetico, che è anche il motivo principale per cui un template viene scelto.
Nei template vengono spesso utilizzate delle librerie Javascript, che hanno diversi compiti: creare effetti grafici, effetti di funzionamento, caricamento contenuti. In alcuni casi hanno anche il compito di “normalizzare” il layout della pagina, in pratica: allineano, ridimensionano e modificano gli elementi della pagina, fanno in modo che il risultato grafico sia quello richiesto.
Il problema in questo è che, per far funzionare tutte queste necessità grafiche, nelle pagine del sito vengono inclusi molti Javascript, ognuno con il proprio compito. Questo vuol dire un notevole carico di calcolo per il browser, quindi per il dispositivo.

Responsive
Questo termine si riferisce ad un layout di pagina che adatta il contenuto e la grafica a seconda della grandezza della pagina (principalmente in relazione alla larghezza). In sostanza permette di avere un sito con tutti i contenuti e funzionalità disponibili su uno schermo desktop, in pratica quello più grande, e man mano li riducendo (adattandoli) sui dispositivi più piccoli. Questo permette di avere più versioni del sito utilizzando un unico layout.
Il primo e piccolo problema è che un layout che deve adattarsi ad ogni dispositivo deve fare qualche piccolo compromesso. Per esempio, se in una pagina abbiamo un menù di navigazione, questo dovrà avere un funzionamento simile nelle varie versioni, certo potrà essere adattato per ottimizzare la sua usabilità ma non potrà funzionare in modo totalmente diverso, altrimenti sarebbe molto dispendiosa come soluzione.
Un altro problema è legato a cosa il sito deve caricare per ottenere questo adattamento. Nel metodo responsive il sito non si preoccupa di sapere di che tipo è il dispositivo che sta richiamando una pagina: ad ogni richiesta il sito invia una pagina con tutte le istruzioni di comportamento (grafiche e funzionali) per tutti i dispositivi, allo stesso modo. Vuol dire che un dispositivo desktop richiama la pagina, si scarica tutto quanto (pagina, immagini, javascript) e lo da in pasto al browser che dovrà lavorare le istruzioni e dare il risultato: questo per un computer desktop non è un gran problema, dato che ha la connessione buona, alimentazione elettrica e potenza di calcolo a sufficienza. Lo stesso quindi fa anche lo smartphone: richiama la pagina, si scarica tutto (comprese le istruzioni per il desktop o per i tablet), lo da in pasto al suo browser ed aspetta il suo risultato.

Il paradosso
Ora che conosciamo le caratteristiche principali dei dispositivi, cosa hanno a disposizione e cosa devono fare, possiamo fare una considerazione.
Un dispositivo con: limitata potenza di calcolo, limitata disponibilità energetica, limitata velocità di banda, limitata quantità di dati trasferibili.
Deve gestire: un layout molto spesso mal progettato, scaricare tutte le versioni del sito, elaborare la sua versione del sito (elaborare la propria versione con tutto il peso di molte librerie Javascript), scaricare tutte le immagini con dimensioni almeno il doppio della versione desktop (cioè un peso notevole = Mb del traffico disponibile).

Per me questo è un paradosso.

Si potrebbe porre rimedio a tutto questo?
Come punto principale, indirizzando ogni dispositivo alla sua versione dedicata, cioè il sito riconosce il dispositivo e restituisce una versione dedicata a quel dispositivo, in termini di contenuti, funzionalità e infine di grafica. Il dispositivo non avrà una versione adattata ma solo ciò che è stato pensato ed ottimizzato per lui.
Non usando i template, non tanto per il mezzo in sé, ma perché non sono fatti nè sulla base delle tue esigenze nè dei contenuti. Sono fatti su una base generica, e principalmente sono basati sulla grafica.

Parte del paradosso non potrà essere eliminato: l’altissima risoluzione dei dispositivi mobile impone il caricamento delle immagini ad alta risoluzione, che altrimenti si vedrebbero con un effetto sfocato.
Questo punto del paradosso si potrebbe applicare anche alle nuove televisioni UHD: se a 25cm non vediamo più di 11 linee per mm, chissà quante linee per mm riusciamo a vedere a 3 mt di distanza? No, non voglio fare calcoli anche per questo, meglio che vada al cinema... :-)

Photo