Foldable phones & Web design

Il 2019 è iniziato con alcune importanti novità nel settore smartphone, magari sperimentali, magari non per tutti, magari modaiole, ma sicuramente particolari. Quantomeno si può riconoscere ai produttori questa volta lo sforzo creativo di aver osato nell’innovazione. Era da un po’ di tempo che sotto questo aspetto non si vedeva qualcosa di davvero diverso.

Non sappiamo ancora se questi smartphone diventeranno popolari come i MiniDisc o se invece prenderanno piede davvero e stravolgeranno universalmente il concetto di form factor che abbiamo in testa ormai da 15 anni (ad oggi li vedo ancora un po’ “grezzi” nel design, al di là di tutto), nè se alla lunga si scoprirà che questi display godano o meno di particolare longevità, ma staremo a vedere…

Lascio volentieri recensioni, anteprime, unboxing, flames e haters compresi alle community che già da molto tempo si accollano questo onere, mi voglio per un attimo concentrare solo sul fatto che in quanto dispositivi dotati di browser anche loro saranno ovviamente in grado di navigare il web.

Da qualche tempo vedo diversi meme che accostano l’immagine di uno di questi pieghevoli a quelle di poveri disgraziati nelle più drammatiche condizioni di disagio e sconforto, con un bel testo a chiudere il tutto che di solita recita più o meno così: ”Quando un web designer si ricorda dell’esistenza degli smartphone pieghevoli”, più o meno contratto, più o meno in tutte le lingue.

Come molti sapranno (per gli altri qui un approfondimento a riguardo) quando si disegnano pagine web in particolar modo per dispositivi mobile non si può considerare la reale risoluzione del dispositivo ma quella che il dispositivo concede al browser.

In due parole, nonostante il mio telefono abbia un display con larghezza di ad esempio 1000 px, il browser ne raggruppa alcuni e crea righe larghe solamente 350/400, a seconda del produttore.

Questo per un fattore di leggibilità secondo le specifiche del W3C, ma è tutto spiegato meglio nel precedente link.

E quindi che succede?

Succede che questi dispositivi pieghevoli, che quando aperti hanno un numero di punti in larghezza sostanzialmente doppio rispetto a quando sono chiusi, raddoppieranno anche la larghezza in px che il browser potrà considerare.

Riguardo il come tutto ciò impatterà sul design delle pagine web le ipotesi sono diverse, perchè diversi sono i modi in cui si può progettare un’interfaccia, sempre ricordando che se questi dispositivi non dovessero prendere piede probabilmente il rapporto costi/benefici di un eventuale intervento di re-design/”patching” potrebbe non essere vantaggioso (per i benefici si intende, i commerciali invece possono già iniziare a sfregarsi le mani).

Adaptive Design

Per i progetti che definiscono lato server quale versione di applicazione fornire in base a marca e modello del dispositivo (o più correttamente del suo user agent) i designer dovranno scegliere tra:

• decidere che quel dispositivo rientri come gli altri nella cerchia dei “normali” dispositivi mobili, e quindi si otterrà una versione semplicemente “stirata” in larghezza, che in molti casi potrebbe comunque andare bene;
• ri-disegnare l’interfaccia secondo il diverso form factor, molto più simile ad un tablet portrait che ad uno smartphone, gestendo gli ingombri e rivedendo il wireframe in maniera dedicata, a causa della larghezza doppia e dell’altezza che invece non è variata per nulla.

Responsive Design - No Bootstrap

Per chi definisce media queries personalizzate non ci è dato sapere quali saranno le conseguenze. Solo il designer stesso lo sa e solo lui sa se ora sta piangendo disperato anche senza meme oppure no.

Responsive Design - Bootstrap 3

Chi utilizza Bootstrap 3 (e precedenti se ben ricordo) come framework di design bisogna ricordare che lo “stacco” tra tablet portrait e smartphone avviene sotto la soglia dei 768 px. Questo significa che se il browser del pieghevole, da aperto, disporrà di:

• < 768 px il layout mostrato sarà lo stesso di quando è chiuso, e quindi avremo anche qui una versione semplicemente allargata dei contenuti;
• > 768 px il layout mostrato sarà quello del tablet portrait, e quindi probabilmente nella maggioranza dei casi sparirebbe il menu mobile (tipicamente apribile agendo su hamburger icon) a fronte di una versione ristretta del un menu di navigazione desktop. Qui potremmo vederne delle belle, poichè un tablet portrait ed un pieghevole aperto non sono per forza esattamente uguali in larghezza nè si usano alla stessa distanza, ma nonostante questo condividerebbero lo stesso layout.

Responsive Design - Bootstrap 4

Chi utilizza la versione 4 di Bootstrap sa che la griglia ora è diversa. I dispositivi con larghezza di viewport compresa tra 0 a 767 px non vengono più considerati tutti uguali, ma si distinguono gli extra small (da 0 a 575 px) dagli small (da 576 a 767 px). Rispetto alla versione precedente ora abbiamo quindi 2 layout differenti per i dispositivi mobili anzichè uno. Questo potrebbe giocare a favore come no. Se il dispositivo, da aperto, mostra una viewport di:

• < 768 px e se il layout small è stato pensato comunque come layout mobile (con hamburger icon e dimensionamento testi da mobile e non da tablet) allora potrebbe anche non essere necessario alcun intervento;
• < 768 px e se il layout small non è stato pensato come layout mobile siamo nella condizione probabilmente peggiore perchè va sicuramente rivista l’interfaccia, ma per essere onesti, sarebbe anche stata una scelta progettuale poco felice: a mio avviso tra 576 e 767 px non si può pensare di disegnare un layout che sia calzante più su un tablet che su uno smartphone, è una larghezza ancora troppo piccola
• > 768 px siamo nella stessa condizione dei progetti con Bootstrap 3: entra in gioco il layout tablet e questo potrebbe non garantire la migliore esperienza utente.

Se come il progetto Motorola si trattasse di un aumento di lunghezza, e non di larghezza, non ci sarebbero problemi, anzi, si otterrebbe una maggior panoramica della pagina (che spesso su smartphone è il punto debole): più righe di testo, più immagini instagram, più prodotti in un e-commerce, tutto in un’unica schermata senza dover scrollare, cosa che con tutti quei banner in sovraimpressione che stanno spesso a coprire le aree alte e basse della viewport sarebbe davvero comodo.

Ad ogni modo credo che, senza per forza dilagare nella psicosi in stile GDPR o fatturazione elettronica, si possa attendere e vedere cosa deciderà il mercato riguardo questi nuovi dispositivi, cosa i produttori decideranno in termini di relazione tra pixel reali e CSS pixel (quelli visti dal browser) e di conseguenza valutare i costi necessari per un eventuale adeguamento.

Un adeguamento che potrebbe peraltro concedere un certo agio nell’effort, variabile in funzione di quanto si vorrà ottimizzare l’usabilità, nelle nuove regole del gioco.

Nel frattempo non mi fascerei troppo la testa: le cose - soprattutto quando così nuove e così diverse (“disruptive” ormai l’abbiamo bannato in azienda dal 31/12/2018 quindi non si può più dire) - potrebbero subire cambiamenti molto profondi e molto veloci, ma magari la prossima volta che disegnerete una pagina penserete un attimo a come potrebbe apparire su un display praticamente quadrato e largo una spanna. Se vi servisse l’ispirazione prendete pure in mano una mattonella del bagno :-)