Dispositivi

Dispositivi di dimensioni diverse sono ormai normali, una percentuale significativa della popolazione mondiale visualizza il web sui dispositivi mobili.

Sparkle risolve questo problema consentendo di differenziare la posizione di ogni elemento della pagina, per i dispositivi più diffusi.

Sebbene le dimensioni dei dispositivi siano visualizzate nel popup dei dispositivi, questo non è un invito a scegliere una dimensione che si adatta al tuo contenuto. Il mondo multi-dispositivo in cui viviamo significa che è necessario rendere il contenuto fruibile su ogni dispositivo possibile.

In Sparkle questo è un tema avanzato, che può essere affrontato nelle fasi successive dello sviluppo di un sito, una preoccupazione che può venire dopo aver risolto la domanda "cosa deve contenere il sito", in aggiunta al layout su un solo dispositivo.

È utile pensare che un sito responsive è la somma di tutti i layout, invece di combattere i limiti di un dispositivo singolo. D'altra parte, se si dispone di un solo layout, il layout PC desktop largo 960 pixel è il più universale, ed è per questo che è il default in Sparkle.

Dispositivo singolo

Se non si aggiungono più dispositivi ad un sito web, Sparkle genererà un singolo layout fisso, che per default è un layout desktop largo 960 pixel. Il codice del sito conterrà le istruzioni per far comportare i browser mobili in una modalità di compatibilità, il contenuto della pagina verrà ridotto per essere interamente visibile e l'utente potrà fare zoom sulla pagina.

Il rovescio della medaglia di questo approccio è che i motori di ricerca segnalano sempre di più questo comportamento come un elemento negativo.

Aggiunta di più dispositivi

Il modo in cui puoi pensare a più dispositivi è pensarli come finestre diverse di una casa, mostrano lo stesso contenuto, ma la forma di ogni finestra è diversa

Ne consegue che aggiungere elementi su un dispositivo comporta l'aggiunta degli stessi elementi a tutti i dispositivi, e la rimozione degli elementi li rimuoverà da tutti i dispositivi. Ciò significa anche che un elemento appena aggiunto ha una posizione su altri dispositivi che dev’essere verificata.

Sparkle ti consente di modificare la posizione dell'elemento e le proprietà del testo per ciascun dispositivo, in modo che tu possa ad esempio posizionare due immagini affiancate su un desktop, ma metterle una sopra l’altra su un layout mobile.

Un layout di un dispositivo può essere in uno di quattro stati:

  • Non presente: il layout del dispositivo non è memorizzato nel file di progetto, e  non è pubblicato.
  • Non pubblicato: il layout del dispositivo viene memorizzato nel file di progetto, ma non pubblicato.
  • Layout personalizzato: il layout del dispositivo viene salvato, pubblicato e può essere personalizzato.
  • Ridimensionato automaticamente: il layout del dispositivo viene pubblicato, ma non può essere modificato perché viene generato automaticamente sulla base del layout più vicino.

Un flusso di lavoro veloce

Quando aggiungi un dispositivo, Sparkle ridimensiona tutti gli elementi per adattarli al nuovo dispositivo, e lo fa dal dispositivo con la dimensione più vicina.

Possiamo sfruttare questa funzionalità osservando che in generale solo il layout desktop e il layout mobile saranno radicalmente diversi, e che quindi non è necessario avere cinque layout diversi.

Il modo più veloce per creare layout per tutti i dispositivi è quello di fare quanto segue. Supponendo di aver completato il layout predefinito largo 960 pixel:

  • aggiungi solo il layout Smartphone verticali (largo 320 pixel);
  • in ogni pagina del tuo sito riorganizza il testo e gli altri elementi;
  • se hai usato gli stili di testo correttamente puoi impostare una nuova dimensione del testo sul dispositivo Smartphone verticale, applicare allo stile e si applicherà solo al dispositivo attuale, ridimensionando tutto il tuo testo istantaneamente;
  • una volta che il layout funziona correttamente su tutte le pagine per il layout 320 puoi tornare al popup dei dispositivi e aggiungere tutti gli altri dispositivi, poiché saranno ridimensionati dal dispositivo più vicino saranno probabilmente costruiti ragionevolmente, richiedendo forse qualche piccolo cambiamento qua e la.

Questo è un esempio della differenza nel layout, un layout ingrandito a sinistra, una vista del 100% a destra.

Testo e dispositivi

Quando aggiungi un nuovo dispositivo, troverai il testo ridimensionato per renderlo adatto al dispositivo. Ad esempio: hai una dimensione font 15pt in un layout 960px e viene aggiunto un dispositivo 320px, il font sarà ridimensionato a una dimensione di 5pt. Anche gli stili vengono modificati per rispettare il ridimensionamento. Tuttavia, lo stesso nome di stile ha una dimensione di carattere specifica per ciascun dispositivo, quindi quando si modifica uno stile in un dispositivo, lo stesso stile rimarrà immutato su altri dispositivi.

Ti suggeriamo di controllare ed eventualmente modificare gli stili prima di iniziare a lavorare su un dispositivo appena aggiunto.

Differenze tra dispositivi

In alcune circostanze potresti voler nascondere un elemento su dispositivi più piccoli o utilizzare un elemento con proprietà diverse.

Ciò può accadere perché un elemento non è appropriato per i dispositivi mobili o perché è necessario un elemento con proprietà diverse su un altro dispositivo.

Per questo è possibile utilizzare la casella di spunta "mostra su questo dispositivo" per mostrare/nascondere gli elementi in modo selettivo.

Anteprima e dispositivi

Una particolarità dell'anteprima è che quando si costruisce un sito multi-dispositivo, il layout mostrato dipende dalla larghezza del browser. Per limitare la confusione, l'anteprima mostra solo il dispositivo corrente. Ma se vuoi vedere in anteprima come funzionerà il sito una volta pubblicato, o se hai sia un browser sia desktop che mobile per l’anteprima live di entrambi, è necessario disattivare la casella di spunta "Anteprima del solo dispositivo corrente".

Sparkle's device control
Sparkle's device control, multi device
An example of a desktop layout viewed on a mobile device
An example of a mobile layout on a mobile device

Aggiornato per Sparkle 3.1

In English

Auf Deutsch

En Français

Segnalateci difetti di questa documentazione e li risolveremo al più presto!

Sparkle combina un approccio "tutto-in-uno", un’interfaccia intuitiva e comprensibile e il focus sulla generazione di siti web veloci, sicuri, affidabili e ottimizzati per i motori di ricerca.

Tutto in un’unica applicazione nativa Mac.

Nient’altro gli si avvicina.

Copyright ©2021 River SRL

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.