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? |
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.
▪ | 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à. |
▪ | Lavorando con l'edizione Professional è 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.
|
|