Mobilegeddon? Nessun problema con Responsive Bartik su Drupal 7.x

Pubblicato da Nicola Rainiero il 28-04-2015

Nella scorsa settimana sono usciti moltissimi articoli sul nuovo algoritmo di Google che dal 21 aprile incentiva il posizionamento dei siti "mobile-friendly", uniti ad una eccessiva isteria conosciuta come Mobilegeddon. Non capisco dove sia il problema: un sito responsive è il miglior compromesso perché si adatta a qualsiasi tipo di schermo e oggi è abbastanza facile da implementare (gran parte dei siti si sono già edeguati da tempo). Vi mostro un confronto video tra il tema Bartik standard e l'equivalente responsive del mio sito realizzato con Drupal 7.x ed alcuni suggerimenti.

Tutti questi post e i relativi commenti mi hanno trasmesso una certa apprensione, in più rileggendo una vecchia email di Google Ad-Sense prontamente cestinata, ho scoperto che l'11% del traffico del mio sito proviene da utenti di dispositivi mobili... Mi è venuta l'ansia! Così terrorizzato dall'idea di dover perdere tutti questi navigatori perché non più indirizzati al mio sito, ho fatto immediatamente il test mobile friendly e questo è il risultato:

  • The analysis phase

    La fase di analisi

  • The result

    Il verdetto

Scherzi a parte, sono già due anni scarsi che ho adottato un layout dinamico e reattivo e penso che un sito responsive sia una soluzione perfetta per coprire gran parte dei dispositivi presenti sul mercato: dallo smartphone al tablet, dal portatile al grande monitor. Sono passati i tempi in cui si doveva progettare un sito prendendo come riferimento solo determinate risoluzioni grafiche a scapito di tutte le altre, oggi poi con HTML5 e soprattutto con CSS3 ci sono meno restrizioni ed è più facile creare schemi flessibili. Più sotto ho messo in evidenza il comportamento del mio sito al variare di determinati intervalli di risoluzione1:

Mobilegeddon? No problem with Responsive Bartik on Drupal 7.x

Con questo non voglio dire che la progettazione risponsiva sia facile ma a mio avviso ne vale la pena perché rende i propri siti disponibili a una grande fetta di utenti e se si usa una piattaforma software di content Management System (CMS) come per esempio Drupal, Worpress o Joomla, probabilmente si possono trovare diversi temi responsive e alle volte li si possono adattare ai propri gusti con il minimo sforzo. In poche parole non si deve reinventare la ruota, perché potrebbe essere poco efficiente e facile, ma usarne una già bella e pronta.

Nel mio caso su Drupal 7.x ho iniziato con Bartik, un tema standard e l'unico che sono riuscito a digerire e modificare facilmente. Successivamente ho scoperto il progetto Responsive Bartik D7 e sono passato ad esso. La struttura rimane più o meno la stessa ed è stato più agevole migrare dal primo al secondo che imparare il primo.

Citando il sito del progetto, è derivato dalla versione per Drupal 8 e in aggiunta questa include anche le seguenti caratteristiche:

  • markup HTML5;
  • WAI-ARIA accessibility roles added to primary elements;
  • Html5shiv, Respond.js, Selectivizr.js per le versioni 7 e 8 di Internet Explorer;
  • Menu comprimibile su schermi di dimensioni ridotte.

Nel seguente video si può constatare la coesistenza di molteplici visualizzazioni senza sacrificare mai il contenuto ma adattandolo opportunamente.

Se si vuole approfondire l'argomento consiglio questo articolo: Responsive web design: Key tips and approaches, dove l'autore descrive gli approcci usati quando si progetta per differenti device, quali risoluzioni si dovrebbero prendere in considerazione e come funziona il RWD dal punto di vista del designer.

Da profano ho seguito questi approcci:

  • Un abuso di media query: filtri intuitivi applicabili agli stili CSS che aiutano a modificarli in base alle caratteristiche del dispositivo che esegue il rendering di contenuti, come ad esempio tipo, larghezza, altezza, orientamento e risoluzione del display.
  • La griglia fluida: quando gli elementi della pagina vengono dimensionati a seconda della percentuale e il numero delle colonne cambia a seconda dei limiti di larghezza.
  • elementi float.
  • 1. L'ho ottenuto usando gli Open Developer Tools di Google Chrome (basta premere il tasto "F12") e si clicca sul bottone per attivare la modalità device del menu sottostante (la seconda icona sulla sinistra), per maggiori informazioni consiglio di leggere la pagina Device Mode & Mobile Emulation.



Potrebbero interessarti anche:

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.