Come creare cover responsive per i corsi Rise

Chi utilizza

per la produzione di corsi visualizzabili su tutti i dispositivi, si sarà reso conto della

(che è poi la stessa che compare nel menu laterale del corso).

L’immagine, magari perfettamente visibile in visualizzazione desktop, viene

quando si guarda il corso da tablet o da smartphone.

Si tratta di un tema molto discusso sulla

, dove si richiede a gran voce una

sempre visibile sui vari dispositivi.

Se vuoi scoprire direttamente il

senza scoprire il

, puoi saltare direttamente alla

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

, 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 chi crea prodotti digitali, invece, si crea un problema:

La “tela digitale” è infatti rappresentata da

(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

e non è possibile prevedere tutti i casi.

Come il Web Design ha risolto il problema del responsive

Nello

, questo aspetto è già stato esplorato da tempo.

La soluzione individuata consiste nell’impostare

contenuti nella pagina

:

• 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

e fa uso delle cosiddette

 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).

. Lo si vede bene osservando il comportamento delle

su vari dispositivi.

Problema risolto?

. Sebbene Rise sia completamente responsive, la copertina del corso è sempre composta da un

(che rimane sempre ben saldo e visibile) e da un’

, 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

(un comune notebook).

Questa è la

della cover in questo contesto:

La stessa struttura, segue invece

su uno

(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

.

Come viene posizionato lo sfondo sulle cover dei corsi Rise?

Su Rise l’immagine utilizzata come sfondo del titolo segue queste

:

• 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

è 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

.

Soluzione: come creare cover responsive in Rise

Per farlo, il mio suggerimento è quello di prendere alcune

:

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)

, direte voi. In realtà potete sia

, tramite i tasti presenti in alto a destra in modalità preview, sia

sfruttando gli

.

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

e

(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:

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

Inoltre, è sempre bene mantenere

(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

. 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