Pubblicità display con HTML5: come creare annunci reattivi

In questo articolo spieghiamo perché gli annunci banner reattivi HTML5 sono un must per tutti gli inserzionisti digitali. Dai designer agli specialisti digitali, dalle agenzie ai team interni, la pubblicità display HTML5 è ora il formato banner predefinito.

In particolare, con un numero sempre maggiore di dispositivi e piattaforme a cui provvedere, sapersi adattare ai comportamenti degli spettatori è fondamentale. Se il tuo banner pubblicitario non è compatibile, non può rispondere alle modifiche alle dimensioni dello schermo o funziona su dispositivi mobili, allora sei nei guai. La pubblicità display reattiva HTML5 offre la flessibilità e la tecnologia di cui hai bisogno per far prosperare il tuo marchio online.

In particolare, HTML5 offre ai marketer digitali la possibilità di:

• Ridimensiona rapidamente a molti formati e dimensioni
• Possedere il massimo controllo sul design
• Crea facilmente varianti e traduzioni degli annunci
• Banner rich media per la produzione di massa
• Sfrutta la crescita di video e display mobile
• Aggiorna dinamicamente i banner con i feed di dati
• Collabora in modo efficace tra i team, internamente

Sì, creare annunci display reattivi non è mai stato così importante, soprattutto perché oggi è più probabile che mai che il tuo bellissimo annuncio display venga visualizzato sui dispositivi mobili. Secondo la ricerca Bannerflow del 2020, gli annunci display per dispositivi mobili stanno superando il desktop di un certo margine. Quasi due terzi delle visualizzazioni degli annunci display sono attualmente su dispositivi mobili in Europa. Inoltre, con gli utenti mobili che trascorrono oltre quattro ore sui propri smartphone ogni giorno, questo è il coinvolgimento che un inserzionista digitale non può permettersi di ignorare. Il vecchio mondo di banner statici, gif e flash è finito da tempo, o almeno dovrebbe esserlo.

Perché dovrei creare pubblicità display HTML5?

Hai bisogno di più motivi per produrre pubblicità display HTML5? Per cominciare, il nostro gioco è incentrato sulla conversione ed è competitivo. Tutti sono alla disperata ricerca di attenzioni: non riuscite ad affascinare e il gioco è finito. HTML5 offre opportunità di progettazione senza precedenti attraverso rich media e un'intera gamma di formati di annunci. Se non stai seguendo le migliori pratiche per la progettazione di banner, puoi scommettere che lo farà un concorrente. Inoltre, la pubblicità display è in continua crescita, in particolare all'interno del programmatic.

Prendi, ad esempio, cosa sta succedendo nel Regno Unito. Nel 2020, gli inserzionisti del Regno Unito hanno speso 6,79 miliardi di sterline in pubblicità programmatica, secondo un rapporto di eMarketer. La spesa per pubblicità display programmatica ora rappresenta il 92% di tutta la spesa pubblicitaria display digitale del Regno Unito, nonostante l'impatto della pandemia di Covid-19. E questa percentuale dovrebbe raggiungere il 94,5% entro il 2022 e rappresentare 9,01 miliardi di sterline! La produzione di annunci migliori, tramite HTML5, per sfruttare al meglio questa crescita deve essere una priorità.

Inoltre, con le aziende che ora adottano il pensiero "mobile first" in tutto il loro marketing digitale, assicurarsi che il tuo sito Web, le pagine di destinazione e i banner siano reattivi è un requisito minimo. HTML5 ti consente di creare banner pronti per dispositivi mobili, reattivi e ricchi di funzionalità. Invece di progettare una campagna statica per desktop e quindi ridimensionare ogni banner individualmente, puoi invece aumentare con HTML5!

La pubblicità è diventata da tempo mobile e HTML5 è il modo per creare i banner di cui hai bisogno.

Qual è il problema con HTML5?

Prima che HTML5 fosse adottato universalmente, gestire una campagna pubblicitaria su diversi dispositivi era un duro lavoro. La creazione manuale di banner per tutte le diverse schermate su cui potrebbe apparire l'annuncio banner era uno slog. HTML5 è il modo ottimale per creare banner pubblicitari proprio come per i siti web reattivi.

HTML5 è l'ultimo aggiornamento dell'Hypertext Markup Language. È il linguaggio standard utilizzato per descrivere i contenuti e il design delle pagine web, comprese quelle responsive. HTML5 è importante nella pubblicità online, in quanto offre la flessibilità per eseguire banner pubblicitari su tutti i dispositivi.

Fornisce sia agli editori che agli inserzionisti i mezzi per creare campagne pubblicitarie adattabili, attraverso banner che si adattano a tutte le piattaforme. A differenza, diciamo, usando flash (oh, che caratteristico) questo significa che non devi creare centinaia di versioni dello stesso annuncio. La riduzione del numero di versioni degli annunci ridurrà anche la probabilità di errori e aumenterà la produzione di banner.

All'interno di un banner pubblicitario HTML5, testo, immagini, video e JavaScript sono regolabili allo stesso modo di qualsiasi pagina web: sono modificabili. Anche gli annunci banner HTML5 ottimizzeranno dinamicamente, quindi l'annuncio sarà perfetto ovunque. Inoltre, i banner pubblicitari HTML5 funzionano perfettamente sui dispositivi mobili! Senza alcuna perdita di funzionalità, il che significa raggiungere un pubblico più ampio è facile.

Esistono due modi per creare banner HTML5

In sostanza, ci sono due modi diversi per creare banner pubblicitari online oggi.

In primo luogo, puoi codificare manualmente i banner pubblicitari per renderli reattivi. E sì, ci sono molti tutorial e modelli online che ti mostrano come farlo. Tuttavia, il processo è lento e significa che devi possedere una discreta conoscenza di HTML5 e CSS. Inoltre, ovviamente devi avere anche il tocco di un designer! Una combinazione rara.

In alternativa, puoi utilizzare una piattaforma di gestione delle creatività come Bannerflow, che presenta un creatore di annunci orientato all'automazione della produzione creativa. Questi aiutano a prendersi cura della codifica per te, rendendo tutti i tuoi banner reattivi con il clic di un pulsante. Inoltre, come scopriremo, offrono molti modi integrati per sfruttare HTML5. Questi possono variare dallo sviluppo di fantastici banner video a banner dinamici che includono feed di dati.

La realtà è che le piattaforme di gestione creativa riducono il tempo necessario per creare e ridimensionare una campagna, ponendo al contempo il focus della produzione di banner HTML5 sul design.

Creazione di pubblicità display reattiva HTML5

La creazione di annunci banner reattivi HTML5 è relativamente semplice. Eppure, come tutti i banner digitali ci sono regole e best practices da seguire. Quando si crea pubblicità display HTML5 vale la pena considerare:

Controlla le dimensioni del tuo banner HTML5

Quando si crea un layout reattivo HTML5, è necessario che gli elementi abbiano larghezze variabili simili a quelle che devono seguire i banner pubblicitari della convenzione. Puoi anche utilizzare l'altezza che preferisci, ma ciò non significa che il tuo annuncio rimarrà a quell'altezza. La migliore pratica quando si creano banner reattivi consiste nell'utilizzare le stesse altezze delle dimensioni dei banner tradizionali. Questo è così per mantenere la compatibilità con editori e reti pubblicitarie.

Progetta (o modifica) sempre banner HTML5 per le dimensioni specifiche offerte da reti pubblicitarie ed editori. Ad esempio, ecco un elenco di dimensioni offerte da Google Ad Manager. Se basi i tuoi banner pubblicitari su queste dimensioni, puoi essere certo che la maggior parte dei dispositivi visualizzerà correttamente la tua creatività pubblicitaria una volta pubblicata.

Immagini, design banner e HTML5

Quando crei banner reattivi in ​​HTML5, il tuo controllo sul design e sulle immagini non ha eguali. I frame per i messaggi e le animazioni sono facili da controllare. Ma non diventare avido! Molto probabilmente il tuo banner sarà visibile allo spettatore solo per un periodo compreso tra 5 e 15 secondi, quindi sfrutta al massimo questo tempo e concentrati sulle tue scelte di design.

Ed è qui che le cose si fanno interessanti! Quando utilizzi alcune piattaforme di gestione della creatività, come Bannerflow, le immagini utilizzate nel tuo banner HTML5 vengono automaticamente modificate e compresse. Ciò significa che le dimensioni e il peso dell'immagine per il tuo banner sono ottimizzati per adattarsi alle reti pubblicitarie.

Tuttavia, anche con tutta questa straordinaria tecnologia, vale la pena provare a mantenere qualsiasi immagine a una dimensione massima di 4000 × 4000 (larghezza e altezza) in pixel. Inoltre, è sempre meglio modificare i file raw super grandi se superano 4000 × 4000 per ottenere risultati migliori. In effetti, è buona norma cercare di utilizzare sempre le immagini più piccole possibili. Ciò contribuirà a ridurre ulteriormente il peso di un banner. Più piccola è l'immagine, meglio è (ma senza ridurre la qualità ovviamente!).

Vale anche la pena selezionare il miglior formato immagine, per il tipo di immagine che stai utilizzando nel tuo banner. Ad esempio, un JPEG dovrebbe essere sempre utilizzato come sfondo. Mentre se è trasparente o un oggetto, usa un PNG. Per i tipi di logo e gli oggetti disegnati (escluse le foto) SVG: file di piccole dimensioni ma buoni a mantenere la nitidezza quando espansi. Una combinazione di tipi di file immagine spesso fornisce risultati migliori.

Ma ricorda, ci sono alcune cose che vanno da sé! Ad esempio, assicurati che l'immagine principale sia completamente a fuoco. Mentre, un design pulito e semplicistico funziona sempre meglio.

Ridimensionamento, controllo delle versioni e traduzione

Anche quando si creano banner responsive HTML5 che si ottimizzano automaticamente, è necessario creare quante più versioni possibili, per raggiungere il maggior numero di persone possibile. Più sono le dimensioni del banner, meglio è. A seconda del tipo di media, più banner hai, più è probabile che tu vinca qualsiasi offerta programmatica.

La migliore pratica ovvia è utilizzare una piattaforma di gestione creativa e un creatore di annunci che sia efficiente e veloce quando si tratta di ridimensionare e creare più versioni di banner HTML5. Meglio ancora, è molto più facile lavorare in più mercati se puoi duplicare, tradurre e creare varianti della tua pubblicità display.

È anche facile cambiare il contenuto nei banner HTML5. Inoltre, la possibilità di duplicare e ridimensionare le campagne in pochi secondi significa che è molto più facile programmare varianti diverse per giorni diversi. In parole povere, i banner reattivi HTML5 sono ottimi per l'uso nei servizi di automazione, come il programmatico.

Banner rich media

Senza HTML5 non ci sarebbero banner rich media. Sarebbe impossibile creare banner che interagiscono con gli spettatori, che siano reattivi e funzionino su più dispositivi. Gli annunci rich media richiedono livelli di coinvolgimento più elevati e sono utili per il tuo marchio. Dai moduli di iscrizione, alle barre di ricerca, ai giochi in-banner, HTML5 consente ai marketer digitali di coinvolgere gli spettatori in vari modi.

Ma fai attenzione a come usi i banner rich media. La loro efficacia dipende molto dal formato del banner che scegli di utilizzare. Non cercare di aggiungere troppe informazioni o di renderle eccessivamente complesse. L'interazione non dovrebbe essere più di uno o due passaggi; cerca di concentrarti su una cosa e rendila più facile e veloce per lo spettatore.

Ad esempio, un modulo online dovrebbe contenere il minimo di interazioni richieste - più, quindi inizia nel banner e finisce nella pagina di destinazione. La chiave per una buona campagna banner rich media HTML5 è che deve essere seria nell'esecuzione e intuitiva nel design.

Oggi puoi utilizzare funzionalità come la possibilità di pagare direttamente per un prodotto presente in un banner. O come si vede nell'annuncio display sopra i chatbot: con i banner rich media le applicazioni future sono infinite!

Pubblicità display video e HTML5

All'interno della pubblicità display, l'uso dei video è in continua crescita. Nella sola Europa, la visualizzazione di video online si sta moltiplicando tre volte e mezzo più velocemente della visualizzazione non video. L'utilizzo di video nel tuo annuncio display HTML5 ti aiuta a farti apparire più autentico e a connetterti con gli spettatori, il che a sua volta aiuta con la conversione. HTML5 rende anche la creazione di banner che utilizzano video facile da produrre in serie.

Attraverso l'uso dei banner HTML5 hai molte opzioni riguardo a come usi i video. A livello base un video può essere utilizzato come sfondo per un banner. O più creativamente, può far parte dell'animazione del banner. Ad esempio, un trailer che termina con un frame di invito all'azione (CTA).

La produzione di annunci display video è facile

Alcuni suggerimenti principali quando si utilizza il video è assicurarsi sempre che il proprio logo sia visibile nel banner del video HTML5. Inizia con il tuo messaggio principale e assicurati che il video si ripeta. Cerca anche di avere un massimo di 1-3 fasi nel video: cattura l'attenzione degli spettatori, approfondisci il coinvolgimento e termina sempre con un CTA. Imposta sempre i tuoi video su "silenzioso" e attiva i sottotitoli (se necessario).

HTML5, combinato con una buona piattaforma di gestione creativa, dovrebbe significare che non è richiesta nemmeno la codifica. Ciò significa che molte idee possono diventare realtà senza la necessità di fare nulla nel back-end del banner.

Inoltre, le persone guardano i banner video in numero sempre maggiore sui loro telefoni cellulari. Quindi assicurarti di avere un annuncio display video HTML5 reattivo pronto per i dispositivi mobili è un gioco da ragazzi.

Inoltre, se hai la possibilità di esportare i tuoi banner video HTML5 in formato mp4, puoi caricare questi annunci video sui social network. Un modo semplice per i team interni di creare annunci video, riutilizzare risorse HTML5 ed espandere la portata delle loro campagne digitali. Ecco come il creatore di annunci in Bannerflow, Creative Studio, rende tutto così semplice:

Creazione di annunci banner responsive HTML5 per dispositivi mobili

Quando si creano annunci display adattabili HTML5 per dispositivi mobili, si tratta di utilizzare il formato giusto per cominciare. Invece di ridimensionare un banner desktop a una dimensione mobile, progetta il tuo annuncio specificamente per dispositivi mobili. In alcuni ambienti, data la popolarità e il coinvolgimento dei dispositivi mobili, la progettazione di tutte le campagne incentrate sui dispositivi mobili è vista come la via da seguire.

Vale la pena ricordare che le proporzioni dei banner HTML5 verranno ridimensionate per adattarsi a qualsiasi schermo. Tuttavia, è comunque consigliabile progettare i tuoi banner tenendo presente i formati mobili selezionati.

Un aspetto da considerare nella progettazione di banner per dispositivi mobili è assicurarsi che tutto il testo sia leggibile. Sì, questo include la dimensione del carattere, ma hai considerato anche il tuo messaggio? Potrebbe essere necessario aggiungere più frame al banner HTML5 mobile per esprimere lo stesso messaggio di un banner desktop. Ancora una volta, dipende dal formato che usi, ma cerca di evitare di spremere più di quanto dovresti in un singolo fotogramma.

Inoltre, rilascia grandi quantità di testo e concentrati sull'impatto delle tue immagini. Inoltre, date le dimensioni dello schermo, il tuo annuncio deve essere accattivante e non invadente. La pubblicità digitale è diventata mobile secoli fa: vai dove sono i tuoi consumatori e crea fantastici banner reattivi HTML5 per loro.

Creatività dinamiche

Senza HTML5 non puoi creare e gestire banner pubblicitari dinamici e accattivanti basati sui dati. Limitati a produrre solo il più semplice dei banner e ti ritroverai limitato a un messaggio. Mentre, un concorrente può potenzialmente fornire 2000. Sì, davvero: tramite aggiornamenti di feed di dati coerenti e automazione. Un banner reattivo HTML5 può fornire 2000 messaggi nel tempo necessario per produrne uno statico.

Come accennato, il bello di HTML5 è che ti fornisce il controllo completo. Lo stesso vale per un banner collegato a un feed di dati, ma di più: hai la possibilità di aggiornare il banner in tempo reale.

Personalizza i tuoi annunci display reattivi

Ad esempio, prendi una campagna banner HTML5 che mostra gli articoli più popolari in un negozio di e-commerce. Quando un articolo è esaurito, ciò si riflette automaticamente nell'elenco dei prodotti mostrato nel banner dinamico. Questo è ottimo sia per gli spettatori che per il business dell'e-commerce!

La stessa idea può essere utilizzata dalle società di iGaming. Ad esempio, le quote possono cambiare dinamicamente, all'interno di un banner, durante una partita. Esistono molti tipi diversi di campagne personalizzate che puoi utilizzare con le creatività dinamiche basate su HTML5.

Inoltre, è consigliabile aggiornare un feed di prodotto in tempo reale. Dopotutto, devi pensare in modo critico al formato in cui vengono visualizzati i dati. Assicurarsi che tutti i dati che utilizzi nel tuo banner siano comprensibili agli spettatori è fondamentale; questo potrebbe variare da date e prezzi, a quote. Questo può variare anche a seconda dei mercati e delle lingue. Ad esempio, il modo in cui gli americani scrivono le date è diverso da come gli svedesi scrivono le date. O i diversi modi in cui inglesi e svedesi interpretano le quote delle scommesse.

Un ultimo consiglio: un buon creatore di annunci come Creative Studio o una piattaforma di gestione della creatività renderà facile impostare filtri e opzioni di ordinamento durante la manipolazione di un feed di dati.

Passi successivi: creare i tuoi migliori banner pubblicitari reattivi in ​​assoluto!

Si spera che ormai ti sia reso conto che la creazione di banner pubblicitari reattivi HTML5 è l'opzione migliore per le tue esigenze di pubblicità display digitale. Con così tanta flessibilità, visibilità su più schermi e piattaforme, semplicemente non esiste una tecnologia migliore per i banner. Annunci migliori, design migliori, metriche migliori: tutto è possibile.

Infine, con le piattaforme di gestione creativa che ti offrono la possibilità di produrre campagne per tutte le principali reti pubblicitarie, oltre che per i social network, l'utilizzo di una è un modo semplice per migliorare la produttività del tuo team interno. Impiegare giorni (o addirittura settimane!) per duplicare manualmente e ridimensionare le campagne non è più un'opzione.

In un'era di mercati multipli, ottimizzazione in tempo reale e trasparenza, l'adozione di HTML5 aiuta i professionisti del marketing a raggiungere il rendimento pubblicitario che desiderano.

Se sei interessato a sapere come una piattaforma come Bannerflow può aiutare a produrre pubblicità straordinaria, contattaci.