Adobe Muse: i punti di interruzione spiegati a mia nonna

ATTENZIONE: Adobe Muse non è più sviluppato e supportato da Adobe.   Che cosa sono i punti di interruzione di Adobe Muse? A che cosa servono? In che circostanze vanno utilizzati? Queste sono solo alcune delle domande che mi vengono poste ormai di routine su questo blog e nel gruppo Facebook Adobe Muse Beginner…ne deduco che un’esauriente risposta sia di dovere! In questo articolo dal titolo volutamente ironico, cercherò allora di spiegarti in modo intuitivo, ma efficace il funzionamento dei punti di interruzione di Adobe Muse. Con qualche semplice dritta potrai evitare errori di progettazione e allo stesso tempo …cosa da tutti gradita…ottimizzare il flusso lavorativo. Sei pronto? Si comincia! Allora metti un +1 e partiamo con la lettura: basta un piccolo clic per regalarmi la felicità! In un post di qualche tempo fa, ti ho spiegato gli indubbi vantaggi di un sito web responsive, caratterizzato cioè da un layout che si adatta progressivamente a tutte le dimensioni dei browser e dispositivi. Ed ecco allora che Adobe Muse viene in nostro soccorso! Come ti ho già detto infatti da qualche anno a questa parte, il software permette di ottenere layout reattivi attraverso la creazione di documenti Fluidi e l’implementazione di punti di interruzione a diverse larghezze di pagina….proprio quello di cui abbiamo bisogno! Inutile dire che un sito web efficiente  deve poter essere visualizzato correttamente sia su computer desktop che su smartphones… Per creare il layout responsive necessario affinché questo sia possibile devi assicurarti che ogni elemento (immagini, forme, testi, menu di navigazione) si adatti correttamente ad ogni risoluzione. Ecco allora l’importanza e l’utilità dei fantomatici punti di interruzione! Attenzione però … dovrai inserirli correttamente e disporre, in ognuno, gli oggetti in modo diverso.

Ma cosa sono esattamente i punti di interruzione?

I punti di interruzione in Adobe Muse rappresentano le diverse larghezze del browser, definite in pixel. Cosa intelligente è utilizzarli allora come punti di riferimento…così puoi progettare siti web che rispondono e si adattano al dispositivo con cui l’utente visualizza il sito internet. Ok Marco, potresti spiegarti meglio? Certo, passiamo alla pratica e cerchiamo di capire come utilizzarli!

I punti di interruzione di Adobe Muse, spiegati bene

Quando crei un nuovo documento a larghezza fluida in Adobe Muse, per impostazione predefinita ti viene suggerito un valore di larghezza di pagina pari a 960 pixel per il quale viene inserito il primo punto di interruzione (il punto più largo della pagina). Generalmente quando progetto un nuovo sito web, mi oriento verso una larghezza di pagina massima di 1200 pixel per garantire una corretta visualizzazione anche su schermi più grandi. Una volta creato un nuovo documento, sopra il foglio bianco compare una barra orizzontale lilla denominata “Breakpoint bar”. Al centro di quest’ultima viene visualizzato il valore in pixel oltre il quale il layout della pagina non verrà ridotto (nel mio caso 320), mentre a destra è indicato il valore massimo di larghezza (1200). Guarda ora in prossimità del lato destro della barra di Breakpoint . È presente lo strumento “Scrubber”, utilissimo perché può essere spostato in orizzontale per visualizzare la pagina nelle diverse larghezze ed eventualmente aggiungere nuovi punti di interruzione. Sostanzialmente, attraverso la barra di breakpoint e il relativo scrubber, hai la possibilità di definire dei punti in cui il design della pagina web cambia a seconda della larghezza di pagina. Traduciamo in pratica quello che ti ho appena detto….

Applicazione dello strumento Scrubber

Ti faccio un esempio tenendo in considerazione le 3 risoluzioni standard sulle quali viene solitamente visualizzato un sito web:

• Desktop (risoluzione di 1200 px)
• Tablet (risoluzione di 768 px)
• Mobile (risoluzione di 480 px)

Dove  potremmo collocare allora i nostri punti di interruzione iniziali? Ovviamente abbinandone uno ad ognuna di queste risoluzioni! Il layout grafico del tuo sito web quindi potrebbe essere strutturato in questo modo:

• nella versione desktop (risoluzioni per i PC) potresti sviluppare il sito su tre colonne;
• nella versione per tablet impaginarlo su due colonne;
• e nella versione mobile, utilizzare un’unica colonna sviluppando il sito in modo lineare.

Attenzione: questo è solo un esempio per farti capire che grazie ai punti di interruzione puoi davvero stravolgere il layout della pagina in base ad una determinata larghezza.

Prima di iniziare, però, progetta su carta!

Prima di iniziare a creare un sito web responsive direttamente in Adobe Muse, ti consiglio di progettare i punti di interruzione su carta oppure velocizzare il processo utilizzando dei wireframe e decidere quali saranno gli elementi da visualizzare nella pagina in corrispondenza di ciascun breakpoint definito. Occhio però! I punti di interruzione da progettare dovranno rendere il sito web responsive senza appesantirlo e incasinarlo. Lo stesso vale per il documento di Muse da cui si parte. Purtroppo chi è alle prime armi, tende spesso ad inserire tanti, troppi punti di interruzione e corre il rischio che accada proprio questo. Come evitarlo allora? Come dosare e posizionare strategicamente i punti di interruzione? Vediamo alcune regole per progettare correttamente un sito web responsive.

Punti di interruzione e regole per ottenere layout reattivi perfetti

Sembra una banalità, ma la regola numero 1 per avere un sito che si adatta ad ogni dispositivo è mantenere una struttura semplice, un codice pulito e libero da ogni ridondanza. Quindi cerca di ottimizzare il tuo sito web per le risoluzioni più comuni che sono fondamentalmente 6; se il tuo sito web si vede correttamente con queste, il grosso del lavoro è fatto. Ecco qualche consiglio pratico per realizzare correttamente un sito web responsive semplice ed efficiente con Adobe Muse:

1. crea un layout flessibile in cui i contenuti siano organizzati in colonne;
2. utilizza icone facilmente adattabili alle risoluzioni. Perché non provi con le immagini Svg?;
3. quando passi ad un layout per mobile non avere paura a dislocare i vari contenuti su un’unica colonna;
4. nella versione mobile rimuovi gli elementi superflui (banner, archivi ecc);
5. assicurati di mantenere il carattere tipografico leggibile in tutti i punti di interruzione. Il mio consiglio è di aumentare l’interlinea del testo nella versione mono-colonna per agevolare la lettura;
6. considera i diversi metodi di input. Gli utenti desktop utilizzano probabilmente un mouse ed una tastiera per navigare nel sito e inserire le informazioni. Si tratta di un’esperienza di navigazione diversa rispetto a chi naviga tramite un dispositivo touch. Per questo motivo, per i punti di interruzione più stretti, considera di ingrandire gli elementi di input come i pulsanti o i moduli di contatto.

Come aggiungere, modificare rimuovere un punto di interruzione in Adobe Muse

Come ti ho spiegato nei paragrafi precedenti, per impostazione predefinita, quando crei un nuovo documento, viene aggiunto automaticamente un punto di interruzione nella posizione più larga della pagina. Può non bastarci! Supponiamo infatti di aver concluso la progettazione del layout per desktop. Sarà utile ora utilizzare lo Scrubber (o cursore di movimento) per visualizzare in anteprima le larghezze in cui si verificano problemi di layout e aggiungere nuovi punti di interruzione per regolare la progettazione e disporre gli oggetti in modo ordinato.

Ma cosa succede ogni volta che inseriamo un nuovo punto di interruzione?

Muse aggiunge un modulo CSS3 che consente il rendering dei contenuti per le diverse dimensioni di schermo….ciò che ci serve appunto. In pratica avviene così… Per aggiungere un nuovo punto di interruzione devi fare clic sull’icona + e ti ritroverai all’interno del nuovo Breakpoint, che verrà attivato e apparirà colorato. Vogliamo modificarlo secondo le nostre esigenze ? Ogni punto di interruzione può essere modificato trascinando il cursore di movimento fino al valore del punto desiderato oppure utilizzando la finestra “Proprietà punto di interruzione” accessibile con un doppio clic sul punto stesso.

E se ci fosse un punto di interruzione di troppo?

Per eliminare un punto di interruzione puoi fare un clic sulla X a sinistra del punto attivo o in alternativa fare clic con il tasto destro del mouse sulla barra di Breakpoint e selezionare “Elimina punto di interruzione”.

Caso studio: Un template responsive con soli 3 punti di interruzione

Spesso chi inizia a creare siti web con Adobe Muse tende a sottovalutare la fase di progettazione a favore della smania della realizzazione….caos e inefficienza! Cosa vuol dire progettare? Prima di tutto immaginare il sito come fosse suddiviso in blocchi di contenuto e prevedere i diversi comportamenti che questi subiranno, al variare della larghezza di pagina. Sappiamo bene però che esistono tanti dispositivi per visualizzare un sito….quindi la necessità di tanti layout! Creare un sito web responsive significa progettare la grafica e l’esperienza utente non di uno, ma di tanti layout, quante sono le risoluzione dei dispositivi più diffusi e di conseguenza, ogni elemento deve essere tenuto sotto controllo in tutte le sue metamorfosi.

Quanti punti di interruzione inserire?

La maggior parte di voi starà già pensando di dover inserire nel progetto molti punti di interruzione… Non è scritto da nessuna parte che si debbano usare necessariamente tanti punti di interruzione! Prima di decidere come, e soprattutto quanti punti utilizzare, dovresti prestare attenzione all’architettura dei contenuti.

Analisi del template

Osserva attentamente il template “Mate – Corporate and Multipurpose Muse Template” presente su ThemeForest. Come puoi notare restringendo la finestra del browser, vengono effettuati solo 3 refresh di pagina, il che significa che sono stati utilizzati solo 3 punti di interruzione. Wow solo 3? Si solamente 3 punti! Il primo breakpoint a 1200px Il secondo punto di interruzione a 768px E il terzo a 470px E come puoi notare, il layout è organizzato perfettamente in colonne (3, 2, 1).

Insomma, per finire…

Utilizzare al meglio i punti di interruzione di Adobe Muse al fine di ottenere layout organizzati ed ottimizzati è fondamentale. Con questo articolo ho voluto indicarti le strategie più semplici per mettere in atto tutto ciò. Ovviamente, come dicono gli inglesi, “practice makes perfect”, ossia è la pratica che porta alla perfezione… assieme allo studio e all’osservazione dei lavori di chi ha più esperienza di noi (osserva i template di ThemeForest). Prima di salutarci, ti lascio ad un interessante video che spiega nella pratica la differenza fra layout statico, fluido, adattivo e responsive. Per questa volta è tutto, make practice e…ci vediamo al prossimo articolo! Marco