Con la crescente diffusione dei dispositivi mobile e il loro sempre più frequente utilizzo per accedere ad Internet, prima di procedere alla realizzazione di un nuovo Sito Web occorre considerare il pubblico al quale ci si rivolge e decidere consapevolmente se progettarlo in modo che sia ottimizzato solo per la visualizzazione su Desktop, piuttosto che per la navigazione su qualsiasi tipo di dispositivo. Un Sito Web in cui layout e contenuti sono in grado di adattarsi alle dimensioni del dispositivo sul quale viene visualizzato, sia esso desktop, tablet o smartphone, viene definito responsive.
|
Pur rappresentando la soluzione consigliata, non è obbligatorio rendere un Sito responsive. In base al Progetto potrebbe, per esempio, essere più conveniente optare per la realizzazione di una doppia versione desktop/mobile del Sito. Potrebbero esserci circostanze, poi, in cui è sufficiente l'ottimizzazione base garantita da WebSite X5 che sfrutta la capacità dei Browser di zoomare le Pagine per permetterne la visualizzazione sui dispositivi mobili. Per maggiori informazioni, vedere Come creare un Sito Web "Mobile-Friendly" |
In questa sezione è, dunque, possibile definire che tipo di Sito si vuole realizzare scegliendo tra:
| ▪ | Sito Desktop: il Sito sarà ottimizzato per la visualizzazione a Desktop. Questo significa che il Sito verrà visualizzato su dispositivi mobile nello stesso modo in cui viene visualizzato su Desktop: layout e contenuti non verranno modificati in base alla risoluzione ma semplicemente zoomati via Browser. |
| ▪ | Sito Responsive: il Sito sarà ottimizzato per la visualizzazione su qualsiasi tipo di dispositivo, dal Desktop allo smartphone, in modo da permette la miglior esperienza d'uso possibile agli Utenti, a prescindere dal dispositivo che utilizzano per la navigazione. |
Nel caso si scelga di realizzare un Sito Desktop, occorre definire la:
| ▪ | Risoluzione del Sito: riporta il valore espresso in pixel per la larghezza delle Pagine del Sito. Il valore impostato di default varia a seconda del Modello scelto ma, in qualsiasi caso, è liberamente modificabile. |
|
Il valore della Risoluzione del Sito impostato di default è calcolato per ottenere un Sito ottimizzato per una visualizzazione a 1024x768 pixel. |
Nel caso, invece, si scelga di realizzare un Sito Responsive, occorre definire i 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 maggior chiarezza, nella finestra viene visualizzato uno schema che mette in scala le principali tipologie di dispositivi.
Sulla linea delle Risoluzioni di Riferimento vengono riportati i breakpoint che corrispodono alle risoluzioni generalmente utilizzate per ciascun dispositivo:
| ▪ | Desktop: 960 px |
| ▪ | Tablet con orientamento landscape: 720px |
| ▪ | Tablet con orientamento portrait: 600px |
| ▪ | Smartphone con orientamento landscape: 480px |
| ▪ | Smartphone con orientamento portrait: inferiore a 480px |
Subito sotto viene visualizzata, invece, la linea delle Risoluzioni Impostate che di default, all'apertura di un nuovo Progetto, propone 3 breakpoint che possiamo identificare come segue:
| ▪ | Desktop: definisce le dimensioni oltre le quali il Sito viene sempre visualizzato nella modalità desktop. |
| ▪ | Intermedio: è un breakpoint che serve per permettere un passaggio più fluido dalla visualizzazione desktop a quella mobile. |
| ▪ | Smartphone: definisce le dimensioni minime al di sotto delle quali il Sito viene visualizzato completamente linearizzato. |
Di default, le risoluzioni associate a questi 3 breakpoint vengono riprese in automatico in base al Modello attualmente selezionato.
Sulla linea delle Risoluzioni Impostate i segmenti delimitati da due breakpoint, corrispondenti all'intervallo di valori per cui è prevista una determinata visualizzazione, assumono colori diversi. Per maggior chiarezza gli stessi colori vengono ripresi anche nelle icone presenti nella Tabella disponibile nella finestra Impostazioni Responsive e sulla Responsive Bar disponibile nella finestra Struttura del Modello e nel Browser utilizzato per la visualizzazione del Sito in Anteprima.
Oltre ad essere visualizzati sulla linea delle Risoluzioni Impostate, i breakpoint sono elencati in una tabella che riporta le seguenti voci:
| ▪ | Breakpoint: in questa colonna vengono elencati tutti i breakpoint attivati per il Progetto. Ogni breakpoint è identificato dal valore della risoluzione a cui scatta. |
| ▪ | Visualizzazioni: in questa colonna vengono riportate tutte le Visualizzazioni determinate dai breakpoint. Ogni Visualizzazione è affiancata dall'icona di un pallino, ciascuno colorato in modo diverso: lo stesso colore è ripreso sulla linea delle Risoluzioni Impostate per il segmento corrispondente all'intervallo a cui si applica la Visualizzazione stessa. Per maggior chiarezza gli stessi colori vengono ripresi anche nelle icone presenti nella Tabella della finestra Impostazioni Responsive e sulla Responsive Bar disponibile nella finestra Struttura del Modello e nel Browser utilizzato per la visualizzazione del Sito in Anteprima. |
| ▪ | Intervalli: in questa colonna vengono specificati gli intervalli determinati da due breakpoint consecutivi per i quali verranno proposte le relative Visualizzazioni. Per la Visualizzazione Desktop l'intervallo non è compreso tra due breakpoint ma genericamente definito come superiore al breakpoint più alto. |
Per agire sulla lista dei breakpoint suggeriti, e sulle Visualizzazioni da questi determinate, è sufficiente utilizzare i comandi presenti a fianco della tabella:
| ▪ |  Aggiungi: aggiunge un nuovo breakpoint specificando la risoluzione alla quale deve scattare. È possibile impostare fino a un massimo di 10 breakpoint complessivi. |
| ▪ | Modifica...: consente di modificare il valore della risoluzione del breakpoint selezionato. |
| ▪ | Rimuovi: elimina il breakpoint selezionato. Mentre il breakpoint Smartphone non può essere eliminato, il breakpoint Desktop può essere selezionato e rimosso ma, così facendo, il breakpoint successivo diventa automaticamente il nuovo breakpoint Desktop. Eliminando un breakpoint, tutte le impostazioni ad esso associate (impostate attraverso la finestra Impostazioni Responsive) vengono applicate al breakpoint inferiore. Al minimo devono essere presenti almeno 2 breakpoint, quello Desktop e quello Smartphone. |
|
Non è possibile stabilire a priori quanti breakpoint è opportuno attivare: l’importante è impostare i breakpoint in modo da identificare delle macrocategorie che coprano tutte le casistiche e permettano di garantire un'esperienza d'uso soddisfacente su qualsiasi dispositivo. |
In questo modo, prendendo ad esempio un Sito a cui è stato applicato un Modello largo 960px, i 3 breakpoint impostati di default determinano 4 intervalli, corrispondenti a 4 diverse modalità di visualizzazione:
| ▪ | Breakpoint: 960px - Visualizzazione: Desktop - Intervallo: Maggiore o uguale a 960px |
Per risoluzioni superiori a quelle di questo breakpoint il Sito viene visualizzato in modalità desktop: questo significa che viene utilizzato il Modello impostato per la Visualizzazione desktop (definito attraverso la finestra Struttura del Modello) e che i contenuti sono disposti in base a come le Pagine sono state costruite al Passo 4 - Pagine.
| ▪ | Breakpoint: 720px - Visualizzazione: Visualizzazione 1 - Intervallo: Compreso tra 959px e 720px |
Per risoluzioni comprese tra il breakpoint Desktop e il breakpoint Intermedio, il Modello si presenta in base a quanto definito per questa Visualizzazione nella finestra Struttura del Modello. Nello specifico, la larghezza del Contenuto della Pagina è impostata a 720px ma, dato che la finestra del Browser può essere allargata fino a 959px, lo spazio eccedente i 720px viene occupato dallo Sfondo della Pagina. Gli Oggetti delle Pagine, invece, sono disposti come nell'intervallo precedente, corrispondente alla visualizzazione Desktop.
Nell'edizione Pro questo breakpoint può essere modificato o rimosso e, a differenza di quanto accade nell'edizione Evo, gli Oggetti delle Pagine vengono disposti in base a quanto impostato per questa Visualizzazione nella finestra Impostazioni Responsive.
| ▪ | Breakpoint: 480px - Visualizzazione: Visualizzazione 2 - Intervallo: Compreso tra 719px e 480px |
Per risoluzioni comprese tra il breakpoint Intermedio e il breakpoint Smartphone, il Sito è linearizzato: questo significa che tutti gli Oggetti vengono visualizzati uno sotto l'altro (rispettando l'ordinamento e la scelta degli Oggetti da rendere non visibili fatta nella finestra Impostazioni Responsive). Come per quello precedente, anche per questo intervallo il Modello si presenta in base a quanto impostato per questa Visualizzazione nella finestra Struttura del Modello: la larghezza del Contenuto della Pagina è fissata a 480px mentre la finestra del Browser può raggiungere 719px venendo occupata dallo Sfondo della Pagina.
Nell'edizione Pro questo breakpoint può essere non solo modificato ma anche rimosso e, a differenza di quanto accade nell'edizione Evo, gli Oggetti delle Pagine non vengono linearizzati ma disposti in base a quanto impostato per questa Visualizzazione nella finestra Impostazioni Responsive.
| ▪ | Breakpoint: 0px - Visualizzazione: Smartphone - Intervallo: Minore di 479px |
In questo intervallo il Sito viene visualizzato linearizzato. Il Modello si presenta in base a quanto impostato per questa Visualizzazione nella finestra Struttura del Modello e la larghezza della Pagina non è impostata in maniera assoluta ma in maniera relativa in modo da occupare sempre il 100% dello spazio disponibile. Nel Sito linearizzato tutti gli Oggetti vengono visualizzati uno sotto l'altro (rispettando l'ordinamento e la scelta degli Oggetti da rendere non visibili fatta nella finestra Impostazioni Responsive) e sono anch'essi impostati in modo da occupare il 100% dello spazio in larghezza.
Anche nell'edizione Pro questo breakpoint viene visualizzato per completezza ma non può essere né modificato né eliminato.
|
Se si apre con l'edizione Pro un Progetto realizzato con l'edizione Evo per il quale era stato abilitato il Sito Responsive, vengono automaticamente ripresi tutti i breakpoint impostati. Lavorando con la versione Pro è poi possibile attivare nuovi breakpoint e/o modificare quelli già presenti. |
|
Quando si avvia un nuovo Progetto, il programma imposta un Modello predefinito scelto a caso: questo Modello viene mantenuto fino a quando non si effettua la scelta del Modello da utilizzare. |
Best practice:
