Layout reattivo

WebAcappella consente di creare siti web reattivi che si adattano automaticamente alle diverse dimensioni dello schermo: computer, tablet e cellulare.

Il software funziona come un sistema modulare basato su caselle, righe e colonne.

Capire la modalità responsive

  • Un sito responsive deve adattarsi senza perdere leggibilità o ergonomia.

  • WebAcappella include una serie di breakpoint per adattare il layout della pagina alle dimensioni dello schermo.

  • Le tre modalità di visualizzazione principali disponibili sono :

    modalità desktop: visualizzazione su uno schermo grande (PC, Mac).

    modalità tablet: adattamento a schermi intermedi.

    modalità mobile: ottimizzazione per gli smartphone.

Accesso alle scelte dello schermo

  1. Individuare le icone delle diverse dimensioni dello schermo sopra la superficie di lavoro.

  2. Fare clic sull’icona per visualizzare l’anteprima del sito in qualsiasi momento.

../../_images/pt_1_2.png

Proprietà reattive

  1. Alcune proprietà possono essere adattate in base alla modalità di visualizzazione (Desktop, Tablet, Mobile).

  2. Quando è possibile modificare un’impostazione per una schermata specifica, accanto al parametro viene visualizzata l’icona della modalità reattiva.

    ../../_images/pt_3_4.png

Attivando queste opzioni, ogni modalità di visualizzazione avrà la propria impostazione, senza influenzare le altre.

Un altro esempio è l’adattamento delle dimensioni dei caratteri. Un testo troppo grande può essere difficile da leggere su un telefono cellulare.

Ridimensionare le colonne

Ogni riga ha una o più colonne, di larghezza variabile da 1 a 12 unità.

L’attivazione della modalità colonna tenendo premuto il tasto Opzione (Mac) / Alt (Windows) facilita la selezione delle colonne.

Quando è selezionata una colonna, è possibile :

  • Spostarlo per riorganizzare la struttura.

  • Ridimensionarlo per regolare la sua posizione nella linea.

  • Utilizzare un layout fluido: Le colonne si riorganizzano automaticamente in base allo schermo.

  • Controllare il ridimensionamento delle colonne: devono essere adattate per evitare una visualizzazione troppo stretta sui dispositivi mobili.

Modalità a cascata: impilare gli elementi in una colonna

La modalità a cascata consente di forzare l’impilamento verticale degli elementi contenuti in una colonna su una determinata schermata.

È particolarmente utile sui dispositivi mobili per evitare un layout orizzontale troppo stretto e migliorare la leggibilità.

  1. Selezionare una linea.

  2. Accedere ai parametri della linea (pannello destro).

  3. Attivare la modalità «Cascata» per la schermata attualmente selezionata.

  • Gli elementi di ogni colonna vengono automaticamente impilati in verticale.

    ../../_images/pt_5_7.png

Utilizzare un «Break» per forzare un’interruzione di riga

L’elemento Break può essere usato per forzare una riga a passare sotto la precedente su un determinato schermo. Questa impostazione viene ereditata sugli schermi più piccoli, garantendo un migliore adattamento dei contenuti.

  • È necessario selezionare una linea.

  1. Aprire la barra degli strumenti degli elementi.

  2. Selezionare l’elemento Break.

../../_images/break_00.png

  1. Trascinare e rilasciare l’interruzione in una riga in cui si desidera forzare l’interruzione di riga.

⚠ Un’interruzione inserita in una riga sarà attiva su questo schermo e su quelli di dimensioni inferiori.

../../_images/break_10.png

Nascondere gli elementi dallo schermo

Se un elemento è troppo complesso per uno schermo piccolo, può essere nascosto in base alle dimensioni dello schermo.

  1. Selezionare una voce.

  2. Accedere alle opzioni di visibilità (nelle proprietà a destra).

  3. Selezionare o deselezionare le opzioni per mostrare o nascondere l’elemento su Desktop, Tablet o Mobile.

../../_images/masquage_00.png

Test e messa a punto del display

  • Passare regolarmente alla modalità mobile per controllare il rendering.

  • Regolare i margini e la spaziatura per evitare elementi troppo stretti.

  • Utilizzare l’anteprima (Cmd + T / Ctrl + T) per vedere il rendering in condizioni reali.

Le migliori pratiche

  • Utilizzate una struttura a colonne flessibile per una maggiore adattabilità.

  • Attivare la modalità a cascata su alcune linee per evitare elementi disallineati su mobile.

  • Utilizzare un’interruzione in una riga se questa deve passare sotto le altre di un determinato schermo.

  • Testate ogni modalità di visualizzazione prima della pubblicazione.

  • Ottimizzare le immagini e il testo per garantire una facile lettura su tutti gli schermi.