sito responsive Adobe Muse

In questo articolo ti spiego come sfruttare la nuova versione di Adobe Muse CC per costruire siti web, pagine o landing page responsive che si adattano a tutte le dimensioni dei browser.

Bene, cominciamo subito!

Solo un momento prima di continuare! Per scrivere e preparare questo tutorial ci ho messo diverse settimane! Come ringraziamento, che ne dici di lasciarmi un +1? A te costa solo una frazione di secondo del tuo tempo, ma per me è una grande soddisfazione! 🙂

 

Adobe Muse ha sicuramente rivoluzionato il modo di progettare e realizzare siti web grazie ad un editor HTML visuale che permette di ottenere pagine web senza metter mano al codice. Sin dalla prima versione, Adobe Muse offriva la possibilità di progettare pagine web per tre differenti layout: Desktop, Tablet e Smartphone. In questo modo il software generava tre siti web, uno per ogni dispositivo.

Ho sempre trovato molto scomoda la gestione di tre layout separati all’interno dello stesso progetto soprattutto perché ogni eventuale modifica doveva essere replicata per ogni versione. E poi questa non è la metodologia più corretta per creare siti ottimizzati e specifici per i dispositivi mobile. Il web è uno e unico, non c’è pertanto necessità di versioni diverse per un singolo sito.

Fortunatamente da poco Adobe ha rilasciato la nuova versione di Muse che permette di realizzare siti web responsive.

Ma che cosa è il design responsive?

Kayla Knight in un articolo di Smashing Magazine definisce così il Design Responsive:

Con Responsive Design indichiamo quell’approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS.

Quando l’utente passa dal suo PC desktop ad un iPad, il sito dovrebbe automaticamente adattarsi alla nuova risoluzione, modificare le dimensioni delle immagini e le interazioni basate sugli script. In altre parole, un sito dovrebbe implementare tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell’utente.

Non si tratta più quindi di avere tre versioni dello stesso sito web separate, ma un unico sito che si adatta a tutte le risoluzioni degli schermi (dai cellulari ai desktop)

Perché è importante realizzare un sito web responsive?

Adobe Muse reponsive design

1 è raccomandato da Google: il motivo è semplice, i siti responsive hanno un solo URL ed un unico codice HTML per cui la cosa rende molto agevole l’indicizzazione sul motore di ricerca. Inoltre i contenuti presenti su un solo sito sono molti più facilmente fruibili e condivisibili dagli utenti rispetto a contenuti duplicati.

2 offre una miglior esperienza all’utente: l’obiettivo di Google è offrire agli utenti i risultati più pertinenti e un’eccellente esperienza di navigazione. Google indica che il 61% degli utenti che visitano un sito non ottimizzato per dispositivi mobili lo abbandonano subito. Non avere quindi un sito responsive rischia di far perdere più della metà di potenziali clienti.

3 è ottimizzato per tutti i dispositivi anche futuri: i siti responsive non dipendono dal tipo di dispositivo, ma dalla larghezza della finestra e quindi saranno sempre ottimizzati a qualsiasi risoluzione.

4 facile da gestire: due o tre distinte versioni del sito richiedono diverse strategie SEO, mentre gestire un solo sito rende tutto più facile e comodo. Inoltre non c’è necessità di aprire nuovi domini e ciò comporta una più semplice gestione delle statistiche e di altri strumenti per l’ottimizzazione del sito.

 

Creare un sito responsive con Adobe Muse

Se non hai l’ultima versione del software, la puoi scaricare da qui.

 

Nuovo documento Responsive Adobe Muse

La prima novità che trovi dopo aver cliccato su File>Nuovo è la finestra per le impostazioni di un nuovo documento nella quale Adobe ha introdotto la possibilità di selezionare l’opzione “Larghezza fluida” (per creare un layout ridimensionabile e quindi responsivo) oppure “Larghezza fissa” (per pagine statiche e non ridimensionabili).

Scegliendo l’opzione “Larghezza fluida” puoi impostare la “larghezza max pagina” come per esempio 1200 px.

adobe-muse-nuovosito

L’impostazione di larghezza minima, si riferisce alla misura minima oltre la quale non verranno ridotte le pagine. Consiglio di lasciare il valore standard di 320 px.

La schermata Pianificazione

La schermata di “pianificazione”, è rimasta pressoché invariata rispetto alle versioni precedenti di Adobe Muse.

adobe-muse-pianificazione

Da notare solamente l’assenza dei tre pulsanti adibiti all’inserimento di nuovi layout.adobe-muse-layout

 

La nuova vista di Progettazione

La vista Progettazione contiene la maggior parte delle novità di Adobe Muse CC 2016. Noti immediatamente la presenza di una barra denominata “Breakpoint” orizzontale colorata situata al di sotto dei righelli. Essa mostra tutti i punti di interruzione di una pagina. I punti di interruzione consentono di definire diversi layout per ogni larghezza del browser.

Questa funzionalità era già presente in Adobe Edge Reflow, un software che permetteva di strutturare design responsive collegati direttamente a Photoshop. Edge Reflow non è più sviluppato attivamente dal novembre 2015.

adobe-muse-strumentoMuovendo lo strumento “scrubber” a sinistra, puoi posizionarti alla larghezza desiderata e aggiungere un nuovo punto di interruzione mediante l’icona +.

Quando fai click su un punto di interruzione esso si evidenzia del colore associato e il resto dei punti vengono disattivati. Puoi visualizzare e modificare il colore dalle sue proprietà facendo doppio click su un punto di interruzione.

adobe-muse-progettazione

In questa recente versione di Adobe Muse sono state introdotte nuove funzionalità, applicabili agli oggetti, tra cui:

adobe-muse-fissa Fissa: offre la possibilità di bloccare la posizione di un oggetto in orizzontale (sinistra, centro o destra). Ad esempio, il logo che si trova in alto a sinistra può essere bloccato in modo che stia sempre visibile sulla pagina a prescindere dalle dimensioni della finestra del browser.

adobe-muse-ridimensionaLa funzione ridimensiona: permette di scegliere come modificare un determinato oggetto in base alle dimensioni della finestra del browser.
L’opzione di ridimensionamento dipende dal tipo di oggetto. Ad esempio, una foto può essere ridimensionata per larghezza e altezza, mentre una casella di testo può essere ridimensionata solo per larghezza (segui il video).

 

Creare il layout responsive della pagina

Prima di iniziare ad inserire gli elementi nelle pagine, devi tenere in considerazione che in un design fluido, gli elementi come immagini, widget, forme e testi devono essere riposizionati per ogni punto di interruzione in quanto al variare delle dimensioni del browser potrebbero apparire sovrapposti o collocati in posizioni sbagliate.

Pertanto, come puoi vedere nell’immagine sotto, è importante inserire gli elementi considerando che dovranno essere riposizionati man mano in base alla larghezza del layout. 

Adobe-muse-template-parrot

Ogni oggetto, al ridimensionamento della pagina, può subire un comportamento diverso in base all’opzione associata.

Puoi utilizzare le seguenti opzioni per assicurti che il layout rimanga ottimizzato per tutti i punti di interruzione:

  • Mostra / nascondi oggetti: hai la possibilità di nascondere o mostrare un oggetto in un punto di interruzione (tasto destro su un oggetto > Nascondi in punto di interruzione).
  • Posizionare gli oggetti in modo diverso per ogni punto di interruzione: puoi inserire un singolo oggetto in posizioni diverse in base al punto di interruzione.
  • Fissare un oggetto: come detto in precedenza puoi fissare gli oggetti (parte sinistra, centro o destra) in modo che rimangano fissi nella stessa posizione in tutti i punti di interruzione.
  • Ridimensionare gli oggetti: come già spiegato è possibile ridimensionare un oggetto in ogni punto di interruzione oppure impostare il ridimensionamento automatico di quest’ultimo in base alla larghezza della pagina.
  • Formattazione del testo per diversi punti di interruzione: puoi formattare il testo in modo diverso nei vari punti di interruzione per aumentare la sua chiarezza e leggibilità.

L’immagine sotto mostra gli elementi di Header e Footer della pagina Mastro e le relative impostazioni di fissaggio e ridimensionamento (click sulla foto per ingrandire).

 

Adobe-muse-template-parrot2

 

Gli elementi come il menu principale (2) ed il form per la newsletter (6) sono fissati a destra e non subiscono nessun ridimensionamento al variare della larghezza del browser.

Il logo (1) ed i pulsanti social (3) vengono fissati a sinistra e anch’essi non sono ridimensionabili.

Gli ultimi due elementi footer menu (4) e testo copyright (5) sono fissati nella posizione centrale con ridimensionamento dinamico in base alla larghezza del browser.

Dopo aver progettato la pagina dal punto di interruzione più largo, utilizziamo il dispositivo di scorrimento per visualizzare in anteprima il layout nelle diverse dimensioni.

Ad un certo punto notiamo che qualche elemento deve essere riposizionato quindi, aggiungiamo un punto di interruzione mediante l’icona + e riadattiamo gli oggetti nella pagina.

Nell’immagine che vediamo sotto è stato aggiunto un punto di interruzione a 958 px e nascosto il menu del footer.

958

Il secondo punto di interruzione è stato inserito a 674 px, è stato implementato un menu mobile (leggi anche, come creare un menu mobile in Adobe Muse) e nascosto il menu standard.

674

Il terzo punto di interruzione si trova a 492 px. I pulsanti social ed il form della newsletter sono stati riposizionati e fissati al centro.

492

In ultimo è stato aggiunto un punto di interruzione a 406 px.

406

 

Siamo giunti alla fine del post. Adesso tocca a te provare a progettare siti web responsive con Adobe Muse.

Aspetto tue riflessioni, dubbi e suggerimenti nei commenti…!

In più, se hai trovato interessante l’articolo ti chiedo un semplice +1 o una condivisione con i tuoi follower.

 

  • 1
    Share