Il responsive web design, in quanto idea, nasce molti anni fa e la sua prima implementazione, seppur in bozza, è del 2012 ed è opera del W3C, il consorzio per le tecnologie Web.

Inutile dire che l’entusiasmo intorno al responsive design -compreso il mio- era davvero grande! Venivamo tutti da anni di Internet Explorer, dove applicare i primi CSS2 era davvero un delirio 🙂 e ci limitavamo a fare le cose supportate all’epoca.

Iniziare a ragionare in termini di RWD, ci sembrava fantascienza e, allo stesso tempo, una figata pazzesca.

Io stesso sono sempre stato e sono tutt’ora un fan del W3C, sin da tempi non sospetti.

Partiamo quindi dalle basi, cioè che cosa è un sito responsive.

Cito Wikipedia:

Il design responsivo, o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone,cellulari, web tv), riducendo al minimo la necessità per l’utente di ridimensionamento e scorrimento dei contenuti.

Il design responsivo è un importante elemento dell’accessibilità, la quale tiene conto inoltre di numerosi altri fattori, incentrati non solo sui dispositivi ma anche sulle caratteristiche dell’utente (quali: capacità cognitive, vista, difficoltà fisiche, e così via).

Se prendo la definizione nuda e cruda così come ce la regala Wikipedia, mi trovi totalmente favorevole e d’accordo nell’usare il responsive design. Il problema è come viene implementato praticamente dal 100% dei tecnici che creano siti web.

Forse stai pensando che quello che sto dicendo è quantomeno discutibile. Del resto, come è possibile che tutto il mondo stia sbagliando ad implementare il responsive web design?

Ti invito a riflettere su una cosa: ti sei mai chiesto davvero se la tecnologia responsive, come viene intesa da praticamente tutto il mondo oggi, è la migliore in assoluto?

Probabilmente no e in questo articolo cerco di spiegarti il perché.

Come funziona il responsive

Pensi di sapere come funziona il responsive design. Invece tu sai come funziona l’attuale tecnologia definita come responsive, che va bene solo in parte.

Conoscendo le vere potenzialità del responsive web design, quello che attualmente conosci ed implementi, lo useresti solo in rari casi.

Il responsive design deve avere determinate caratteristiche:

  • deve adattarsi graficamente ai vari dispositivi in maniera automatica, senza sforzo da parte dell’utente
  • il sito deve essere facilmente fruibile sia su desktop che su mobile (tablet, smartphone e computer portatili/desktop)
  • l’utente non deve essere costretto a ridimensionare la finestra per poter fruire dei contenuti

Fin qui tutto ok, siamo tutti d’accordo. Ma come vengono implementate queste caratteristiche?

Lo strumento principe che viene utilizzato da tutti gli sviluppatori sono le media queries. Le media queries sono regole CSS che vengono applicate al nostro sito web solo se si verificano determinate condizioni. Le media queries vengono solitamente scritte in un file CSS, e vengono implementate delle condizioni che controllano le caratteristiche del dispositivo che sta visualizzando la pagina html.

Ci sono media queries particolarmente usate, in particolare voglio citare:

  • larghezza della finestra
  • orientamento del dispositivo (orientation landscape e portrait)
  • densità pixel

Ci sono anche molte altre condizioni che si possono utilizzare, come ad esempio aspect-ratio, resolution, ecc, ma il concetto è chiaro: ci sono condizioni entro le quali agire che permettono di ottenere modifiche al layout.

Facciamo un esempio

Se volessi scrivere del CSS che viene eseguito solo se la finestra è di 600 o meno pixel, dovrei scrivere:

[syntax type=”css”]

@media (max-width: 600px) {

.selettore { display: none; }

}

[/syntax]

Tutto bellissimo e ovviamente funziona. Ma cosa succede quando navigo il sito con un dispositivo che ha più di 600px di larghezza? Che la regola CSS viene caricata ugualmente dal browser.

Proprio come questa regola, anche tutte le altre comprese nel breakpoint, anche se visualizzate con schermi più larghi di 600px verranno caricate. Tutta zavorra inutile se guardo il sito da uno schermo superiore ai 600px, non trovi?

Il problema di questa tecnica quindi, presa “pura” così come viene usata oggi è che lo stesso contenuto viene utilizzato sia per il desktop che per i dispositivi mobile. Mobile o desktop first che sia, lo stesso contenuto per tutti i dispositivi non sarà mai ottimizzato al 100% in questo modo, perché il browser caricherà sempre tutti i CSS, non solo quelli che gli servono.

Quanto è efficace la tecnica standard secondo Google?

Non ho il tempo di rifare completamente un sito che è stat sviluppato con la tecnica “standard” -chiamiamola così, per non dire vecchia- con la mia tecnica. Perdonami dunque se sarò poco scientifico nell’illustrarti qualche esempio, ma è importante che tu capisca la teoria che c’è dietro e che tu possa comprendere questa tecnica così da fare le tue scelte future con maggiore consapevolezza.

Prendiamo uno dei siti web italiani che utilizza molto bene questa tecnica: gazzetta.

Questo sito web è stato sviluppato -a detta di molti- molto bene, vista anche la complessità. È stato sviluppato da una rinomata agenzia molto attenta alla User Experience, agenzia che tra l’altro stimo molto.

Il punteggio di Gazzetta di Google PageSpeed Insights

Sono stati impiegati mezzi considerevoli, molte persone del team e non dev’essere nemmeno costato poco (sia in termini di tempo che di investimento economico). Ma guarda un po’ che punteggio prende da google PageSpeed Insights:

Gazzetta - punteggio Google PageSpeed Insights Desktop

Gazzetta – punteggio Google PageSpeed Insights Desktop

La situazione della versione mobile migliora leggermente, ma non di molto:

Gazzetta - punteggio Google PageSpeed Insights Mobile

Il punteggio di Amazon di Google PageSpeed Insights

Amazon, nel momento in cui scrivo questo articolo, non possiede una homepage responsive. Quindi di fatto ha solo la versione desktop, il che rende Amazon in questa versione perfettamente adatto allo scopo didattico.

Indovina che cosa succede analizzando Amazon, che utilizza un template normale, non responsive?

Il codice si snellisce moltissimo, perché carica solo il CSS necessario ad impaginare il contenuto in versione desktop e il sito diventa molto leggero.

Google PageSpeed Insights Amazon.it

Il punteggio è molto più alto! Eppure Amazon è un sito molto complesso, ricco di funzionalità, HTML e CSS non mancano di certo.

Ma, nonostante questo, prende un punteggio migliore di Gazzetta. La differenza sostanziale è che non è responsive! (nel momento in cui scrivo solo un paio di sezioni del sito sono responsive, il resto è solo desktop anche guardandolo dallo smartphone).

Che cosa significa, quindi, che non dobbiamo più fare siti responsive se vogliamo fare siti leggeri?

Dobbiamo fare solo App Native?

Niente affatto. La tecnologia Smith, che funziona molto bene su Magento, permette di differenziare desktop da mobile. Puoi avere un tema dedicato per lo smartphone e uno dedicato per il desktop, caricando solo le risorse che ti servono.

Perché tutti usano il responsive design?

Molto semplice, quanto banale: il responsive web design è una tecnologia che si diffonde molto velocemente sulle piattaforme più utilizzate e, una delle più usate al mondo è WordPress. Tutti usano WordPress. Anche io, per scrivere questo blog, lo uso.

WordPress è una piattaforma estremamente diffusa, forse la più diffusa in assoluto.

WordPress però ha una tecnologia abbastanza scadente per certi versi. È relativamente facile da personalizzare e ha una difficoltà iniziale molto bassa. Questi motivi, tra le altre fantastiche caratteristiche, hanno fatto si che gli sviluppatori di tutto il globo si dedicassero anima e corpo a questa piattaforma.

Non esiste però una base così solida da permettere di usare la tecnologia Smith su WordPress con comodità. Forse con sostanziali modifiche a WordPress si può fare.

Quindi, invece di usare Smith -non temere, tra poco ti spiego cosa è Smith- è stato naturale usare il responsive design classico. Tutti oggi lo usano e questo è quanto. WordPress è uno dei motivi per cui il RWD si è diffuso così tanto.

Magento, invece, è si molto più complesso -infatti molte persone non ci provano nemmeno ad impararlo-, ma permette di fare molte più cose.

Anche altre piattaforme e linguaggi permettono di usare questa tecnologia, come ad esempio .NET di Microsoft. Proprio qualche mese fa rispetto al momento in cui scrivo, ho sviluppato il frontend versione desktop di caraffinity.it, startup del settore automotive.

La scelta condivisa in fase di progettazione, dopo aver parlato con Massimo, il CTO di Car Affinity, è stata quella di usare la tecnologia Smith, perché ci avrebbe dato notevoli vantaggi rispetto al responsive “classico”.

Su questo argomento, come case history, ho scritto un articolo dedicato per mostrare le caratteristiche di Smith su una piattaforma diversa da Magento, perché adattabile a qualunque framework di ultima generazione.

La soluzione è Smith

Fortunatamente esiste una tecnologia che esiste da qualche anno.

Questa tecnologia, è un mix tra responsive design classico -quindi media queries- e template dedicato, senza gli svantaggi di dover caricare file e risorse inutili. In più, da la possibilità di personalizzare ogni singolo elemento, fino anche all’html, che può essere ottimizzato per ogni dispositivo.

Questa tecnologia -a cui prima o poi bisognava dare un nome- l’ho chiamata Smith perché si basa sullo user agent per servire file diversi in base all’esigenza e perché l’Agente Smith di Matrix è uno dei miei personaggi cattivi preferiti 🙂

Il meccanismo di base di Smith è molto semplice e può essere cosi riassunto:

  • php legge lo user agent del browser visitatore
  • se la stringa che lo User Agent ritorna combacia con un certo pattern, quindi il sistema riconosce lo user agent come desktop, allora fornisce i file del tema desktop -parliamo sia di file PHP sia di file CSS e JavaScript
  • se riconosce lo smartphone, fornisce solo i file del tema dedicato allo smartphone
  • se riconosce un tablet, fa altrettanto, fornendo solo i file necessari al tablet
  • il sito, alleggerito di molto, viene quindi renderizzato e mostrato all’utente

Propongo la tecnologia Smith e cerco di spiegarla ovunque mi sia possibile.

In alcune delle aziende per cui ho lavorato, abbiamo discusso questa faccenda e l’abbiamo presa molto sul serio. Ci siamo chiesti se, per le nostre esigenze fosse davvero il responsive design la soluzione migliore e la risposta è stata NO.

Si poteva fornire un prodotto di qualità superiore.

Spesso Smith viene usato come strategia aziendale perché questo offre diversi vantaggi, i quali possono diventare anche tuoi vantaggi, se cominci ad usarlo.

I principali vantaggi di Smith

  1. Il sito è più leggero, questo piace a Google ed agli utenti
  2. Il sito è più performante, questo piace a Google ed agli utenti (se fai e-commerce sai benissimo quanto sia fondamentale questo aspetto)
  3. Se un tuo competitor vende il tuo stesso prodotto su un e-commerce Magento, a parità di hardware, il tuo sito è più veloce. Considerando che un utente abbandona la pagina dopo pochi secondi se questa non viene caricata velocemente, capisci quando è grande il valore delle performance nei siti e-commerce
  4. la User Experience è migliore: un tema dedicato che carica solo le risorse necessarie batte 10 a 0 un tema grafico responsive classico. Lo batte per fluidità, per leggerezza e perché puoi usare elementi HTML diversi e dedicati tra desktop e mobile, cosa che non puoi fare (se non appesantendo ulteriormente il sito) con il responsive design standard

Ci sono molte altre cose da dire, potrei parlarne per giorni, ma l’obiettivo di questo articolo è farti sapere che:

  1. non tutto è perduto, ci sono delle limitazioni nella tua attuale tecnica, ma puoi implementare questa tecnica con poco sforzo
  2. puoi avere un vantaggio competitivo sui tuoi concorrenti che ancora non usano Smith
  3. puoi fare un lavoro davvero eccellente

Questo articolo è introduttivo e serve a mostrarti che esiste una via alternativa all’attuale responsive.