Leggete questo articolo per sapere come creare siti Web per dispositivi mobili o smartphone.

Nota:

Non verranno più aggiunte ulteriori funzioni ad Adobe Muse, e il supporto verrà sospeso a partire dal giovedì 26 marzo 2020. Per ulteriori informazioni e assistenza, consultate la pagina dedicata alla fine del ciclo di vita di Adobe Muse.

Potete creare e progettare siti Web per dispositivi mobili utilizzando le funzioni di Adobe Muse per il Web design dinamico. Con un layout dinamico, si utilizza un singolo file Muse per creare siti Web da visualizzare su tutti i dispositivi, inclusi i dispositivi mobili.

Per prima cosa occorre determinare la larghezza della finestra del browser per la quale si desidera progettare il sito. Potete quindi continuare a creare il sito. Per ulteriori informazioni sulla creazione di siti per dispositivi mobili con layout dinamico, consultate Creazione di siti Web dinamici.

Se desiderate progettare un layout alternativo per siti destinati ai soli dispositivi mobili, leggete il seguente articolo.

Progettare siti Web solo per dispositivi mobili

Potete utilizzare Adobe Muse per creare layout di siti per contenuti Web da visualizzare su computer desktop, smartphone e tablet. Grazie alle funzioni di progettazione per dispositivi mobili, potete creare layout alternativi per telefoni e tablet oltre a quelli per computer desktop.

Adobe Muse include impostazioni utili, quali Larghezza 100% e la funzione Piè di pagina fisso, che garantiscono la perfetta visualizzazione sui display dei vari tipi di dispositivi disponibili sul mercato. Adobe Muse consente di utilizzare flussi di lavoro familiari per creare design efficaci destinati a monitor di qualsiasi dimensione.

Per creare un layout alternativo per dispositivi mobili:

  1. Aprite Adobe Muse e scegliete File > Nuovo sito.

    Selezionate Larghezza fissa per creare siti per dispositivi specifici.
    Selezionate Larghezza fissa per creare siti Web per dispositivi mobili.

  2. Selezionate Larghezza fissa, quindi fate clic su Impostazioni avanzate nella stessa finestra di dialogo.

    Impostazioni avanzate per un nuovo sito
    Impostazioni avanzate per creare un nuovo sito.

  3. Specificate il valore di larghezza massima della pagina massima.

    Decidete quale sia la larghezza appropriata della finestra del browser per telefoni cellulari, e specificate tale valore.

  4. Immettete i valori per Margini e Spaziatura per il sito mobile. Immettete i seguenti dettagli:

    • Larghezza pagina, Altezza pagina: impostate le dimensioni iniziali della pagina. Muse aumenta automaticamente l’altezza della pagina mano a mano che vi aggiungete dei contenuti, pertanto non è necessario impostare un valore massimo per l’altezza della pagina.
    • Colonne e Larghezza colonne: le colonne suddividono visivamente una pagina Web di Muse in parti uguali, per il corretto allineamento degli elementi. Muse imposta automaticamente la Larghezza colonna in base al numero di colonne specificato e al valore impostato per la distanza tra colonne.
    • Margini e Spaziatura: il valore Margini definisce l’area da lasciare vuota attorno alla pagina Web, all’esterno dell’area dei contenuti. Spaziatura definisce l’area da lasciare vuota all’interno del perimetro dell’area dei contenuti della pagina Web.

    Fate clic su OK.

    Iniziate quindi a creare i layout per il sito Web per dispositivi mobili.

Aggiungere un layout per smartphone a un sito Muse esistente

Quando create un nuovo progetto, potete iniziare con un qualsiasi layout e aggiungere successivamente altri layout, il tutto nello stesso file di Muse.  Quando pubblicate o esportate un sito, Adobe Muse genera automaticamente il file sitemap.xml contenente un elenco di tutte le pagine, per tutti i layout. Il file sitemap.xml viene caricato con le altre risorse del sito. Si tratta di un file importante per l’ottimizzazione per i motori di ricerca (SEO), in quanto facilita l’indicizzazione del sito da parte dei motori di ricerca e consente la corretta classificazione delle pagine nei risultati di ricerca.

Per creare un nuovo layout mobile per smartphone, una delle prime operazioni da eseguire per un sito esistente consiste nel prendere visione dei contenuti e stabilire quali siano gli elementi necessari per i visitatori con smartphone. Questi utenti sono spesso in viaggio e visualizzano i contenuti su uno schermo piccolo. È quindi importante semplificare il design e presentare solo contenuti rilevanti e facilmente accessibili con uno schermo touch.

  1. Aprite il file .Muse al quale desiderate aggiungere un layout alternativo per smartphone.

  2. Aprite ciascuna pagina del progetto e scegliete Pagina > Aggiungi layout alternativo > Telefono.

    Opzioni per l’aggiunta di un layout per smartphone
    Aggiungete un layout per smartphone per creare un sito mobile.

  3. Potete utilizzare il menu per selezionare un layout esistente da copiare. Ai fini di questo articolo, scegliete Desktop per copiare il layout per computer desktop.

    Osservate come sia anche possibile copiare la pianificazione del sito, gli attributi di pagina e il riempimento del browser. Mantenete inalterate le impostazioni predefinite per copiare le informazioni esistenti del sito per computer nel layout per smartphone.

  4. Fate clic su OK per chiudere la finestra di dialogo e aggiungere il layout per smartphone.

    Muse crea una pianificazione del sito per il layout Telefono. Vengono copiati i nomi delle pagine, la struttura del sito e gli attributi della pagina mastro. Il pulsante del layout Telefono non presenta più il segno più (+), perché tale layout è stato appena aggiunto al progetto Muse.

    Osservate come il contenuto effettivo della pagina non è stato aggiunto alla miniatura di pagina del layout Telefono. Questo è intenzionale, per consentirvi di copiare solo il contenuto effettivamente desiderato in ciascuna pagina del layout per dispositivi mobili. Mano a mano che inserite il contenuto desiderato in ogni nuova pagina, potete ridimensionarlo in modo che possa rientrare nelle dimensioni ridotte del display.

    Per aggiungere nuove pagine, fate clic sul segno più (+) a destra della pagina iniziale. Una volta impostata la mappa del sito, potete iniziare a progettare l’esperienza per dispositivi mobili.

    Nella sezione successiva viene descritto come impostare le pagine mastro per il layout per smartphone.

    Aggiungete nuove pagine per creare la mappa del sito per il layout per dispositivi mobili
    Aggiungete nuove pagine per creare la mappa del sito per il layout per dispositivi mobili.

Impostare la pagina mastro e aggiungere elementi comuni a più pagine Web

  1. Nella vista Pianificazione, fate doppio clic sulla pagina A-Mastro per aprirla nella vista Progettazione.

  2. Utilizzate l’interfaccia Riempimento browser per impostare l’immagine di sfondo.

  3. Fate clic su Aggiungi immagine nella sezione Immagine. Individuate e selezionate il file da impostare come immagine di sfondo.

    Opzioni Aggiungi immagine
    Aggiungete un’immagine di sfondo alla pagina mastro Telefono.

  4. Impostate il menu Adatta su Scala per adattare e fate clic sulla posizione centrale.

  5. Per chiudere l’interfaccia Riempimento browser, fate clic su un’area grigia all’esterno della pagina oppure ovunque nel pannello Controllo.

Aggiungere collegamenti ipertestuali per la navigazione nel sito

Adobe Muse consente di collegarsi facilmente a pagine esterne, file scaricabili, sezioni all’interno di pagine Web e altro mediante l’utilizzo di collegamenti ipertestuali. Quando si imposta un sistema di navigazione, è importante fare sì che i visitatori possano facilmente spostarsi tra le varie pagine del sito Web. Un sistema di navigazione ben strutturato è inoltre utile per ottimizzare il sito Web per i motori di ricerca. Per ulteriori informazioni, consultate Creazione di collegamenti ipertestuali.

Nell’elenco a discesa Collegamenti ipertestuali sono elencati i collegamenti di ancoraggio o le pagine aggiunti al sitemap. Per cercare dei collegamenti, iniziate a digitare il nome di una pagina o di un ancoraggio. È sufficiente digitare le prime lettere; nel menu Collegamenti ipertestuali i risultati vengono filtrati e visualizzati in un elenco a discesa. In questo modo, accedere ai collegamenti da aggiornare rapidamente diventa molto più semplice.

Opzioni Collegamenti ipertestuali
Filtrate l’elenco dei collegamenti digitando le prime lettere nel campo del menu Collegamento ipertestuale.

Aggiungere contenuto di pagina alle pagine del layout Telefono

Comincerete a finalizzare la pagina Home.

  1. Fate clic sulla scheda Interno (Telefono). Copiate l’intero gruppo dei quattro pulsanti numerati.
  2. Usate la funzione Vai a pagina per passare alla pagina Home (Telefono) e incollare il gruppo. I collegamenti aggiunti nella sezione precedente vengono conservati, pertanto sia la pagina Home che la pagina mastro Interno condividono gli stessi elementi di navigazione.
  3. Usate lo strumento selezione per posizionare il gruppo al centro della pagina Home, in prossimità della parte inferiore dell’elemento piè di pagina.
  4. Fate clic sulla scheda Temporanea (Desktop) per tornare alla pagina temporanea. Copiate la cornice di testo nel contenitore a sinistra con la dicitura: There’s more than one way to solve a problem.
  5. Fate clic sulla scheda Home (Telefono) e incollate la cornice di testo. Con lo strumento selezione posizionate la cornice di testo in modo da centrarla sopra al gruppo di pulsanti.
Design della pagina Home completato
Design della pagina Home completato.

Successivamente, aggiungerete il contenuto per la pagina Section 01.

  1. Fate clic sulla scheda Temporanea (Desktop) per tornare alla pagina temporanea. Selezionate il rettangolo con angoli arrotondati bianco di sfondo e tre cornici di testo, nel secondo contenitore a sinistra. Le tre cornici di testo includono il cerchio 01, il testo segnaposto della sezione 01 e il pulsante arancione Telefono. Copiate gli elementi selezionati.
  2. Premete Comando+J (Mac OS) o Ctrl+J (Windows) e immettete le prime lettere di Section 01. Fate clic sulla freccia verso il basso per selezionare la pagina Telefono Section 01, quindi premete A capo/Invio per aprirla nella vista Progettazione.
  3. Incollate gli elementi nella pagina Section 01 del layout Telefono. Usate lo strumento selezione per centrarli sulla pagina usando le guide visualizzate temporaneamente.

La pagina Section 01 deve fornire una breve presentazione dell’azienda e consentire agli utenti con dispositivi mobili di contattarla. Quando create siti Web per dispositivi mobili, potete aggiungere un nuovo tipo di collegamento che consente agli utenti di toccare lo schermo e di richiamare il compositore telefonico dello smartphone per chiamare un numero. Si tratta di una funzione molto utile perché consente ai potenziali clienti di chiamare direttamente l’azienda con la massima facilità.

Per aggiungere un collegamento in un layout Telefono per consentire la chiamata a un numero di telefono, seguite la procedura di seguito:

  1. Con lo strumento selezione selezionate il pulsante Telefono.
  2. Nel campo del menu Collegamenti digitate tel:+1 seguito da un numero di telefono, in questo modo:
    tel:+14155551234

Questo è il formato riconosciuto dai browser dei dispositivi mobili per i collegamenti a numeri di telefono.

  1. Premete A capo o Invio per salvare il collegamento.

Nota: se preferite potete creare un collegamento e-mail immettendo il formato seguente nel campo del menu Collegamento ipertestuale:
mailto:designers@design-is-fun.com

Dopo aver aggiunto il collegamento al pulsante Telefono, il design della pagina Section 01 è completata.

  1. Fate clic sulla scheda Temporanea (Desktop) per tornare alla pagina temporanea. Selezionate il rettangolo con angoli arrotondati bianco di sfondo, il cerchio verde 02, la cornice di testo Section 02, la mappa incorporata e il pulsante verde Map. Copiate gli elementi selezionati.
  2. Premete Comando+J (Mac OS) o Ctrl+J (Windows) e immettete le prime lettere di Section 02. Fate clic sul tasto Freccia giù per selezionare la pagina Telefono Section 02, quindi premete A capo/Invio per aprirla nella vista Progettazione.
  3. Incollate gli elementi copiati nel passaggio 1 sulla pagina Section 02 del layout Telefono. Con lo strumento selezione centrateli sulla pagina usando le guide di allineamento.

La pagina Section 02 contiene il codice HTML incorporato generato dal sito Web Google Maps per creare una mappa interattiva.

Se avete seguito l’esercitazione Guida introduttiva di Muse, ricorderete di aver copiato il codice sorgente di Google Maps dal sito Web di Google e usato la funzione HTML incorporato in Muse per incollarlo nella pagina.

Fortunatamente, il codice di Google Maps include già il supporto dei movimenti del dito sui touchscreen, in modo che gli utenti con dispositivi mobili possano interagire facilmente con la mappa. Per questo progetto di esempio, la mappa è già stata ridimensionata.

Tuttavia, per ridimensionare il contenuto HTML incorporato nei progetti, potete fare clic con il pulsante destro del mouse sul contenuto e scegliere HTML per visualizzare il codice nella finestra HTML. Potete modificare i valori di altezza e larghezza nel codice per ridimensionare la mappa e adattarla a uno schermo più piccolo.

Ridimensionare gli elementi HTML incorporati nel codice
Per ridimensionare gli elementi HTML incorporati, potete aggiornare le dimensioni nel codice.

Se avete aperto la finestra Modifica HTML, fate clic su OK per chiuderla senza apportare le modifiche.

  1. Fate clic sul pulsante Map.

Questa volta, aggiungerete un collegamento a un sito Web esterno (Google Maps) per consentire agli utenti con dispositivi mobili di visitare con semplicità la versione completa della mappa in un’altra finestra del browser.

  1. Copiate il collegamento di seguito e incollatelo nel campo del menu Collegamenti:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Fate clic sulla parola Collegamenti a sinistra del menu Collegamenti. Nella finestra di dialogo visualizzata, selezionate la casella di controllo Apri il collegamento in una nuova finestra o scheda. Inoltre, nel campo Descrizione immettete il testo di seguito: Mappa per Adobe Fremont.
Opzioni Collegamenti ipertestuali
Impostate il collegamento in modo che si apra in una nuova finestra del browser e aggiungete una descrizione.

  1. Fate clic fuori dalla finestra di dialogo Collegamenti per chiuderla.

Successivamente, aggiungerete il contenuto per la pagina Section 03.

  1. Fate clic sulla scheda Temporanea (Desktop) per tornare alla pagina temporanea. Selezionate il rettangolo con angoli arrotondati di sfondo bianco, il cerchio viola 03, la cornice di testo Section 03, il modulo di contatto e il pulsante di invio. Copiate gli elementi selezionati.
  2. Premete Comando+J (Mac OS) o Ctrl+J (Windows) e immettete le prime lettere di Section 03. Fate clic sul tasto Freccia giù per selezionare la pagina Telefono Section 03, quindi premete A capo/Invio per aprirla nella vista Progettazione.
  3. Incollate gli elementi copiati nel passaggio 1 sulla pagina Section 03 del layout Telefono. Con lo strumento selezione centrateli sulla pagina usando le guide di allineamento. Gli stili applicati al widget Modulo di contatto del layout Desktop vengono mantenuti quando copiati sul layout Telefono. L’unica modifica necessaria per preparare il modulo per un layout per dispositivi mobili coinvolge il ridimensionamento del modulo e dei suoi elementi per adattarsi a uno schermo di piccole dimensioni.

La pagina Section 03 contiene un widget Modulo di contatto che usa gli script lato server e il database Business Catalyst per elaborare i dati del modulo inviato. Quando fate clic su Pubblica e caricate i file del sito da Muse, il modulo sarà automaticamente funzionante.

Nota: potete usare altri provider di servizi per l’hosting del sito Web finito, ma dovrete creare una codifica aggiuntiva per far funzionare moduli di contatto che non si trovano sui server Business Catalyst.

In questo progetto di esempio, il modulo di contatto non presenta l’opzione CAPTCHA attivata. CAPTCHA è un’impostazione nel menu Opzioni per i widget Modulo di contatto che potete aggiungere per verificare che il modulo sia stato inviato da un utente e non da uno script o da uno “spam bot”; l’interfaccia CAPTCHA visualizza un’immagine con una stringa di caratteri e richiede all’utente di digitare la stringa corrispondente per poter inviare il modulo compilato. Se l’invio di moduli da parte di “spam bot” è fastidioso, è anche importante che il sito sia facile da usare su un telefono cellulare. Se il modulo è troppo complicato da compilare, gli utenti potrebbero scegliere di non inviarlo.

La pagina Section 03 è ora completa. Non è necessario aggiungere un collegamento al pulsante Invia, perché il pulsante è già configurato come parte del widget Modulo di contatto.

La pagina finale del layout Telefono, Section 04, contiene un widget Presentazione. I widget in Muse sono progettati e testati per funzionare con tutti i browser desktop e mobili avanzati, quindi non dovete cambiare nulla per fare in modo che la presentazione funzioni su un touchscreen.

Seguite questa procedura per copiare il contenuto dalla nuova pagina del layout Desktop sulla pagina Section 04 del layout Telefono:

  1. Fate clic sulla scheda Temporanea (Desktop) per tornare alla pagina temporanea. Selezionate il rettangolo bianco di sfondo, il cerchio rosso 04, il widget Presentazione e la cornice di testo Section 04. Con lo strumento selezione potete trascinare sopra a tutti gli elementi e selezionarli in una volta sola. Copiate gli elementi selezionati.
  2. Premete Comando+J (Mac OS) o Ctrl+J (Windows) e immettete le prime lettere di Section 04. Fate clic sul tasto Freccia giù per selezionare la pagina Telefono Section 04, quindi premete A capo/Invio per aprirla nella vista Progettazione.
  3. Incollate gli elementi copiati nel passaggio 1 sulla pagina Section 03 del layout Telefono. Con lo strumento selezione centrateli sulla pagina usando le guide di allineamento. Gli stili applicati al widget Modulo di contatto del layout Desktop vengono mantenuti quando copiati sul layout Telefono. L’unica modifica necessaria per preparare il modulo per un layout per dispositivi mobili coinvolge il ridimensionamento del modulo e dei suoi elementi per adattarsi a uno schermo di piccole dimensioni. Quando aggiungete dei widget con funzioni interattive (quali i widget Presentazione) ai layout per dispositivi mobili creati in Muse, noterete che il pannello Opzioni comprende l’opzione: Abilita passaggio con il dito. Questa impostazione è attivata per impostazione predefinita, in modo che tutti i widget aggiunti ai design per dispositivi mobili vengano configurati automaticamente per consentire agli utenti di toccare e usare i movimenti sui touchscreen. La pagina Section 04 contiene un widget Presentazione che visualizza l’immagine corrispondente quando una miniatura viene toccata. La presentazione è configurata per usare una transizione orizzontale per scorrere le immagini della galleria. Questo esempio richiede l’interazione dell’utente per visualizzare le foto, anche se potete impostare il widget Presentazione per la riproduzione automatica che visualizzerà automaticamente le immagini al caricamento della pagina.

Nota: se configurate i widget presentazione per usare le transizioni Dissolvenza, Orizzontale o Verticale, il codice in Muse attiva automaticamente il passaggio del dito per consentire agli utenti di scorrere le immagini della presentazione passando dito sul touchscreen.

Nella sezione successiva, Creazione di layout per dispositivi mobili in Muse, imparerete ad aggiornare facilmente le risorse su tutte le piattaforme mobili e a pubblicare il sito Muse per ogni layout mobile.

Aggiornare e ottimizzare le risorse del sito Web per dispositivi mobili

Rispetto ai computer desktop, i tablet e gli smartphone dispongono di processori più limitati, velocità di connessione più lente e capacità di memoria ridotta. Di conseguenza, è necessario considerare alcuni aspetti prima di progettare e pubblicare un sito per dispositivi mobili.

Muse include funzioni che vi consentiranno di ottimizzare la grafica visualizzata nei layout per dispositivi mobili per garantire il caricamento rapido del sito e prestazioni ottimali.

  1. Usate Comando/Ctrl+7 per visualizzare il layout Desktop, quindi fate doppio clic sul file A-Mastro del layout desktop per aprirlo nella vista Progettazione.
  2. Aprite il pannello Risorse facendo clic sulla relativa scheda nel set dei pannelli per renderlo attivo. In alternativa, se tale pannello fosse chiuso, scegliete Finestra > Risorse.
  3. Selezionate l’immagine di sfondo con le colline verdi. La risorsa viene evidenziata nel pannello Risorse.
  4. Fate clic sul nome della risorsa, background.jpg, per espandere l’elenco delle istanze usate nel sito. Noterete che il file di immagine di sfondo è presente tre volte, con due diverse icone, a indicare che viene usata sia nel layout Desktop che nel layout Telefono.
Pannello Risorse
Controllate le istanze di background.jpg nel pannello Risorse per ottenere informazioni sulla posizione della risorsa nel sito.

In questo piccolo sito di esempio, l’elenco delle risorse è facilmente gestibile, ma per siti più complessi può diventare più lungo e più difficile da esaminare.

Per rendere la navigazione dell’elenco delle risorse più semplice, potete selezionare il primo elemento per ciascuna risorsa, quindi fate clic sulla freccia a sinistra per comprimere il set. Fate di nuovo clic per espandere e visualizzare l’elenco completo delle istanze in cui la risorsa viene usata nel progetto del sito.

Per individuare le risorse usate per un layout specifico, fate clic sulla parte superiore della colonna all’estremità destra del pannello Risorse in cui sono visualizzate le icone Desktop, Tablet o Telefono. Per questo motivo, l’elenco delle risorse viene ordinato in modo che le risorse per ogni livello vengano visualizzate in un set consolidato.

Pannello Risorse
Fate clic sui titoli dell’intestazione di una colonna nel pannello Risorse per ordinare l’elenco delle risorse per tipo.

Se desiderate apportare una modifica a un elemento grafico e aggiornare tutte le istanze (su tutti i layout), potete fare clic con il pulsante destro del mouse sul nome di una risorsa e scegliere Modifica originale nel menu visualizzato.

Scegliete Modifica originale per aggiornare la risorsa per l’intero sito
Scegliete Modifica originale per aggiornare la risorsa per l’intero sito.

Il file originale inserito viene aperto in Photoshop, Fireworks o nel programma di elaborazione immagini usato per crearlo, dove potete apportare le modifiche necessarie.

Quando salvate il file originale corretto e tornate a Muse, l’oggetto nel pannello Risorse presenta l’icona di sincronizzazione per indicare che la versione dell’elemento grafico del sito non corrisponde più al file sorgente. Fate clic con il pulsante destro del mouse sul file e scegliete Aggiorna per aggiornare tutte le occorrenze dell’elemento grafico con la nuova versione.

Usate la funzione di aggiornamento per rivedere tutte le istanze delle risorsa usata nel sito
Usate la funzione di aggiornamento per rivedere tutte le istanze delle risorsa usata nel sito.

Anteprima layout per dispositivi mobili

Esistono diverse opzioni per visualizzare in anteprima il progetto del sito creato:

Durante la visualizzazione Progettazione del layout Desktop, fate clic su Anteprima per visualizzare l’emulatore basato su Webkit incorporato per renderizzare il codice HTML, CSS e JavaScript. L’anteprima consente di visualizzare i layout nel browser prima di pubblicare un sito e verificarlo online con un dispositivo.

Nella vista Progettazione del layout Telefono, fate clic su Anteprima per visualizzare l’aspetto del layout Telefono. Dal menu Dimensione anteprima scegliete iPhone 4, iPhone 5, Samsung Galaxy S III o Nokia Lumia 920 e verificate l’aspetto del layout con dimensioni di schermo diverse.

Anteprima del layout per dispositivi mobili
Il menu Dimensione anteprima compare durante l’anteprima delle pagine nel layout Telefono o Tablet.

Fate clic sull’icona a destra della finestra Dimensione anteprima per passare dalla modalità di orientamento del layout verticale a quella orizzontale.

Dimensione anteprima include i rapporti di altezza e larghezza predefiniti comuni alla maggior parte degli schermi dei telefoni cellulari.

Alcuni schermi di smartphone sono più larghi, ad esempio Motorola Droid. Se un utente dispone di uno schermo più largo, la funzione Viewport di Muse ridimensiona automaticamente la larghezza del layout Telefono per adattarla allo spazio effettivamente disponibile sullo schermo.

Durante l’anteprima, fate clic sui collegamenti e navigate nel sito. Potete scorrere in modo da simulare il passaggio del dito sullo schermo, ma per eseguire il test effettivo è necessario usare un dispositivo.

Se fate clic sul pulsante “i” accanto al menu Dimensione anteprima in modalità Anteprima, viene visualizzata una nota con un collegamento che descrive lo strumento Adobe Edge Inspect. Edge Inspect consente di usare un’estensione del browser Chrome per connettere i dispositivi mobili al computer e sincronizzarli con il contenuto visualizzato nel browser Chrome del computer desktop.

Con Edge Inspect potete usare Chrome e l’opzione di anteprima nel browser di Adobe Muse per visualizzare il sito su un computer desktop; la stessa pagina viene quindi visualizzata automaticamente anche sui dispositivi connessi (accertatevi di impostare Chrome come browser predefinito).

Inoltre, potete acquistare lo strumento di terze parti Reflection che consente di visualizzare un’emulazione del vostro dispositivo (connesso tramite la stessa connessione di rete) sul computer desktop. Mentre usate uno smartphone o un tablet per navigare in un sito, l’emulatore visualizza il touchscreen del vostro dispositivo.

Funzioni aggiuntive correlate ai layout per dispositivi mobili

Piè di pagina fisso

Come nelle versioni precedenti di Muse, potete trascinare le guide per definire l’area sotto alla pagina e impostare l’area piè di pagina. Potete anche impostare qualsiasi elemento di contenuto come Elemento piè di pagina; in questo modo, il contenuto viene visualizzato sotto al punto di altezza minima di pagina impostata nelle proprietà del sito o al di sotto del contenuto esistente sulla pagina, in base al valore maggiore.

Definire il contenuto piè di pagina è molto utile quando un sito contiene pagine con lunghezze variabili, dal momento che la posizione dell’area piè di pagina viene regolata in verticale per una visualizzazione coerente lungo la parte inferiore delle pagine senza sovrapporre il contenuto della pagina.

Per impostazione predefinita, l’opzione Piè di pagina fisso è attivata. Si tratta di una funzione progettata soprattutto per gli utenti che dispongono di monitor desktop di grandi dimensioni. Nella maggior parte dei casi, sarà necessario attivare l’opzione Piè di pagina fisso durante la creazione dei siti Web. Consente infatti di mantenere l’elemento piè di pagina nella posizione desiderata, anche nelle finestre browser significativamente più grandi della pagina Web progettata, come ad esempio su uno schermo Apple Cinema Display.

Per vedere come funziona, potete eseguire l’anteprima di un sito Muse in un browser e ridurre la visualizzazione della pagina. Se riducete troppo il contenuto della pagina in relazione alla finestra del browser, l’area piè di pagina non combacia più con il bordo inferiore della finestra e al di sotto di essa diventa visibile lo sfondo della finestra del browser.

Quando create nuovi siti con Muse, l’opzione Piè di pagina fisso è attiva nella finestra di dialogo Nuovo sito.

Opzioni Nuovo sito
La casella di controllo Piè di pagina fisso è automaticamente selezionata quando create nuovi siti.

In generale, si consiglia di usare la funzione Piè di pagina fisso quando progettate i siti. Tuttavia, se notate che la lunghezza della pagina è molto superiore a quanto desiderato (se il sito presenta pochi contenuti di pagina e le pagine sono brevi), potete disattivare l’opzione deselezionando la casella di controllo nella finestra di dialogo Proprietà di pagina.

Disabilitate l’opzione Piè di pagina fisso in Proprietà di pagina.
Dopo aver creato un sito, aggiornate le proprietà di pagina e disattivate l’opzione Piè di pagina fisso.

Elementi fissi

Il codice generato da Muse viene testato per garantire che venga visualizzato e si comporti come previsto in tutti i browser Web e piattaforme più recenti.

Uno degli standard Web che presenta differenze tra i browser desktop e per dispositivi mobili è il supporto degli elementi di pagina fissi. Quando create i siti per i browser desktop, potete selezionare un elemento e usare le opzioni del pannello Controllo per fissarlo alla finestra del browser. Questa funzione è utile per garantire una navigazione coerente. È inoltre utile se desiderate conservare un elemento nella stessa area di una pagina più lunga, a prescindere da quanto l’utente scorra il contenuto della pagina verso il basso.

Al momento, non tutti i browser per dispositivi mobili supportano gli oggetti fissi allo stesso modo. Pertanto, è necessario escogitare strategie alternative per oggetti fissi durante la progettazione di layout Telefono e Tablet.

Durante la progettazione di layout Telefono o Tablet, noterete che le opzioni Fissa sono non disponibili e disattivate.

Opzioni Elementi fissi
L’interfaccia Fissa nel pannello Controllo non è disponibile durante la progettazione dei layout per dispositivi mobili.

Pubblicare un sito con layout per dispositivi mobili

In Muse, potete pubblicare siti con più layout usando lo stesso metodo utilizzato normalmente per la pubblicazione dei siti desktop. È utile pubblicare siti di prova e usare dispositivi mobili per visualizzare la versione online nonché testare i progetti su display più piccoli.

Fate clic su Pubblica o scegliete File > Carica su host FTP per caricare i file del sito sul server host.

Quando pubblicate un sito Muse con più layout, viene reso attivo con un solo URL. Pertanto dovete registrare un solo nome dominio, ad esempio:

http://www.my-site.com

Quando pubblicate un sito con due o tre layout diversi, Muse genera il codice per il sito che include gli script di rilevamento con cui viene identificato il tipo di computer o dispositivo e il tipo di browser usato dall’utente per accedere alla pagina.

Il codice di rilevamento determina la piattaforma e la versione del browser e visualizza automaticamente il layout corretto. Non dovete fare altro per garantire che gli utenti di tablet e di smartphone possano visualizzare il layout corretto. Tutto accade in background.

Le nuove funzioni di layout per dispositivi mobili di Muse vi consentono di ottimizzare i layout mobili in modo che gli utenti di dispositivi mobili non debbano scaricare file di grandi dimensioni inutilmente. La funzionalità di layout alternativo fornisce solo i file di immagini più piccoli e ridimensionati in modo da garantire prestazioni ottimali del sito su tutte le piattaforme e i browser.

Per ulteriori informazioni su come usare Muse, consultate gli articoli e le esercitazioni sulla pagina dell’Aiuto di Adobe Muse.

Utilizzo di Vai a pagina per copiare il contenuto del sito nei diversi layout

Fate clic sulla scheda Mastro (Desktop) per rendere la pagina mastro Desktop attiva nella vista Progettazione.

Muse consente di passare facilmente da un layout all’altro con lo strumento di navigazione incorporato: Vai a pagina. Questo pulsante è disponibile nella vista Progettazione in ogni progetto con più layout.

  1. Fate clic sul pulsante Vai a pagina.
Pulsante Vai a pagina
Il pulsante Vai a pagina somiglia a una freccia che punta a una pagina.

Quando usate più layout, è utile potere passare rapidamente da una pagina all’altra, per copiare e incollare con facilità i contenuti.

Nota: oltre a fare clic sul pulsante Vai a pagina, potete anche usare i comandi di scelta rapida da tastiera Comando+J (Mac OS) o Ctrl+J (Windows).

Viene visualizzata la finestra di dialogo Vai a pagina. Tale finestra contiene un campo di testo che potete usare per digitare le prime lettere di un nome di pagina del sito, per passare facilmente alla pagina senza tornare continuamente alla vista Pianificazione.

  1. Immettete le prime tre lettere del nome di pagina da cercare. In questo esempio, digitate le prime tre lettere della parola mastro: mas.

I nomi di pagina corrispondenti vengono rilevati ed elencati.

  1. Premete due volte la freccia verso il basso per selezionare la pagina A-Mastro (Telefono), quindi premete A capo/Invio per aprirla.

La pagina Mastro (Telefono) si apre nella vista Progettazione ed è pronta per essere modificata.

Un altro metodo molto efficace per passare da un layout all’altro di un sito è quello di usare le nuove scelte rapide da tastiera:

  • Comando/Ctrl+7 visualizza il layout Desktop
  • Comando/Ctrl+8 visualizza il layout Tablet
  • Comando/Ctrl+9 visualizza il layout Telefono

Queste scelte rapide da tastiera sono attive solo per la modifica di un sito con layout corrispondente. Provate a usare queste nuove scelte rapide da tastiera per sviluppare il flusso di lavoro preferito quando passate da un layout all’altro e a pagine specifiche.

Successivamente, creerete una seconda pagina mastro per il layout Telefono e aggiungerete gli elementi di progettazione.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online