Come creare cover responsive per i corsi Rise

Come creare cover responsive per i corsi Rise
Antonio Scribano
Instructional Designer

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.

Visualizzazione della cover del corso su Desktop (a sinistra) e su Smartphone (a destra).

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?

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.

Una comparazione delle dimensioni schermo relativa ai soli modelli prodotti da Samsung (fonte: bgr.com).

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 1024×768 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.

Una Flashcard Grid vista da Desktop (a sinistra) e su Smartphone (a destra). Su Desktop ogni card è il 33% della larghezza dello schermo, su Smartphone il 100%.

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 struttura del blocco cover in visualizzazione Desktop. Il blocco centrale è gestito attraverso l’attributo “max-width”, che impone una larghezza massima allo stesso, lasciandolo ad equa distanza dai bordi laterali.

La stessa struttura, segue invece regole leggermente diverse su uno smartphone in verticale (nell’esempio, un iPhone X):

La struttura del blocco cover in visualizzazione Smartphone. Il blocco centrale ha una larghezza massima di 375px.

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:

L’immagine di sfondo viene scalata rispetto al suo centro per coprire tutta l’altezza dell’area titolo. Poiché le proporzioni dell’area sono diverse su Desktop e su Smartphone, le aree laterali dell’immagine finiscono fuori dallo schermo.

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:

  1. desktop (che usa le stesse regole del tablet con orientamento orizzontale)
  2. tablet verticale (che usa le stesse regole dello smartphone con orientamento orizzontale)
  3. 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):

  1. cliccate con il tasto destro sulla pagina
  2. nel menu contestuale che si apre, cliccate su Esamina . Si aprirà la finestra degli Strumenti per sviluppatori
  3. cliccate sull’icona in alto a destra che rappresenta i dispositivi
  4. 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 1680×427 pixel.

I 3 screenshot sovrapposti. È già possibile intuire le 3 aree relative ai 3 dispositivi.

 

Otterremo questo risultato:

  1. l’area 1 sarà visibile su desktop e tablet orizzontale
  2. l’area 2 sarà visibile su tablet verticale e smartphone orizzontale
  3. l’area 3 sarà visibile su smartphone verticale e sul menu laterale
Indicazione delle aree visibili su ciascun dispositivo e orientamento.

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:

In alto: ciò che si vedrà come sfondo su Desktop/tablet orizzontale. In basso a sinistra: visualizzazione da Tablet verticale/Smartphone orizzontale. In basso a destra: visualizzazione da Smartphone verticale.

È 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!

What's Your Reaction?
Exited
3
Happy
0
In love
0
Not happy
0
Not sure
0
View Comments (0)

Leave a Reply

Your email address will not be published.

© MOSAICOELEARNING SRL  |  PIVA: 01638210888   |  PRIVACY POLICY  |  COOKIE POLICY

Artwork: SiQuis.it

Scroll To Top