Chi utilizza Articulate Rise 360 per la produzione di corsi visualizzabili su tutti i dispositivi, si sarà reso conto della difficoltà di gestire l’immagine di fondo della cover
(che è poi la stessa che compare nel menu laterale del corso).
L’immagine, magari perfettamente visibile in visualizzazione desktop, viene tagliata in maniera apparentemente casuale quando si guarda il corso da tablet o da smartphone.
Si tratta di un tema molto discusso sulla community di Articulate, dove si richiede a gran voce una funzione che permetta quantomeno di stabilire un’area di “focus”
sempre visibile sui vari dispositivi.
Come possiamo risolvere il problema della responsività delle cover Rise? In questo articolo vi proponiamo una soluzione possibile.
Se vuoi scoprire direttamente il come senza scoprire il perché, puoi saltare direttamente alla Soluzione: come creare cover responsive in Rise
Indice degli argomenti
- Cosa significa responsive?
- Come il Web Design ha risolto il problema del responsive
- Problema risolto?
- Com’è fatta la cover di un corso Rise?
- Come viene posizionato lo sfondo sulle cover dei corsi Rise?
- Soluzione: come creare cover responsive in Rise
Cosa significa responsive?
Per capirlo, facciamo un esempio: immaginate un pittore che debba dipingere un paesaggio. Sceglierà la sua tela, la poggerà sul cavalletto e comincerà a dipingere. Una volta completato il quadro, magari, lo venderà ad un collezionista, che lo appenderà in bella vista alla parete.
Per il resto della vita, quel dipinto rimarrà lì, su quella tela di proporzioni e dimensioni fisse, immutabile se non per l’usura degli agenti atmosferici.
Per chi crea prodotti digitali, invece, si crea un problema:
quella tela avrà dimensioni sempre diverse!
La “tela digitale” è infatti rappresentata da tutti i dispositivi su cui verrà fruito il quadro
(cioè il nostro corso): schermi grandi in 4K, schermi grandi in HD (anche quadrati), tablet e smartphone di varie misure e proporzioni con 2 orientamenti possibili (verticale e orizzontale).
Le dimensioni della tela digitale sono praticamente infinite e non è possibile prevedere tutti i casi.
Come il Web Design ha risolto il problema del responsive
Nello sviluppo di siti web, questo aspetto è già stato esplorato da tempo.
La soluzione individuata consiste nell’impostare regole diverse per gli elementi contenuti nella pagina in funzione:
- della larghezza in pixel della finestra del browser (o della viewport, cioè la pagina web mostrata all’interno della finestra del browser)
- della sua altezza
- dell’orientamento del dispositivo (portrait per l’orientamento verticale, landscape per quello orizzontale).
Si chiama
Responsive Web Design e fa uso delle cosiddette
Media Query per definire quale comportamento deve avere, ad esempio, il rettangolo X qualora la finestra del browser abbia dimensioni 1024x768 pixel (un comune tablet con orientamento orizzontale).
Rise 360 sfrutta esattamente questo principio. Lo si vede bene osservando il comportamento delle
Flashcard Grid su vari dispositivi.
Problema risolto?
Ebbene no. Sebbene Rise sia completamente responsive, la copertina del corso è sempre composta da un titolo
(che rimane sempre ben saldo e visibile) e da un’ immagine di sfondo, che invece risulta solitamente tagliata su alcuni dispositivi.
Perché? Per capirlo, occorre capire quali sono le regole dimensionali della cover.
Com’è fatta la cover di un corso Rise?
Prendiamo come esempio un corso visualizzato su un dispositivo con risoluzione
1366x768px
(un comune notebook).
Questa è la struttura fisica della cover in questo contesto:
La stessa struttura, segue invece regole leggermente diverse su uno smartphone in verticale
(nell’esempio, un iPhone X):
Si nota quindi che lo sfondo copre sempre l’intera area destinata al titolo. Questo perché utilizza una regola specifica chiamata background.
Come viene posizionato lo sfondo sulle cover dei corsi Rise?
Su Rise l’immagine utilizzata come sfondo del titolo segue queste regole:
- background-position: 50% 50% (vale a dire: centrata in direzione verticale e orizzontale rispetto al suo contenitore)
- background-size: cover (che comunica all’immagine di scalare proporzionalmente rispetto all’area disponibile. L’area disponibile non è altro che l’area che contiene il titolo (testo) e i tasti Inizia il corso e Dettagli.
Questo adattamento al contenitore è proprio ciò che causa il taglio dell’immagine, come visibile in questa immagine:
Non esiste, in Rise, un modo per modificare questo comportamento. Quindi la soluzione al problema passa dal creare un’immagine di sfondo che tenga già in conto qual è lo spazio visibile su ciascun dispositivo.
Soluzione: come creare cover responsive in Rise
Per farlo, il mio suggerimento è quello di prendere alcune schermate delle cover da 3 dispositivi:
- desktop (che usa le stesse regole del tablet con orientamento orizzontale)
- tablet verticale (che usa le stesse regole dello smartphone con orientamento orizzontale)
- smartphone verticale (che usa le stesse regole del menu laterale)
“Ma non abbiamo tutti questi dispositivi!”, direte voi. In realtà potete sia simularli su Rise, tramite i tasti presenti in alto a destra in modalità preview, sia simularli dal vostro browser sfruttando gli
Strumenti per gli sviluppatori.
Ad esempio su Edge (non molto dissimile dagli altri browser):
- cliccate con il tasto destro sulla pagina
- nel menu contestuale che si apre, cliccate su Esamina . Si aprirà la finestra degli Strumenti per sviluppatori
- cliccate sull’icona in alto a destra che rappresenta i dispositivi
- selezionate il dispositivo da simulare usando la tendina in alto
Et voilà! Di volta in volta potrete vedere come appare la cover sui vari dispositivi. Utilizzando inoltre il tasto Ruota
potrete decidere l’orientamento del dispositivo e vedere di conseguenza come cambia il comportamento degli elementi.
Una volta creati i 3 screenshot, potete caricarli in un programma di grafica e centrarli adattandoli all’altezza della vostra tavola da disegno
(in questo esempio ho usato una tavola da disegno di dimensioni 1680x427 pixel.
I 3 screenshot sovrapposti. È già possibile intuire le 3 aree relative ai 3 dispositivi.
Otterremo questo risultato:
- l’area 1 sarà visibile su desktop e tablet orizzontale
- l’area 2 sarà visibile su tablet verticale e smartphone orizzontale
- l’area 3 sarà visibile su smartphone verticale e sul menu laterale
Inoltre, è sempre bene mantenere un’area di sicurezza
(io ho usato una spaziatura di 45 pixel dal bordo) su cui non posizionare elementi importanti, onde evitare tagli dovuti all’adattamento dello sfondo.
Lo step finale è quindi posizionare gli elementi dell’immagine in modo tale che la stessa mantenga un senso sui vari dispositivi. Ad esempio:
È una soluzione perfetta?
Ovviamente no, perché il controllo continua ad essere parziale.
Ma certamente può evitarvi molte emicranie, in attesa di una soluzione definitiva da parte di Articulate.
Antonio Scribano
Instructional Designer
Ti è piaciuto questo articolo? Condividilo con i tuoi colleghi ed amici usando i tasti social!
