Best Practice > Passo 2 - Modello > Come creare un Sito Web "Mobile-friendly" > Come creare le versioni Desktop e Mobile di un Sito Web

L'obiettivo di permettere ai Visitatori la miglior esperienza d'uso possibile durante la navigazione in un Sito Web, a prescindere dal dispositivo che stanno utilizzando, può essere raggiunto in modi alternativi. Una strada passa attraverso l'applicazione del Responsive Web Design, un criterio di progettazione che prevede che venga creato un unico Sito in grado di adattarsi automaticamente ai diversi dispositivi. Una strada alternativa prevede, invece, che vengano create versioni distinte dello stesso Sito, ciascuna pubbicata su una URL diversa e ottimizzata per la visualizzazione su un determinato dispositivo.

Rispetto al Responsive Web Design, la configurazione con URL separate permette di gestire progetti più semplici perchè pensati ad hoc per dispositivi specifici ma ha lo svantaggio che, in caso di aggiornamenti e modifiche, questi andranno ripetuti su tutti i Progetti.

Ipotizzando di voler creare una versione Desktop, una versione Tablet e una versione Smartphone di un Sito Web, è possibile utilizzare la Pagina di ingresso per impostare il reindirizzamento automatico in base alla risoluzione del Browser rilevata.

▪	Innanzi tutto, occorre creare il Sito corrispondente alla versione Desktop definendone struttura e contenuti.

▪	Al Passo 1 - Impostazioni del Sito \| Avanzate cliccare sul pulsante Pagina di ingresso e, nella finestra relativa, attivare l'opzione Attiva Pagina di Ingresso e selezionare l'opzione Rileva automaticamente la risoluzione.

▪	Attraverso i comandi disponibili, comporre l'Elenco dei breakpoint. Cliccare poi sul pulsante Aggiungi... per aggiungere, oltre a quelli impostati di default, un nuovo breakpoint e impostarne il valore a 480px.

In questo modo si hanno 3 breakpoint che configurano 3 diversi intervalli: il primo intervallo comprende tutte le risoluzioni superiori a quella del Modello attualmente selezionato; il secondo intervallo comprende le risoluzioni incluse tra quelle del brekpoint impostato manualmente e quella del Modello attualmente selezionato; il terzo intervallo, infine, comprende tutte le risoluzioni inferiori al breakpoint impostato manualmente.

Per la visualizzazione "Desktop", corrispondente al primo intervallo, viene automaticamente proposto il Progetto Corrente e non occorre fare più nulla. Per le altre visualizzazioni, invece, è necessario impostare il collegamento alle versioni del Sito più adeguate:

▪	Nell'Elenco dei breakpoint selezionare la "Visualizzazione 1" corrispondente al secondo intervallo e cliccare sul pulsante Modifica... per richiamare la finestra Impostazioni Breakpoint.

▪	Nel campo URL per questo Breakpoint specificare la URL del Sito preparato per la visualizzazione su Tablet: per esempio, http//www.miosito.it/tablet/, se si prevede di pubblicarlo nella sotto-cartella "tablet" della cartella principale su Server.

▪

Ripetere le stesse operazioni anche per la visualizzazione "Smartphone" corrispondente al terzo intervallo, collegandolo alla URL relativa: per esempio, http//www.miosito.it/smartphone/, se si prevede di pubblicare la versione Smartphone del Sito nella sotto-cartella "smartphone" della cartella principale su Server.

A questo punto il Sito è predisposto per il reindirizzamento in base alla risoluzione del dispositivo rilevata ma mancano ancora i Siti relativi alle versioni Tablet e Smartphone.

▪

Per procedere più rapidamente alla creazione del Sito per la versione Tablet, creare una copia del Sito Desktop: nella finestra iniziale Scelta del Progetto selezionare il Progetto del Sito Desktop e cliccare sul pulsante Duplica. Cliccare poi sul pulsante Rinomina per modificare adeguatamente il nome del nuovo Progetto.

▪	Aprire la copia del Progetto e procedere apportando tutte le modifiche al Modello e ai contenuti che si reputano opportune.

▪	Al Passo 1 - Impostazioni del Sito \| Avanzate, accedere alla finestra Pagina di ingresso e disattivare l'opzione Attiva Pagina di Ingresso.

▪	Terminato il Progetto della versione Tablet del Sito, ripetere la stessa procedura per predisporre anche il Progetto della versione Smartphone.

Per la pubblicazione su Server dei Siti realizzati occorre procedere nel seguente modo:

▪

Pubblicazione della versione Desktop del Sito: la versione Desktop del Sito è quella a cui è associata la Pagina di ingresso. Procedendo alla pubblicazione verrà creato un file index.html, corrispondente alla Pagina di ingresso, e salvato nella cartella di pubblicazione. Per rispettare le URL impostate per le altre versioni dei Siti, occorre creare su Server le sottocartelle previste: "tablet" e "smartphone".

Portato a termine questo passaggio, la versione Desktop del Sito sarà online e nella Pagina di ingresso sarà attivo il codice che rileva la risoluzione del Browser e imposta di conseguenza il reindirizzamento alle altre versioni del Sito.

▪	Pubblicazione della versione Tablet del Sito: perché il reindirizzamento presente nella Pagina di ingresso alla versione Tablet del Sito funzioni, pubblicare il Progetto nella sotto-cartella "tablet" creata.

▪	Pubblicazione della versione Smartphone del Sito: analogamente, perché il reindirizzamento presente nella Pagina di ingresso alla versione Smartphone del Sito funzioni, pubblicare il Progetto nella sotto-cartella "smartphone" creata.

Google ammette espressamente la configurazione con URL separate per versioni Desktop e Mobile dello stesso Sito ma si raccomanda di utilizzare alcune annotazioni per permettere ai suoi algoritmi di interpretarle correttamente. Nello specifico Google richiede che:

▪	Nella Pagina per Desktop venga aggiunto il tag link rel="alternate" che indirizza alla URL per dispositivi mobili corrispondente.

▪	Nella Pagina per Mobile venga aggiunto il tag link rel="canonical" che indirizza alla URL per Desktop corrispondente.

Questo tipo di annotazione indica agli algoritmi di Google che le due URL hanno contenuti equivalenti e che dovrebbero essere considerate come un'unica entità anzichè come due entità distinte. Questo punto è molto importante dal momento che se le versioni Desktop e Mobile della Pagina sono considerate come due entità distinte, nei risultati di ricerca vengono visualizzate sia la URL desktop sia la URL per dispositivi mobili. In questo caso, inoltre, per entrambe le Pagine il ranking potrebbe calare a causa di una possibile penalizzazione dovuta alla presenza di contenuti duplicati.

Nell'impostare queste annotazioni occorre poi fare attenzione a:

▪	mantenere un rapporto di 1:1 tra le Pagine per Desktop e le corrispondenti Pagine per Mobile. In particolare, bisogna evitare di inserire annotazioni in tante Pagine Desktop che si riferiscono a una stessa Pagina Mobile (o viceversa).

▪	impostare i rendirizzamente solo fra Pagine realmente correlate.

Lavorando con WebSite X5, il modo più semplice per procedere è creare il Sito per la versione Mobile come una copia esatta del Sito per la versione Desktop: in questo modo, infatti, entrambi i Siti hanno esattamente le stesse Pagine (file con lo stesso nome) ed è semplice impostare una corrispondenza 1:1 fra loro.

Riprendendo l'esempio precedente e ipotizzando, quindi, di dover inserire le annotazioni richieste da Google per gestire le versioni Desktop, Tablet e Smartphone di un Sito Web, occorre:

▪	Aprire il progetto del Sito per la versione Desktop e al Passo 1 - Impostazioni del Sito \| Avanzate, accedere alla finestra Statistiche, SEO e Codice e aprire la sezione Esperto.

▪	Nel campo Codice personalizzato selezionare l'opzione Prima della chiusura del tag HEAD e scrivere le seguenti annotazioni:

Dopo aver salvato le modifiche effettuate, si può procedere a lavorare sul Sito relativo alla versione Tablet:

▪	Aprire il Progetto del Sito per la versione Tablet e, come per l'altro Progetto, andare al Passo 1 - Impostazioni del Sito \| Avanzate, accedere alla finestra Statistiche, SEO e Codice e aprire la sezione Esperto.

▪	Nel campo Codice personalizzato selezionare l'opzione Prima della chiusura del tag HEAD e scrivere la seguente annotazione:

▪	Ripetere le operazioni effettuate per il Sito per Tablet anche per il Sito per Smartphone: l'annotazione da inserire rimane invariata.

Per meglio comprendere il funzionamento del processo appena descritto, si consideri che:

▪	Impostando le annotazioni attraverso la finestra Statistiche, SEO e Codice, queste vengono automaticamente inserite nel codice di tutte le Pagine dei Siti.

▪	Nelle annotazioni, come valore dell'attributo href deve essere inserita la URL della Pagina su cui si sta lavorando: utilizzando la stringa [CURPAGE] il nome del file relativo alla Pagina viene identificato e inserito in automatico dal Programma.

▪	Nelle Pagine della versione Desktop del Sito occorre utilizzare il tag link rel="alternate" per dichiarare tutte le alternative disponibili: nel caso specifico è stato ripetuto 2 volte in modo da collegare sia la versione per Tablet che la versione per Smartphone.

▪

Nell'annotazione del tag link rel="alternate" è necessario dichiarare anche quando, al posto della versione Desktop, deve essere proposta la versione Smartphone o la versione Tablet di un Sito. Nel codice di esempio riportato, le stringhe di media query definiscono che per risoluzioni inferiori a 480px Google deve proporre la URL della versione Smartphone mentre per risoluzioni comprese tra 481px e 1024px deve deve proporre quella della versione Tablet del Sito.

Nel caso in cui i Siti delle versioni Desktop, Tablet e Smartphone non contengano esattamente le stesse Pagine e/o contengano Pagine fra loro corrispondenti ma con nomi diversi, è necessario intervenire manualmente sul codice di ogni singola Pagina per inserire correttamente le annotazioni necessarie.

▪	Aprire il progetto del Sito per la versione Desktop. Al Passo 3 - Mappa selezionare la Pagina su cui si vuole lavorare e cliccare sul pulsante Proprietà.

▪	Nella finestra Proprietà Pagina aprire la sezione Esperto e posizionarsi nel campo Codice personalizzato.

▪	Selezionare l'opzione Prima della chiusura del tag HEAD e scrivere le seguenti annotazioni:

Dove http//www.miosito.it/smartphone/page-1.html e http//www.miosito.it/tablet/page-1.html sono le URL delle Pagine del Sito rispettivamente della versione Mobile e della versione Tablet corrispondenti a quella del Sito della versione Desktop a cui si sta lavorando.

▪	Ripetere l'ultimo passaggio per tutte le Pagine del Sito in modo da inserire in ognuna di esse le annotazioni con le URL delle Pagine per Smartphone e per Tablet corrispondenti.

Un lavoro analogo deve essere fatto per le Pagine del Sito della versione Smartphone e della versione Tablet. In questi casi l'annotazione da inserire è:

Dove http//www.miosito.it/desktop/page-1.html è la URL della Pagina del Sito della versione Desktop corrispondente a quella del Sito della versione Smartphone o della versione Tablet a cui si sta lavorando.

Best practice:

-	Come creare un Sito Web "Mobile-friendly"