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 ‍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 ‍del ‍telefono ‍verticale ‍(largo ‍320 ‍pixel);
  • ‍• ‍esamina ‍ciascuna ‍pagina ‍del ‍sito ‍e ‍riorganizza/ridisponi ‍il ‍testo ‍e ‍gli ‍altri ‍elementi;
  • ‍• ‍se ‍hai ‍utilizzato ‍correttamente ‍gli ‍stili ‍di ‍testo, ‍puoi ‍impostare ‍una ‍nuova ‍dimensione ‍del ‍testo ‍sul ‍dispositivo ‍mobile, ‍applicandolo ‍allo ‍stile ‍si ‍applicherà ‍solo ‍al ‍dispositivo ‍corrente, ‍ridimensionando ‍istantaneamente ‍tutto ‍il ‍tuo ‍testo;
  • ‍• ‍una ‍volta ‍che ‍il ‍layout ‍funziona ‍correttamente ‍su ‍tutte ‍le ‍pagine ‍per ‍il ‍layout ‍320 ‍è ‍possibile ‍tornare ‍al ‍menu ‍popup ‍dei ‍dispositivi ‍e ‍aggiungere ‍tutti ‍i ‍dispositivi; ‍poiché ‍verranno ‍ridimensionati ‍dal ‍dispositivo ‍più ‍vicino, ‍probabilmente ‍avranno ‍già ‍un ‍layout ‍soddisfacente, ‍richiedendo ‍modifiche ‍minori ‍qui ‍e ‍là.

‍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 ‍dispositivo

‍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".

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

Copyright © 2019 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.