Layout responsive
WebAcappella consente di creare siti adattivi (responsive), in grado di adattarsi automaticamente alle diverse dimensioni degli schermi: computer, tablet e dispositivi mobili.
Il software funziona come un sistema modulare basato su riquadri, righe e colonne.
Comprendere la modalità responsive
- Un sito responsive deve adattarsi senza perdere in leggibilità ed ergonomia.
- WebAcappella include diversi punti di rottura (breakpoint) che consentono di adattare il layout in base alle dimensioni dello schermo.
- Le tre principali modalità di visualizzazione disponibili sono:
✔ Modalità Desktop: visualizzazione su schermo grande (PC, Mac).
✔ Modalità tablet: adattamento agli schermi intermedi.
✔ Modalità Mobile: ottimizzazione per smartphone.
Accedere alle opzioni dello schermo
- Individuare le icone corrispondenti alle diverse dimensioni dello schermo sopra il piano di lavoro.
- Clicca sull'icona per visualizzare l'anteprima del sito in qualsiasi momento.
Proprietà responsive
- Alcune proprietà possono essere adattate in base alla modalità di visualizzazione (desktop, tablet, cellulare).
- Quando un'impostazione è modificabile per uno schermo specifico, accanto al parametro viene visualizzata un'icona di modalità responsive.
Attivando queste opzioni, ogni modalità di visualizzazione avrà la propria impostazione, senza influire sulle altre.
Altro esempio di utilizzo: adattare la dimensione dei caratteri. Un testo troppo grande può essere difficile da leggere su un dispositivo mobile.
Ridimensionare le colonne
Ogni riga contiene una o più colonne, la cui larghezza varia da 1 a 12 unità.
Attivando la modalità colonne tenendo premuto il tasto Opzione (Mac) / Alt (Windows) è possibile selezionare più facilmente le colonne.
Quando una colonna è selezionata, è possibile:
- Spostarla per riorganizzare la struttura.
- Ridimensionarla per adattarne l'occupazione nella riga.
- Utilizzare un layout fluido: le colonne si riorganizzano automaticamente in base allo schermo.
- Verificare il ridimensionamento delle colonne: devono essere adattate per evitare una visualizzazione troppo stretta sui dispositivi mobili.
Modalità Cascata: impilare gli elementi in una colonna
La modalità Cascata consente di forzare l'impilamento verticale degli elementi contenuti in una colonna su un determinato schermo.
È particolarmente utile sui dispositivi mobili per evitare una disposizione orizzontale troppo stretta e migliorare la leggibilità.
- Selezionare una riga.
- Accedere alle impostazioni della riga (pannello di destra).
- Attivare la modalità "Cascata" per lo schermo attualmente selezionato.
- Gli elementi di ogni colonna vengono automaticamente impilati verticalmente.
Utilizzare un "Break" per forzare un ritorno a capo
L'elemento Break consente di forzare una riga a passare sotto la precedente su una determinata schermata. Questa impostazione viene ereditata dalle schermate di dimensioni inferiori, garantendo un migliore adattamento dei contenuti.
- È necessario selezionare una riga.
- Aprire la barra degli strumenti degli elementi.
- Selezionare l'elemento Break.
- Trascinare e rilasciare Break in una riga in cui si desidera forzare un ritorno a capo.
⚠ Un Break inserito in una riga sarà attivo su quella schermata e su quelle inferiori.
Nascondere elementi in base allo schermo
Se un elemento è troppo complesso per uno schermo piccolo, può essere nascosto in base alle dimensioni dello schermo.
- Selezionare un elemento.
- Accedere alle opzioni di visibilità (nelle proprietà a destra).
- Selezionare o deselezionare le opzioni per visualizzare o nascondere l'elemento su desktop, tablet o dispositivo mobile.
Testare e finalizzare la visualizzazione
- Passa regolarmente alla modalità mobile per verificare il risultato.
- Regolare i margini e gli spazi per evitare che gli elementi siano troppo ravvicinati.
- Utilizza l'anteprima (Cmd + T / Ctrl + T) per vedere il rendering in condizioni reali.
Buone pratiche
- Utilizzare una struttura a colonne flessibili per una migliore adattabilità.
- Attivare la modalità Cascata su alcune righe per evitare che gli elementi risultino disallineati sui dispositivi mobili.
- Utilizzare un'interruzione in una riga se questa deve passare sotto le altre a partire da una determinata schermata.
- Testare ogni modalità di visualizzazione prima della pubblicazione.
- Ottimizzare immagini e testi per garantire una buona leggibilità su tutti gli schermi.