Video fasullo: un ripiego per i video nelle e-mail
Pubblicato: 2019-03-15Non si può assolutamente negare il potere del video marketing. I contenuti video hanno il potere di raccontare storie più rapidamente delle immagini statiche. È più emotivo. Ti consente di comunicare in pochi secondi ciò che avrebbe richiesto dei paragrafi per descrivere per iscritto. Quindi non sorprende che molti e-mail marketer siano interessati a includere video nelle loro e-mail, solo per scoprire che la maggior parte dei client di posta elettronica non offre supporto per i video.
Ma mentre i video reali non sono supportati nella maggior parte dei clienti, ciò non significa che devi dire addio all'idea di aggiungere interazioni simili a video alle tue campagne. Inserisci: finto video o !
Il video fasullo imita il movimento simile a un video con un'interazione che fa sentire i tuoi iscritti come se stessero riproducendo il video nella loro casella di posta. Ci sono un certo numero di tecniche video false là fuori. Il più popolare è stato creato dal collega #emailgeek Kristian Robinson che ha presentato il suo approccio all'utilizzo dell'animazione CSS per scorrere uno sprite sheet di singoli fotogrammi video da Litmus Live London nel 2018. Dovresti dare un'occhiata al suo discorso qui sotto o sintonizzarti sul Email Design Podcast #71 in cui abbiamo trattato la tecnica di Kristian.
In questo post, ti guideremo attraverso la tecnica che usiamo qui a Litmus. È basato su GIF animate e ha un grande vantaggio: funziona anche in Gmail!
Perché usare video falsi?
Sebbene il video nelle e-mail sia un argomento popolare, funziona solo in Apple Mail e iOS Mail, gli unici client di posta elettronica che forniscono supporto completo per i video HTML5. Utilizzando una tecnica di video falsi, puoi imitare video reali nella tua e-mail con il supporto di molti altri client di posta elettronica.
La tecnica del falso video è supportata da:
- Gmail
- Applicazione Gmail
- Posta Apple
- Mail iOS per iPhone e iPad
- Posta Samsung
- Outlook per Mac
Si tratta di oltre il 64% della quota di mercato complessiva dei client di posta elettronica che supporta questa tecnica. Quindi, se stai cercando di aggiungere un movimento simile a un video alle tue campagne, l'utilizzo della tecnica del falso video significa che i tuoi contenuti video possono essere visti da più abbonati di quelli che potresti raggiungere utilizzando video HTML5.
Come creare un video finto: utilizzare immagini a strati per imitare il video in diretta
Per utilizzare questa tecnica di finto video nella tua prossima campagna e-mail, avrai bisogno di due immagini della stessa dimensione: una copertina statica e una GIF animata, sovrapposte l'una sull'altra.
- L'immagine di copertina statica
In questo esempio, la nostra immagine di copertina statica è denominata cover-play.jpg . Questa è l'immagine che verrà visualizzata per impostazione predefinita, ma scomparirà e rivelerà la GIF di sfondo sottostante quando il tuo abbonato interagisce con la tua email. Il nostro esempio ha un'icona del pulsante di riproduzione nell'immagine di copertina statica per imitare un video, ma non è necessario includerne uno: puoi incorporare qualsiasi tipo di grafica o testo, se lo desideri, ma non dimenticare il tuo Testo ALT !
- Un'immagine di sfondo GIF animata
Quindi, avrai bisogno dell'immagine di sfondo GIF animata: la nostra si chiama fauxvideo.gif . Questa è l'immagine che verrà rivelata quando un abbonato passa con il mouse sopra l'immagine di copertina statica. Questo verrà inserito nel codice come una normale immagine di sfondo.
Configurazione del CSS/HTML
Diamo un'occhiata a come utilizzare HTML e CSS per impostare video fasulli per la tua prossima campagna email:
CSS incorporato
Questo codice va tra i tag <head></head> nella parte superiore della tua email.
.showvideo:hover{ opacity: 0 !important; transition: 0.3s !important; } .showvideo { transition: 0.3s !important; }Lo stile :hover in questo codice cambia l'immagine di copertina in opacità: 0 —nascondendo efficacemente l'immagine—quando un iscritto passa il mouse sopra la sezione, rivelando la GIF animata sullo sfondo. La transizione di 0,3 secondi è un'aggiunta cosmetica, che aggiunge una graduale dissolvenza al passaggio del mouse nei client di posta elettronica in cui è supportata. Viene aggiunto a entrambe le classi hover e non hover per garantire una transizione graduale quando un abbonato passa il mouse sull'immagine e si spegne. (Nota: non è necessario impostare un fallback VML per Outlook, perché Outlook non supporta il passaggio del mouse.)
HTML
Dovrai includere due sezioni di codice nel tuo codice HTML, una cella <td> e una cella <img> .
Questo è il codice per la cella contenente <td> che carica la GIF animata come immagine di sfondo, anche quando l'immagine di copertina è in alto e l'interazione non è attiva.
<td class="w100p" background=" http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/fauxvideo.gif " bgcolor="#43a1e2" valign="top">Questo è il codice per l'immagine cover-play.jpg nascosta su :hover . Come puoi vedere, il CSS in <head> ha attivato la classe “ showvideo ”.
<img class="showvideo" src="http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/cover-play.jpg" width="600" border="0" alt="Play" />Ora, metti tutto insieme! Puoi vedere il codice video falso di esempio completo in azione in questo CodePen .
Domande frequenti sui video falsi
Il video finto per dispositivi mobili è reattivo?
Assolutamente! Mentre la GIF animata si attiverà al passaggio del mouse sul desktop, è necessario un tocco o una pressione prolungata per rivelare la GIF sul cellulare. Tuttavia, se viene applicato un clic nella tua e-mail, il collegamento avvierà il browser al tocco e l'abbonato non vedrà mai il video. Senza un clic, la GIF verrà riprodotta come previsto. Una pressione prolungata rivelerà la GIF con o senza clic. 
Puoi usare le immagini retina con questa tecnica?
Sì! Ai fini di questo esempio, non abbiamo utilizzato immagini retina, ma puoi certamente utilizzare immagini retina con video fasullo se ha senso per il tempo di caricamento complessivo della posta elettronica. Fai attenzione a utilizzare immagini o GIF troppo grandi e che influiranno negativamente sul tempo di caricamento della tua email. Assicurati di controllare il nostro post sulle immagini retina .
Perché usare l'opacità invece di altri metodi di occultamento?
L'uso di display:none su un elemento al passaggio del mouse lo rimuove dal flusso del documento e si ottiene un effetto in cui le immagini continuano a scomparire e riapparire al passaggio del mouse, che non rivela la GIF animata né fornisce una transizione graduale: 
L'uso di visibilità: nascosto produrrebbe un effetto lampeggiante simile: 
L'uso del metodo dell'opacità per nascondere l'immagine di copertina offre l'esperienza più fluida, ma ha anche i suoi svantaggi. L'opacità non è supportata nei seguenti client di posta elettronica:
- AOL
- Yahoo
- Outlook.com
Aggiungi video falsi alla tua prossima campagna email
Non vediamo l'ora di vedere altri video falsi là fuori. Quindi, se usi la tecnica del falso video in una prossima email, ci piacerebbe vederlo! Sentiti libero di condividere un link al tuo design nei commenti qui sotto.
E se avete domande, fatecelo sentire!