Come creare un Sito Web Responsive

Best Practice > Passo 2 - Modello > Come creare un Sito Web "Mobile-friendly"  >

Come creare un Sito Web Responsive

Previous pageReturn to chapter overviewNext page
Mostra/Nascondi testo nascosto 

Un Sito Web Responsive è un Sito in cui il layout e i contenuti si adattano al comportamento e all’ambiente dell’Utente in base a fattori come la dimensione dello schermo, la piattaforma e l’orientamento del dispositivo. Questo significa che quando per esempio l’Utente passa dal suo PC desktop ad un tablet o ad uno smartphone, il Sito Responsive si adatta automaticamente alla nuova risoluzione continuando a permettere una fruizione dei contenuti e modalità di interazione ottimali.

Il principio alla base del Responsive Design, dunque, è che non occorre creare versioni diverse di uno stesso Sito Web: ogni Sito Web deve, piuttosto, sapersi adattare rispetto alla crescente varietà di dispositivi con i quali verrà fruito.

Per ottenere questo risultato, il Responsive Web Design fa ricorso ad un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS. Al di là dei mezzi tecnici adottati, per arrivare a realizzare un Sito Web Responsive è però importante comprendere appieno quali sono gli obiettivi che questo tipo di progettazione si pone e come questi obiettivi influiscono sul modo di organizzare e gestire i contenuti.

Avendo il fine di permettere un'esperienza utente positiva nei più diversi contesti d'uso, il Responsive Web Design si prefigge obiettivi come:

adattare il layout al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop);
adattare le dimensioni delle immagini (e in genere di tutti i contenuti a larghezza fissa) alla risoluzione e alle dimensioni dello schermo;
semplificare il layout degli elementi presenti sulla Pagina per i dispositivi mobili con schermi piccoli;
nascondere gli elementi non essenziali su questi stessi dispositivi;
fornire un’interfaccia adatta all’interazione touch per i device che la supportano.

Tenendo ben presente questi obiettivi minimi e il fine ultimo di garantire la miglior esperienza d'uso possibile a prescindere dal device utilizzato, con WebSite X5 è possibile realizzare Siti Web Responsive contando sul fatto che il programma semplifica la gestione dei contenuti e risolve completamente la parte di creazione del codice sottostante le pagine.

Clicca per espandere/ridurreHow To: Come impostare i breakpoint

Uno dei primi punti da risolvere nella progettazione di un Sito Web Responsive è quello relativo ai breakpoint.

Un breakpoint è un punto, sulla linea ideale che esprime la risoluzione dei possibili dispositivi su cui potrà essere visualizzato un Sito, in cui si verifica una qualche modifica al layout della Pagina.

Per meglio comprendere il meccanismo, si consideri l'immagine di esempio che rappresenta schematicamente il comportamente di un Sito per il quale sono stati impostati 3 breakpoint: a 960px, a 720px e a 480px.

Con 3 breakpoint si determinano 4 diverse tipologie di visualizzazioni. Per risoluzioni inferiori a 480px, il Sito ha lo sfondo blu. Quando la finestra del Browser raggiunge la dimensione di 480px in larghezza, lo sfondo diventa verde e rimane di questo colore fino a quando la larghezza non supera i 720px: a questo punto lo sfondo diventa giallo. Infine, a 960px c’è un altro breakpoint e da quel punto in poi lo sfondo è rosso.

Ma quanti breakpoint è opportuno o necessario creare? Non è possibile dare una risposta definitiva a questa domanda: molto dipende dalle caratteristiche del Sito, dal suo layout, dal pubblico a cui si rivolge, ecc. Si potrebbe rispondere che occorre creare tanti breakpoint quanti ne servono perché una Pagina si adatti al meglio ai dispositivi su cui viene visualizzata.

La pratica prevalente tende a fissare i breakpoint sulla base delle dimensioni dello schermo delle principali tipologie di dispositivi. Riprendendo questa prassi, WebSite X5 riporta sulla linea delle Risoluzioni di Riferimento i seguenti breakpoint:

960px: Desktop
720px: Tablet con orientamento landscape
600px: Tablet con orientamento portrait
480px: Smartphone con orientamento landscape
Inferiore a 480px: Smartphone con orientamento portrait

L’obiettivo da raggiungere è impostare i breakpoint in modo da identificare delle macrocategorie: i dispositivi sono talmente tanti, infatti, che è impossibile cercare di fissare un breakpoint per ciascuno di essi. Con l'edizione Evo di WebSite X5 si gestiscono 3 breakpoint; l'edizione Pro, invece, permette di impostare fino a 10 breakpoint, inclusi quelli legati alle Visualizzazioni Desktop e Smartphone.

Fatti i dovuti ragionamenti sui breakpoint da attivare, in WebSite X5 per procedere nella creazione di un Sito Web Responsive occorre:

Al Passo 2 nella finestra Risoluzioni e Responsive Design attivare l'opzione Sito Responsive.
Sempre nella finestra Risoluzioni e Responsive Design, definire la lista dei breakpoint da attivare per il Sito utilizzando gli appositi comandi.

Nell'impostare i breakpoint occorre considerare che:

Di default tutti i breakpoint vengono impostati secondo valori ripresi dal Modello grafico scelto per il Progetto.
Tutti i breakpoint, ad eccezione di quello Smartphone che riprende automaticamente il valore del breakpoint superiore,  possono essere liberamente modificati attraveso l'apposito pulsante Modifica....
Nell'edizione Evo non è possibile né eliminare i breakpoint presenti né aggiungerne di nuovi.
Nell'edizione Pro non è possibile eliminare il breakpoint Smartphone ma è invece possibile decidere di eliminare (tramite il pulsante Rimuovi) i breakpoint intermedi. Il brekpoint Desktop può essere selezionato e rimosso ma, automaticamente, il breakpoint successivo viene assunto come nuovo breakpoint Desktop. Al minimo devono essere presenti almeno 2 breakpoint, quello Smartphone e quello Desktop.
Nell'edizione Pro è possibile aggiungere (tramite il pulsante Aggiungi) nuovi breakpoint fino a un massimo di 10, inclusi i breakpoint Desktop e Smarphone.
Il breakpoint Smartphone definisce la risoluzione minima al di sotto della quale il Sito viene sempre visualizzato linearizzato: tutti gli Oggetti vengono visualizzati uno sotto l'altro (rispettando l'ordinamento e la scelta degli Oggetti da rendere non visibili fatti nella finestra Impostazioni Responsive) e, come la larghezza di Pagina, sono impostati in modo da occupare il 100% dello spazio disponibile in larghezza.

Tutti i breakpoint impostati sono elencati nella Tabella riassuntiva e verranno ripresi nelle finestra Impostazioni Responsive.

Mentre con l'edizione Evo viene richiesto di fissare solo il breakpoint Smartphone, nell'edizione Pro è possibile impostare fino a 10 breakpoint, inclusi quello Desktop e quello Smartphone. Aprendo con l'edizione Pro un progetto realizzato con l'edizione Evo, viene ripreso il breakpoint Smartphone e si ha la possibilità di aggiungerne altri nuovi.

Clicca per espandere/ridurreHow To: Come impostare il Modello

Se si riflette su come un Sito viene visualizzato su dispositivi diversi, è facile rendersi conto che anche il Modello grafico deve subire delle modifiche per potersi presentare sempre al meglio. Mano a mano che la risoluzione dei dispositivi diminuisce, infatti, alcuni elementi del Modello potrebbero non avere più lo spazio sufficiente per essere visualizzati e, in funzione della loro importanza, potrebbe essere opportuno rimuoverli.

In WebSite X5 è possibile lavorare sul Modello in modo da definire come deve cambiare nelle diverse Visualizzazioni determinate dai breakpoint attivati.

Dopo aver scelto se utilizzare un Template Predefinito, un Modello Personale o un Template Vuoto, accedere alla finestra Risoluzioni e Responsive Design, scegliere di creare un Sito Responsive e attivare tutti i breakpoint che si desidera gestire.
Sempre al Passo 2, accedere alla finestra Struttura del Modello.
Utilizzare la Responsive Bar per selezionare la visualizzazione Desktop e utilizzare le opzioni disponibili per definire come il Modello deve apparire in questa Visualizzazione e, dunque, nell'intervallo di risoluzioni corrispondente.
La Responsive Bar ripropone tutte gli Intervalli identificati impostando i breakpoint nella finestra Risoluzioni e Responsive Design. Definito il Modello per la Visualizzazione Desktop, selezionare sulla Responsive Bar l'intervallo successivo e apportare le modifiche necessarie al Modello.
Procedere in maniera analoga andando a selezionare, uno dopo l'altro, tutti gli Intervalli presenti sulla Responsive Bar e modificando di conseguenza il Modello.

Dopo aver definito la struttura del Modello è ancora possibile andare a personalizzare l'Header e il Footer: anche queste sezioni possono presentare delle variazioni in base alla risoluzione a cui viene visualizzato il Sito.

Al Passo 2 accedera alla sezione Contenuto del Modello. Anche in questa finestra, dal momento che si sta lavorando alla creazione di un Sito responsive, è disponibile la Responsive Bar.
Sulla Responsive Bar selezionare l'intervallo corrispondente alla Visualizzazione Desktop e comporre l'Header/Footer del Modello.
Sempre sulla Responsive Bar, selezionare uno dopo l'altro gli intervalli successivi e apportare le modifiche necessarie su Header/Footer.

In particolare, per ogni Visualizzazione è possibile:

Aggiungere nuovi Oggetti. Inserendo un Oggetto, questo sarà visibile nella Visualizzazione corrente e in quelle inferiori, ma non in quelle superiori (dove sarà automaticamente nascosto).
Nascondere degli Oggetti. Selezionato un Oggetto è sufficiente cliccare sul pulsante Mostra/Nascondi Oggetto e decidere se deve essere nascosto solo nella Visualizzazione corrente o in tutte le Visualizzazioni inferiori.
Visualizzare nuovamente degli Oggetti che erano stati precedentemente nascosti. Cliccare sul triangolino presente sul pulsante Mostra/Nascondi Oggetto per accede al menu: cliccare sulla voce Gestione Oggetti nascosti. Nella finestra richiamata selezionare dall'elenco l'Oggetto su cui si intende lavorare e attivare l'opzione Visibile.
Modificare la posizione e/o le dimensioni degli Oggetti. Le altre proprietà degli Oggetti rimangono le stesse in tutte le diverse Visualizzazioni.

Se a una determinata Visualizzazione uno o più Oggetti risultano posizionati in modo da non risultare più completamente visibili, questi vengono automaticamente riposizionati. In questo riposizionamento gli Oggetti vengono spostati ma non ridimensionati: può dunque accadere che gli Oggetti si sovrappongano. Per questo è consigliabile verificare sempre attraverso l'Anteprima come Header e Footer si comportano ai diversi breakpoint.

Parlando di Template è necessario precisare che tutti i Template predefiniti inclusi in WebSite X5 sono ottimizzati per permettere la realizzazione di un Sito responsive: questo significa che per ogni Template è già stato pre-impostato un certo set di breakpoint che diventa attivo nel momento in cui si seleziona l'opzione Sito Responsive nella finestra Risoluzione e Responsive Design. Ovviamente questo set di breakpoint preimpostato di default nel Template potrà poi essere liberamente modificato in base alle proprie esigenze.

Dal momento che le impostazioni relative al comportamento responive del Template sono salvate nel file del Template e non nel file di Progetto, accade che se si cambia il Modello scegliendone uno diverso dalla lista di quelli predefiniti, viene visualizzata una finestra che chiede di definire come deve essere gestito il passaggio fra il Modello attualmente impostato e il nuovo Modello selezionato.

In pratica, questa finestra avverte che procedendo gli stili verranno sovrascritti e chiede di scegliere se:

i breakpoint del Modello in corso devono essere mantenuti o sostituiti con quelli del Modello selezionato;
come contenuti dell'Header e del Footer devono essere mantenuti solo gli Oggetti impostati nel Modello in corso, solo gli Oggetti impostati nel Modello selezionato, gli Oggetti impostati sia nel Modello in corso che nel Modello selezionato.
Clicca per espandere/ridurreHow To: Come gestire i contenuti

Nel Responsive Web Design, qualunque sia il livello di complessità del Sito che si vuole realizzare, è fondamentale sviluppare una buona strategia per la gestione dei contenuti, domandandosi non solo quali contenuti devono esserci ma anche come devono essere presentati:

Quali contenuti devono essere inseriti in una Pagina?
Devono essere mantenuti gli stessi contenuti sia per il mobile che per il desktop?
In caso contrario, quali contenuti devono essere eliminati per il mobile?
In che ordine è opportuno collocare i contenuti?
Ecc…

Una buona strategia è fare una lista di tutti i contenuti che devono essere presenti in una Pagina e ordinarli da quelli più importanti a quelli meno importanti: in questo modo è più semplice identificare i contenuti essenziali, quelli che devono rimanere disponibili sempre, e i contenuti accessori che invece possono essere nascosti quando, a risoluzioni più basse, occorre presentare solo quello che serve realmente. Ovviamente questa operazione di ordinamento deve essere ripetuta per ogni Pagina del Sito.

Per meglio comprendere questo meccanismo, l'esempio classico è quello del Sito Web di un ristorante. Quando il Sito viene visualizzato su desktop si può puntare molto su immagini e animazioni che mettono in mostra le diverse portate del menu per interessare e ingolosire gli Utenti. Quando però lo stesso Sito viene fruito da mobile si può presumere che l'Utente sia più interessato a leggere le recensioni o a trovare le informazioni di contatto piuttosto che a visualizzare immagini di grandi dimensioni. Diventa quindi necessario risparmiare sulle immagini per assecondare le esigenze di un utente che opera con un dispositivo meno capace (schermo piccolo, banda non necessariamente larga, ecc.) e che in mobilità ha bisogno di informazioni veloci e puntuali.

In WebSite X5, una volta creata la Pagina così come deve essere visualizzata su desktop (vedere, Come impostare una Pagina attraverso la Griglia di impaginazione), è possibile impostare quali modifiche deve subire in funzione dei diversi breakpoint attivati. Nello specifico, occorre procedere come segue:

Al Passo 4 - Pagine creare la Pagina trascinando nella Griglia di impaginazione gli Oggetti necessari e procedendo all'inserimento dei diversi contenuti. La Pagina così creata è quella che verrà visualizzata per risoluzioni superiori al breakpoint Desktop.
Terminata la composizione della Pagina, clicare sul pulsante Responsive per richiamare la finestra Impostazioni Responsive. In questa finestra è presente la Responsive Bar che ripropone tutte le Visualizzazioni determinate dai breakpoint attivati per il Sito (attraverso la finestra Risoluzioni e Responsive Design). Si deve procedere in ordine, incominciando con il selezionare sulla Responsive Bar la Visualizzazione Desktop, passando poi a selezionare tutte le altre fino alla Visualizzazione Smartphone.
Selezionata la Visualizzazione Desktop, nella Griglia viene riproposta la configurazione impostata nella finestra Creazione della Pagina. Cliccare sul pulsante Ordinamento per attivare la modalità in cui è possibile procedere all'ordinamento degli Oggetti inseriti nella Griglia. Su ogni Oggetto inserito in Griglia viene visualizzato un numero assegnato in base all'ordinamento effettuato in automatico dal programma.
Modificare l'ordinamento degli Oggetti in base all'importanza che hanno i diversi contenuti e a come si desidera che vengano disposti nella Pagina. Per procedere all'ordinamento è possibile seguire diverse strade:
Impostando Ordinamento | Ordina tutti gli Oggetti dall'inizio, si deve iniziare cliccando sull'Oggetto che si vuole posizionare per primo e poi procedere cliccando in ordine su tutti gli altri Oggetti.
Impostando Ordinamento | Prosegui l'ordinamento da un Oggetto, si deve cliccare sull'Oggetto da cui si vuole proseguire nell'ordinamento. Tutti gli Oggetti precedenti vengono confermati mentre su tutti gli Oggetti successivi occorre cliccare per definirne la posizione nell'ordinamento.

La procedura di ordinamento termina:

Quando si giunge a cliccare sull'ultimo Oggetto presente nella Pagina.
Cliccando su Ordinamento | Completa ordinamento: termina la procedura confermando l'ordinamento corrente.
Cliccando su Ordinamento | Annulla ordinamento: termina la procedura annullando le modifiche effettuate e ripristinando l'ordinamento iniziale.

WebSite X5 guida nella procedura di ordinamento: selezionato un Oggetto, vengono evidenziati con un bordo rosso tutti gli Oggetti sui quali è possibile cliccare per stabilire quello che deve seguire. L'ordinamento impostato per la Visualizzazione Desktop verrà mantenuto anche per tutte le altre Visualizzazioni.

Per maggiori informazioni, vedere Come funziona il processo di ordinamento degli Oggetti.

Cliccare sul pulsante Mostra/Nascondi Oggetto per avviare la modalità in cui è possibile impostare gli Oggetti come invisibili. Cliccare sugli Oggetti che, a risoluzioni inferiori a quella attualmente selezionata, non dovranno più essere visualizzati. Cliccare una seconda volta sul pulsante Mostra/Nascondi Oggetto per confermare e uscire da questa modalità.
Cliccare sul pulsante Interruzione di Riga per avviare la modalità in cui è possibile agire sull'allineamento degli Oggetti forzando alcuni di questi ad andare "a capo", disponendosi su una nuova riga, a risoluzioni inferiori a quella della Visualizzazione Desktop (attualmente selezionata). In tutti i punti in cui è possibile inserire un'Interruzione di Riga compare un tratteggio grigio: cliccare sui tratteggi per impostare le Interruzioni di Riga desiderate. Cliccare una seconda volta sul pulsante Interruzione di Riga per confermare e uscire da questa modalità.

Per maggiori informazioni, vedere Come e perchè impostare le Interruzioni di Riga.

Lavorando con l'edizione Pro è possibile che siano stati impostati fino a 10 breakpoint complessivi. Se sono presenti delle Visualizzazioni intermedie, utilizzare la Responsive Bar per selezionare la Visualizzazione successiva a quella Desktop. La Griglia viene aggiornata in base a quanto impostato per la Visualizzazione Desktop: su questa nuova configurazione procedere impostando, se necessario, altri Oggetti come non visibili e inserendo altre interruzioni di riga. Ripetere questi passaggi per tutte le Visualizzazioni successive.
Giunti alla Visualizzazione Smartphone non occorre fare più nulla dal momento che tutti gli Oggetti rimasti come visibili vengono semplicemente linearizzati, ovvero posizionati uno sotto l'altro, in base all'ordinamento impostato inizialmente.

Come si evince da quanto illustrato, la Griglia riporta la struttura che la Pagina assume nell'intervallo di risoluzioni identificato dalla Visualizzazione selezionata. Tutte le modifiche che vengono impostate andranno, invece, a deteminare la struttura che la Pagina assumerà per l'intervallo di risoluzioni associato alla Visualizzazione immediatamente successiva.

Quando si crea una nuova Pagina all'interno di un Sito che si vuole rendere Responsive è consigliabile fare in modo che nella Griglia di impaginazione non ci siano Celle vuote. Il programma, infatti, tratta le Celle vuote come se fossero degli Oggetti (vuoti) e assegna a ognuno di essi una posizione nell'ordinamento: queste posizioni non potranno essere modificate ma influiranno sulle possibilità di ordinamento degli Oggetti reali. Per mantenere il maggior grado di libertà nell'ordinare gli Oggetti è meglio, dunque, evitare di avere Celle vuote inserendo piuttosto degli Oggetti vuoti: se inseriti manualmente, questi Oggetti vuoti non influiranno sulla composizione della Pagina e potranno essere ordinati manualmente.

<%%EXTOGGLE>How To: Come verificare il funzionamento di un Sito responsive nell'Anteprima locale

Per verificare il corretto funzionamento di un Sito Responsive prima di procedere alla sua pubblicazione online, è sufficiente richiamare l'Anteprima in locale che offre gli strumenti necessari per simulare il comportamento delle Pagine alle diverse risoluzioni.

Al Passo 4 - Pagine, dopo aver creato la Pagina e impostato tutto quanto è necessario per renderla responsive, cliccare sul pulsante Anteprima per visualizzare tramite il Browser interno un'Anteprima in locale della Pagina stessa.
Il Browser interno presenta una Barra delle risoluzioni su cui sono riportati tutti i breakpoint attivati per il Progetto. È sufficiente cliccare sull'indicatore di un breakpoint per ridimensionare in automatico la finestra del Browser alla risoluzione corrispondente e verificare la resa della Pagina. In alternativa è comunque possibile agire manualmente sulla finestra del Browser per modificarne la larghezza e verificare come cambia il layout e la disposizione degli Oggetti.
Se nell'Anteprima i contenuti non sono disposti nel modo atteso, cliccare sul pulsante Mostra numerazione: i contenuti della Pagina vengono riquadrati e su ciascuno di essi viene visualizzato un numero. Questo numero è quello associato all'Oggetto corrispondente al contenuto durante la procedura di ordinamento. In questo modo è più semplice comprendere cosa è necessario modificare per ottenere il risultato desiderato.

Si consiglia di verificare attraverso l'Anteprima in locale tutte le Pagine a tutti i breakpoint attivati in modo da avere la certezza che il Sito Web funzionerà correttamente nel momento in cui verrà pubblicato online e verrà visualizzato su dispositivi diversi.

 


Best practice:

-

Come creare un Sito Web "Mobile-friendly"

-

Come funziona il processo di ordinamento degli Oggetti

-

Come e perchè impostare le Interruzioni di riga