Compatibilità:

WebSite X5 Evo e Pro

Quando si procede alla realizzazione di un Sito Web Responsive è importante stabilire per ogni Pagina una gerarchia dei contenuti in modo da poter identificare quali contenuti devono rimanere e come questi devono disporsi quando il Sito viene visualizzato a risoluzioni inferiori a quella desktop.


In WebSite X5 la definizione di come ciascuna Pagina deve cambiare in relazione ai breakpoint impostati viene effettuata nella finestra Impostazioni Responsive richiamata attraverso il pulsante  presente nella barra di strumenti della Griglia di impaginazione.


La finestra Impostazioni Responsive presenta una Responsive Bar con l'elenco dei breakpoint attivati e una Griglia che riproduce la configurazione di Pagina impostata per il breakpoint selezionato: la prima cosa che occorre fare è definire l'ordinamento degli Oggetti presenti.


Definire l'ordinamento degli Oggetti significa stabilire in quale ordine questi devono disporsi nel momento in cui la larghezza della finestra del Browser non è più sufficiente per permettere la loro visualizzazione in modalità desktop.


Nella Griglia ogni Oggetto inserito riporta l'icona associata al tipo di contenuto (Testo, Immagine, ecc.) e un numero che indica la posizione occupata nell'ordinamento.


In realtà gli Oggetti vengono ordinati in automatico dal programma ma questo ordinamento eseguito di default potrebbe non essere quello desiderato, pertanto è consigliabile verificarne la correttezza in base ai contenuti e, se necessario, intervenire modificandolo manualmente.


Per attivare la modalità di ordinamento degli Oggetti devi selezionare la Visualizzazione Desktop e cliccare sul pulsante  Ordinamento: gli Oggetti inseriti diventano semi-trasparenti e alcuni appaiono riquadrati in rosso ad indicare che possono essere selezionati.


#tip - L'obiettivo del processo di ordinamento è disporre tutti gli Oggetti presenti in una Pagina in modo da poter essere linearizzati nell'ordine corretto. Il programma valuta tutte le possibilità di ordinamento e, di volta in volta, evidenzia in rosso solo gli Oggetti che possono essere selezionati senza causare delle discontinuità nel processo di ordinamento che impedirebbero la corretta linearizzazione di tutti gli Oggetti.


A questo punto puoi iniziare cliccando su un Oggetto fra quelli riquadrati in rosso in modo da stabilire quale deve essere il primo Oggetto. Selezionato un Oggetto questo ridiventa completamente opaco e visualizza il numero assunto. Tutti gli altri Oggetti rimangono ancora semi-trasparenti e, se necessario, viene aggiornato il numero che riportano.


In base all'Oggetto su cui hai cliccato e a come tutti gli Oggetti sono inseriti nella Griglia di impaginazione, di volta in volta cambiano gli Oggetti riquadrati fra cui puoi scegliere per determinare quello che deve seguire nell'ordinamento.


Per meglio comprendere questo passaggio, considera l'immagine di esempio:


Immagine 1. Struttura di partenza


Con questa configurazione di Pagina, quando si avvia la modalità Ordinamento, il programma riquadra in rosso tutti gli Oggetti della prima riga perché è solo fra questi che è possibile scegliere quello che deve essere considerato il primo della lista.


Cliccando sull'Oggetto 1, la situazione sulla Griglia cambia come segue:


Immagine 2. Click su 1: scelta tra 2, 3 e 4


Come si vede, cliccando sull'Oggetto 1 si conferma la sua posizione e il programma chiede di scegliere il secondo fra gli Oggetti 2, 3 e 4.


Quello descritto è solo uno degli ordinamenti possibili: in base ai contenuti poteva essere più corretto impostare come primo Oggetto dell'ordinamento uno qualsiasi degli altri Oggetti presenti nella prima riga della Griglia.


Proseguendo con l'esempio, ipotizziamo di aver confermato la posizione degli Oggetti 1, 2 e 3. A questo punto il programma offre la possibilità di scegliere se cliccare sull'Oggetto 4 o sull'Oggetto 5.


Immagine 3. Scelta tra 4 e 5


Decidere di cliccare sull'Oggetto 4 piuttosto che sull'Oggetto 5 ha delle conseguenze sulle scelte successive. Nel primo caso, infatti, si determina una struttura di Pagina che si articola su due righe, nel secondo caso, invece, una struttura che si articola su due colonne.


Immagine 4. Click su 4: struttura a righe


Immagine 5. Click su 5: struttura a colonne


Durante la procedura di ordinamento si possono configurare delle strutture in cui si creano dei Blocchi di Oggetti: nell'Immagine 5, per esempio, gli Oggetti 1, 2, 3 e 4 formano un Blocco così come gli Oggetti 5 e 6 ne formano un altro. Un Blocco di Oggetti si comporta come se fosse un Oggetto unico e, per maggior chiarezza, viene disegnato sulla Griglia non appena si forma.


Immagine 6.


Immagine 7.


Le immagini 6 e 7 dimostrano come scelte di ordinamento diverse creano Blocchi di Oggetti diversi che, alla fine, determinano strutture di Pagina alternative.


In linea generale, non è detto che un Blocco di Oggetti rimanga tale in tutte le Visualizzazioni.


Immagine 8. Blocco di Oggetti nella visualizzazione Desktop


Immagine 9. Rendendo non visibile l'Oggetto 4, nella visualizzazione successiva il Blocco non si forma più


Nell'Immagine 8, per esempio, gli Oggetti 1, 2 e 3 formano un Blocco perché sono affiancati dall'Oggetto 4 disposto su entrambe le righe. Se però, come si vede nell'Immagine 9, si inserisce un'Interruzione di riga tra il Blocco e l'Oggetto 4 (possibile lavorando con l'edizione Pro) o se si rende invisibile l'Oggetto 4, nella Visualizzazione successiva gli Oggetti 1, 2 e 3 non sono più affiancati da altri Oggetti e non formano più un Blocco.


Quando un Blocco di Oggetti rimane tale in tutte le Visualizzazioni (ad eccezione di quella Smartphone in cui la Pagina viene completamente linearizzata) e non c'è modo di intervenire per scioglierlo, viene definito Blocco Indivisibile. Anche i Blocchi Indivisibili vengono disegnati sulla Griglia ed evidenziati con un colore diverso rispetto a quello utilizzato per i Blocchi normali.


Immagine 10. Esempio di Blocco Indivisibile


L'Immagine 10 rappresenta un esempio di Blocco Indivisibile. Come si vede, la disposizione "a fiore" degli Oggetti non permette di identificare una struttura a righe o a colonne: questo riduce significativamente le possibilità di ordinamento, non consente l'inserimento di Interruzioni di riga fra gli Oggetti interessati (funzione disponile nell'edizione Pro) e non permette di rendere invisibile uno degli Oggetti senza rendere automaticamente invisibili anche tutti gli altri Oggetti del Blocco. Dunque, anche se possono essere gestiti, quando si presentano dei Blocchi Indivisibili è consigliabile rivedere la disposizione degli Oggetti per cercare di semplificarla ed avere, così, maggiore libertà d'azione.


In conclusione, non è possibile affermare genericamente che un ordinamento è più corretto o migliore di un altro: tutto dipende dai contenuti presenti e dai risultati che si vogliono ottenere. Una volta impostato un ordinamento conviene, dunque, verificare nel Browser in locale come la Pagina viene visualizzata ai diversi breakpoint impostati. Se i contenuti continuano a disporsi in maniera coerente, significa che l'ordinamento impostato è funzionale e può essere mantenuto.