Con l’avvento dei tablet e soprattutto degli smartphone si rende sempre più necessario rendere i siti web fruibili anche da quegli utenti che usano queste piattaforme e che in genere permettono la navigazione dei siti web “tradizionali”, ma costringono l’utente a zoomare e “scrollare” il sito orizzontalmente o verticalmente per poterne vedere tutti i contenuti.
Realizzare un sito web per il mobile, significa rendere i contenuti adattabili automaticamente alla risoluzione degli schermi degli smartphone o tablet in modo da permettere la corretta visione dei testi senza dover effettuare zoom e lavorando con lo scroll verticale per semplificarne la visione.
Per creare un sito web mobile si può intervenire in due modi:
Il primo caso può essere utile se si vuole realizzare un sito web in versione mobile con contenuti differenti da quello tradizionale, o se il tradizionale ha contenuti in Adobe Flash, o più semplicemente perché il cliente non vuole reinvestire su quello tradizionale per motivi prettamente economici.
Il secondo caso, un unico sito adattabile, è quello su cui volevo soffermarmi per parlare delle soluzioni che attualmente sto adottando.
Ho iniziato ad utilizzare il framework CSSGRID che consiste nell’uso di una griglia che può essere composta da un massimo di 12 colonne realizzata in HTML5 e l’uso delle media query con i CSS3 per diversificare gli stili grafici in base alle risoluzioni dei monitor o dei dispositivi mobili. Il sito realizzato con cssgrid ha una dimensione massima in larghezza di 1140 pixel che si adatta per display con risoluzioni inferiori poiché lavora sempre con div che hanno la larghezza definita in percentuale. Per risoluzioni inferiori ai 768 pixel il sito e le colonne create si vanno a posizionare una sotto l’altra creando una navigazione verticale e permettendo la personalizzazione grafica utilizzando appunto le istruzioni media query per diversificare il CSS.
In certi casi può non essere sufficiente l’uso del cssgrid perché può essere necessario produrre contenuti comunque differenti anche in fase di creazione della pagina, quindi lato server. Per questo tendo ad abbinare il cssgrid alla classe PHP Mobile_Detect che permette di effettuare, con delle semplici chiamate ad alcuni metodi, il controllo del dispositivo utilizzato e quindi la diversificazione lato server del codice prodotto.
Recentemente ho applicato queste soluzioni per i seguenti siti:
www.diatechpharmacogenetics.com
www.labline.it
subissati.it
www.simonevolpini.info/fblog/