In questa guida cercheremo di affrontare in modo semplice i principali aspetti relativi alla creazione di un sito per dispositivi mobile ponendo particolare attenzione a tutto ciò che riguarda il responsive design e a come poter operare in Passweb per realizzare e gestire un sito responsivo.

Considerata l’enorme diffusione dei dispositivi mobile e la tendenza sempre maggiore, come evidenziato dalle più recenti statistiche, a navigare in internet utilizzando questo tipo di dispositivi, la realizzazione di un sito mobile friendly non è più un’opzione o una scelta, come poteva essere in passato, ma è diventata una vera e propria necessità, anche e soprattutto in relazione alla linee guida dettate da Google stesso in materia di SEO e di indicizzazione.

Sotto questo punto di vista Passweb offre due diversi approcci alla realizzazione di un sito ottimizzato per dispositivi mobile lasciando quindi all’utente la possibilità di scegliere quale strada seguire per soddisfare questo tipo di esigenza:

• Sito Mobile: realizzare un sito mobile significa creare un sito parallelo esplicitamente pensato per i dispositivi mobile tendo conto di tutte le limitazioni intrinseche di questi dispositivi anche in relazione alla connessione che spesso utilizzano

In Passweb questo può essere fatto utilizzando le Varianti Mobile e la libreria di Componenti sviluppati ad hoc per questa particolare tipologia di dispositivi.

• Sito Responsivo: realizzare un sito responsivo significa creare un unico sito con un unico layout in grado di adattarsi automaticamente alle diverse risoluzioni del dispositivo su cui viene visualizzato rendendolo quindi comodo da navigare indipendentemente dal fatto di utilizzare un pc, un tablet e/o uno smartphone.

Un sito responsivo sfrutta le cosiddette Media Query, introdotte dalle specifiche CSS 3, grazie alle quali poter “addomesticare” il sito in modo che si adatti automaticamente al dispositivo in uso, cambiando le dimensioni e le caratteristiche degli elementi di ogni pagina fino a farli, se necessario, completamente sparire.

In Passweb questo può essere realizzato sfruttando le funzionalità avanzate dei Layout che permettono l’importazione di apposite librerie CSS e/o la scrittura di codice CSS, e conseguentemente di Media Query personalizzate

 

Quale dei due approcci sia il migliore è una delle domanda che ha animato il mondo web con discussioni confronti e riflessioni senza però trovare una risposta definitiva.

Entrambi i modi di operare presentano infatti dei vantaggi e degli svantaggi piuttosto evidenti sia in termini generali che, nello specifico, per quel che riguarda la loro implementazione all’interno di Passweb.

 

SITO MOBILE – PRO

• Semplicità di realizzazione: considerando che in Passweb è disponibile una libreria di componenti sviluppati ad hoc per le Varianti Mobile, la realizzazione di siti mobile non richiede particolari conoscenze tecniche essendo la metodologia di lavoro esattamente la stessa di quella adottata per la realizzazione del sito in versione desktop
• Esperienza utente: i Componenti Mobile disponibili in Passweb hanno un’ usabilità pensata appositamente per questo tipo di dispositivi e consentono quindi di ottenere, senza particolari accorgimenti, un’ usabilità del sito e di un esperienza utente piuttosto elevata
• Sito distinto dalla versione desktop ma che risponde allo stesso url: il fatto di creare un sito parallelo, permette di inserire all’interno delle varie pagine elementi diversi rispetto a quelli presenti nella corrispondente versione desktop limitando quindi i contenuti a quelli strettamente necessari ottimizzando così le prestazioni del sito.

Inoltre la Variante Mobile risponde sempre allo stesso url cui risponde la Variante Standard del sito. La visualizzazione della versione mobile piuttosto che della versione desktop è gestita, in Passweb, interamente lato server sulla base del dispositivo che richiede la pagina web e della risoluzione (in larghezza) di questo stesso dispositivo, evitando così problemi di indicizzazione dovuti alla suddivisione della reputazione di una stessa pagina web su due url differenti.

 

SITO MOBILE – CONTRO

• Manutenzione: avere due diversi siti, uno per la visualizzazione su desktop, ed uno per la visualizzazione su smartphone, significa raddoppiare i tempi di realizzazione del sito oltre, ovviamente agli sforzi di gestione dei contenuti, di web marketing, di SEO ecc…

 

SITO RESPONSIVO – PRO

• Un unico sito web: contenuti semplici da amministrare perché non duplicati su due siti distinti
• Web Marketing e SEO più semplici: con un solo sito web gli sforzi si concentrano anziché dividersi (per poi moltiplicarsi)
• Stesso url: come per i siti mobile realizzati con Passweb, a maggior ragione per i siti responsivi non è necessario alcun redirect per dirottare gli utenti mobile sul sito a loro dedicato

 

SITO RESPONSIVO – CONTRO

• Un unico sito web: il fatto di avere un unico sito è sicuramente un punto a favore del responsive design ma, volendo, può essere considerato anche un punto a sfavore. In queste condizioni infatti l’utente non ha la possibilità di scegliere se visualizzare il sito mobile oppure quello desktop per accedere, eventualmente, a tutte le funzionalità da esso fornite
• Complessità tecnica: il responsive design fa uso delle media query e necessita quindi, per poter essere correttamente realizzato e mantenuto, di solide conoscenze in materia di CSS ( e spesso anche a livello javascript)

 

Come detto, all’interno di questa guida prenderemo in considerazione l’approccio responsivo rimandando alla manualistica on line di Passweb per maggiori informazioni relativamente alla realizzazione di un sito mobile ad hoc mediante l’utilizzo delle Varianti Mobile e della relativa componentistica Passweb (http://www.edupass.it/manuali/manualistica-passweb/siti-ecommerce/manuale-prodotto?a=manuale-passweb-ecommerce/live-editing/varianti-sito)

 

ATENZIONE! per utenti che hanno una buona conoscenza di Passweb ma non dispongono di conoscenze avanzate a livello CSS e javascript è consigliabile realizzare un sito in versione mobile utilizzando la relativa componentistica Passweb

 

Di seguito passeremo ad analizzare alcuni concetti di base che fungono da prerequisito indispensabile per poter realizzare correttamente un sito responsivo.

Verrà poi analizzato, in termini generali, un particolare framework css (uikit.css) che facilità notevolmente la creazione e la gestione di questa particolare tipologia di siti.

Infine vedremo come poter applicare ed utilizzare questo stesso framework per realizzare un sito Passweb responsivo.