Compatibilità:

WebSite X5 Evo e Pro

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, puoi definire quali modifiche deve subire in funzione dei diversi breakpoint attivati. Nello specifico, devi procedere come segue:

  • Al Passo 4 - Pagine crea 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, clicca sul pulsante  Responsive per richiamare la finestra Impostazioni Responsive. In questa finestra è presente la Responsive Bar che ripropone tutte le Visualizzazioni determinate dai breakpoint che hai attivato per il Sito. Devi procedere in ordine: inizia selezionando sulla Responsive Bar la Visualizzazione Desktop.  
  • Selezionata la Visualizzazione Desktop, nella Griglia viene riproposta la configurazione impostata nella finestra Creazione della Pagina. Clicca 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.
  • Modifica l'ordinamento degli Oggetti in base all'importanza che hanno i diversi contenuti e a come vuoi che vengano disposti nella Pagina. Puoi seguire diverse strade:
    • Impostando Ordinamento > Ordina tutti gli Oggetti dall'inizio, devi iniziare cliccando sull'Oggetto che vuoi posizionare per primo e poi procedere cliccando in ordine su tutti gli altri Oggetti.
    • Impostando Ordinamento > Prosegui l'ordinamento da un Oggetto, devi cliccare sull'Oggetto da cui vuoi proseguire nell'ordinamento. Tutti gli Oggetti precedenti vengono confermati mentre su tutti gli Oggetti successivi devi cliccare per definirne la posizione nell'ordinamento.

La procedura di ordinamento è guidata: selezionato un Oggetto, vengono evidenziati con un bordo rosso tutti gli Oggetti sui quali puoi cliccare per stabilire quello che deve seguire. L'ordinamento impostato per la Visualizzazione Desktop verrà mantenuto anche per tutte le altre Visualizzazioni (vedi, Come funziona il processo di ordinamento degli Oggetti?).

  • La procedura di ordinamento termina:
    • quando clicchi sull'ultimo Oggetto presente nella Pagina.
    • se clicchi su Ordinamento > Completa ordinamento: termina la procedura confermando l'ordinamento corrente.
    • se clicchi su Ordinamento > Annulla ordinamento: termina la procedura annullando le modifiche effettuate e ripristinando l'ordinamento iniziale.
  • Clicca sul pulsante  Mostra/Nascondi Oggetto per avviare la modalità in cui è possibile impostare gli Oggetti come invisibili. Clicca sugli Oggetti che, a risoluzioni inferiori a quella attualmente selezionata, non dovranno più essere visualizzati. Clicca una seconda volta sul pulsante  Mostra/Nascondi Oggetto per confermare e uscire da questa modalità.
  • Clicca 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: clicca sui tratteggi per impostare le Interruzioni di Riga desiderate. Clicca una seconda volta sul pulsante  Interruzione di Riga per confermare e uscire da questa modalità (vedi, Come e perché impostare le Interruzioni di Riga?).
  • Lavorando con l'edizione Pro è possibile che siano impostati fino a 10 breakpoint complessivi. Se sono presenti delle Visualizzazioni intermedie, utilizza 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 procedi impostando, se necessario, altri Oggetti come non visibili e inserendo altre interruzioni di riga. Ripeti questi passaggi per tutte le Visualizzazioni successive.
  • Giunto alla Visualizzazione Smartphone non devi 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 imposti andranno, invece, a determinare la struttura che la Pagina assumerà per l'intervallo di risoluzioni associato alla Visualizzazione immediatamente successiva.


#tip - Celle vuote. Quando crei una nuova Pagina in un Sito responsive, fai in modo che nella Griglia di impaginazione non ci siano Celle vuote. Il programma 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.