Adobe Muse CC diventa reattivo

Il mese scorso Adobe ha rilasciato un aggiornamento ad Adobe Muse CC, un popolare strumento di web design visivo che ti consente di creare siti web senza codice. Questo nuovo e potente strumento è incluso in Creative Cloud.

In qualità di grafico tradizionale, Adobe Muse apre nuove porte w a lavorare in un’interfaccia familiare, come Adobe InDesign, per la creazione di siti web. Una limitazione dell’applicazione precedente a questo aggiornamento veniva bloccata nei layout a larghezza fissa. Muse ha supportato il design adattivo per un po ‘di tempo e ha aggiunto una funzione di sincronizzazione del testo per una gestione più semplice tra layout alternativi, ma mancava il componente critico del design reattivo. Ora hai una scelta: puoi decidere quale approccio (design reattivo o adattivo) è il migliore per il tuo progetto specifico.

Come funziona

Quando si crea un nuovo sito, l’opzione è in primo piano e al centro. Adobe ha ridisegnato la finestra di dialogo Nuovo sito offrendoti la possibilità di creare un layout a larghezza fissa o un layout a larghezza fluida.

La scelta più ovvia per un design reattivo è la larghezza fluida. Nulla è cambiato nella Modalità Piano , ma una volta nella Modalità Progettazione c’è una nuova funzionalità dell’interfaccia specifica per il responsive design: la barra dei punti di interruzione. Questo flusso di lavoro è simile a quello offerto da Adobe in Edge Reflow e più recentemente in Dreamweaver con le sue funzionalità Bootstrap.

Aggiunta di punti di interruzione

L’aggiunta di punti di interruzione in Muse è semplice e intuitiva. Sul lato destro vedrai uno scrubber che ti permette di ridimensionare la larghezza della pagina, simulando un ridimensionamento del browser.

L’idea è di aggiungere punti di interruzione quando il tuo progetto “si interrompe”, che potrebbero essere elementi che si sovrappongono, diventano troppo piccoli o qualunque sia il caso. Idealmente dovresti separare l’idea di aggiungere punti di interruzione per dispositivi specifici e concentrarti strettamente su ciò che richiede il design. È davvero un atto di equilibrio; il supporto principale per il responsive design è quello di ospitare una vasta gamma di dimensioni dello schermo a causa della proliferazione di dispositivi mobili. È qui che essere premurosi e fare un po ‘di pianificazione può fare molto. È possibile aggiungere tutti i punti di interruzione necessari. Ricorda solo che più hai, più dovrai gestire.

Per aggiungere un punto di interruzione, puoi fare clic sul piccolo segno più che appare sulla barra del punto di interruzione.

Dopo aver aggiunto il punto di interruzione, la barra del punto di interruzione diventa codificata a colori. È possibile gestire le proprietà del punto di interruzione facendo clic con il pulsante destro del mouse sulla barra del punto di interruzione e scegliendo l’opzione delle proprietà del punto di interruzione.

Questo aprirà la finestra di dialogo delle proprietà del punto di interruzione. Qui puoi controllare proprietà specifiche, dal colore e / o la posizione del punto di interruzione all’aggiunta di guide colonna da visualizzare per quel punto di interruzione. Tutto in questa finestra di dialogo è specifico per il punto di interruzione corrente e non ha alcun impatto su altri punti di interruzione all’interno della pagina.

Puoi navigare rapidamente tra i punti di interruzione facendo clic su diverse sezioni al suo interno. In ogni punto di interruzione puoi iniziare a riformattare il contenuto per utilizzare meglio la larghezza del browser.

Pagine master

Le pagine master hanno i propri punti di interruzione, che rispondono indipendentemente dalle pagine a cui vengono applicate. Questo ti dà un controllo specifico sul contenuto della pagina master, in genere un’intestazione e un piè di pagina.

Questi punti di interruzione vengono visualizzati sulla barra dei punti di interruzione come piccoli triangoli, per indicare dove si trovano i punti di interruzione nel master. Puoi fare clic sui triangoli per posizionare rapidamente lo scrubber in quella posizione.

Formattazione del contenuto nei punti di interruzione

Quando aggiungi un punto di interruzione, puoi ripetere il flusso dei contenuti come preferisci. Spesso si adotta un approccio in cui si impilano i contenuti o si ridimensiona il contenuto in modo che sia più grande, facilitando la visualizzazione su schermi più piccoli. Non è raro mostrare meno contenuti. Man mano che lo schermo si rimpicciolisce, il contenuto dovrebbe diventare più specifico. Nell’esempio seguente, noterai che sono passato da un layout a tre colonne per il punto di interruzione più grande a un layout a due colonne per un punto di interruzione più piccolo. Le immagini e il testo diventano più grandi, facilitando la visualizzazione su uno schermo più piccolo.

Ci sono un paio di cose importanti da tenere a mente. Innanzitutto, se desideri che venga visualizzato meno contenuto, non eliminare il contenuto indesiderato nel punto di interruzione più piccolo. Devi ricordare che questa è una pagina; scorre per cambiare il layout per varie dimensioni dello schermo, ma è ancora un documento HTML. Quindi eliminarlo in un dato punto di interruzione lo elimina dalla pagina. Puoi invece nascondere i livelli per il contenuto su un punto di interruzione specifico o fare clic con il pulsante destro del mouse sull’elemento e scegliere Nascondi su punto di interruzione . Ciò renderà quel pezzo di contenuto invisibile al punto di interruzione selezionato, ma inalterato sugli altri.

È anche importante capire in che modo il contenuto ridimensiona in Muse quando si lavora con questo set di funzionalità reattive. Per impostazione predefinita, gli elementi che crei in Muse verranno ridimensionati in larghezza. Gli elementi inseriti nel documento, come ad esempio un’immagine, ridimensioneranno proporzionalmente la larghezza e l’altezza. Puoi controllare queste impostazioni nella barra di controllo quando un elemento è selezionato.

Un comportamento che potresti incontrare è che gli oggetti “fluttuano” un po ‘quando la finestra del browser viene ridimensionata. Per queste circostanze, Adobe ha aggiunto una nuova opzione chiamata Blocco pagina. Questo non deve essere confuso con le opzioni Blocco browser disponibili nelle versioni precedenti, che “bloccano” un elemento al browser; se l’utente scorreva la pagina verso il basso, l’elemento bloccato rimarrebbe bloccato in posizione con il contenuto che scorre al di sotto di esso. Il blocco della pagina è leggermente diverso. L’elemento bloccato utilizzando questa opzione scorrerà comunque con il browser, ma se l’elemento si trova al centro della pagina indipendentemente dalla larghezza del browser, l’elemento rimarrà bloccato al centro della pagina, sebbene continui a ridimensionarsi di dimensione quando le proprietà di dimensionamento sono impostate come tali.

Migrazione di un sito a responsive

Se hai lavorato con Muse in passato e hai un sito a larghezza fissa, è possibile migrarlo a un layout reattivo. L’importante è modificare le proprietà del tuo sito. A tale scopo, seleziona File & gt; Proprietà sito per aprire la finestra di dialogo Proprietà sito . Qui puoi modificare il layout da Larghezza fissa a Larghezza fluida.

Successivamente è necessario modificare gli attributi degli elementi che si desidera rendere fluidi. Puoi farlo rimuovendo tutti i pin precedentemente stabiliti. Dovresti quindi fare clic con il pulsante destro del mouse sull’oggetto e selezionare ridimensiona. Questo ti darà varie opzioni reattive tra cui scegliere.

Conclusione

Ci sono poche cose che non sono pronte per la “prima serata reattiva” in Muse. Gli effetti di scorrimento non sono ancora supportati. Il che significa che se devi utilizzare questi tipi di effetti, per il momento sarai bloccato con una soluzione adattiva. Inoltre, non tutti i widget sono reattivi, anche se la gente di Adobe ci sta lavorando e mi aspetto che entrambe queste limitazioni vengano rimosse con aggiornamenti futuri.

La nuova funzionalità reattiva impostata in Adobe Muse CC è una gradita aggiunta a un già potente strumento di web design visivo. Offre ai designer la possibilità di creare contenuti reattivi visivamente e in un ambiente intuitivo e familiare.

Originariamente pubblicato su www.webdesignerdepot.com.