Con la diffusione delle tecniche responsive si è creato un certo "mood" intorno a tutte le pratiche responsive e al fatto che venissero testate solo su dispositivi Apple. I clienti e gli sviluppatori per molto tempo hanno dato per scontato che gli utenti con accesso alle pagine web da mobile fossero esclusivamente Apple addicted.
Questo ha portato al consolidarsi di una cattiva pratica verso una delle pratica responsive più importanti, ossia le media query. Si è distorta la realtà andando a semplificare l'utilizzo delle media query limitando i famosi "break-point" alla risoluzione e dimensioni schermo dei dispositivi Apple.
Molti siti sviluppati da zero e molti framework responsive hanno adottato questo standard che di solito prevede solo 4 punti sensibili in cui è possibile modificare la grafica via css.
Tutto questo non corrisponde alla realtà ed ora con il diffondersi in maniera massiccia dei dispositivi con a bordo Android il design di molte pagine web deve essere aggiornato.
Il problema è ben conosciuto ai designer e sviluppatori di applicazioni native e web application su smartphone e tablet.
Se nel mondo Apple abbiamo solo 3 o 4 dispositivi (Iphone5, Iphone4, Ipad e Ipad-mini) nel mondo Android è praticamente impossibile stabilire in anticipo la risoluzione e le dimensioni dello schermo.
I designer di applicazioni per Apple non ragionano in modo elastico (parlando di grafica), mentre su Android la flessibilità e fluidità della grafica deve essere un must visti i numerosi dispositivi con a bordo questo OS.
Questo si traduce in un diverso approccio al design responsive.
Non possiamo limitarci a considerare solo 3-4 css diversi, ma dobbiamo testare il nostro lavoro partendo da una risoluzione molto ampia (diciamo 27'') fino ad arrivare a risoluzioni minime (io di solito mi fermo a 240px di larghezza). Tutto quello che c'è in mezzo deve essere ben visibile e fruibile per ogni pixel diverso.
Se consideriamo i classici break-point ci limitiamo ad ottimizzare il design passando ad esempio da 1024px a 768px. Queste ad esempio sono 2 dimensioni sensibili su un classico Ipad. Ma cosa succede nelle dimensioni intermedie ad esempio a 956px?
La scelta più intelligente a mio avviso è quella di rendere fluido il proprio design andando a restringere il browser e controllare man-mano la consistenza di tutti gli elementi della pagina.
E' impossibile (e molto dispendioso) pensare di possedere 10-15 dispositivi diversi per poter testare le pagine.
Andando a testare il nostro design in modo "manuale" creeremo i nostri break-point e relativi css personalizzati. E' possibile che un titolo H1 in un design regge partendo da 2000px fino a 900px, mentre in un altro lavoro è necessario andare a scalare il font-size ogni 100px di larghezza.
Solo in questo modo avremo il controllo totale del nostro design e possiamo considerare il lavoro robusto e visibile sulla totalità dei dispositivi mobili, tablet e schermi pc/mac di piccole dimensioni.
E' ovvio che il browser non potrà sostituire il comportamento tipico dei dispositivi touch, ma questa è un'altra storia.
