16 Gennaio, 2019 | Di

Come realizzare un banner eye catching in HTML5

Come realizzare un banner eye catching in HTML5

Odiati da molti e ignorati da altri, tutti almeno una volta li abbiamo cliccati per errore o per interesse.

Stiamo parlando dei banner animati. Si narra che siano antichi come il mondo, addirittura che esistessero ancora prima della nascita del primo sito web. Solo, non avevano ancora trovato il loro spazio.

Ragazzo con spade laser

Un po’ di storia

Con l'avvento del World Wide Web, i banner animati hanno finalmente trovato la loro dimensione; sono entrati in punta di piedi, insediandosi inizialmente negli angoli più remoti di pochi sfortunati siti internet e nel tempo hanno rivoluzionato il Web. Oggi, si può dire che ci siano alcuni siti internet costruiti intorno a loro.

Ci sono tre grandi ere che caratterizzano l'evoluzione di questi curiosi annunci pubblicitari:

  1. la nascita delle gif animate
  2. l'arrivo di Flash
  3. l'evoluzione dell’HTML5.

Gif Animate (.gif)

Ad oggi l'utilizzo della gif animata ha molteplici valenze. Le gif sono arrivate con prepotenza anche su WhatsApp per appesantire ulteriormente le nostre conversazioni, lì dove del semplice testo non riesce a esprimere la reazione.

Sono loro la base solida dei banner animati. Ancora oggi, in quei browser che non supportano flash o hanno Javascript disabilitato, le vediamo spuntare per coprire quelli che altrimenti sarebbero dei buchi.

Hanno funzionato benissimo per i primi anni, semplici da creare ed efficaci al punto giusto. Chiaramente non permettevano di realizzare animazioni complesse a discapito di un aumento di peso considerevole.

Banner in Flash (.swf)

Le gif sono state fortunatamente soppiantate dall'arrivo prepotente di Flash. Flash è un software che ha permesso finalmente di far evolvere i banner animati da frame statici in sequenza a elementi vettoriali dinamici. Con una buona base creativa e un po’ di confidenza con la grafica vettoriale si poteva praticamente fare qualsiasi cosa, contenendo notevolmente il peso del file .swf che veniva generato.

C'è da dire che oggi è facile realizzare un bel banner animato in quanto i limiti di peso imposti dai publisher sono decuplicati negli anni. Tuttavia, all’inizio del XXI secolo non si potevano superare i 20kb di peso, e l'unico modo per poterci rientrare era realizzare la grafica vettoriale, senza l'utilizzo di nessuna immagine.

Banner in HTML5

Cosa è successo ad un certo punto?

Il linguaggio di mark-up più conosciuto al mondo si è evoluto. L’utilizzo del HTML, fino a qualche anno fa, era relegato all’ingrato ruolo di tenere in ordine i contenuti all’interno delle pagine web, ma cambiate le necessità dei browser si è dovuto rivoluzionare anche lui. Nuovi TAG e nuove proprietà CSS hanno permesso, tra le tante migliorie e ottimizzazioni, di animare gli elementi.

La combo HTML5 + CSS3 + Js (JQuery) ha ridefinito gli standard.

I banner Flash sono ancora molto presenti in rete ma verranno smantellati nell'arco di pochi anni a fronte di creatività realizzate in HTML5 che non hanno bisogno di un flash player installato nel browser.

Come creare banner in HTML 5

Processo creativo

Stabilita la creatività, di norma si prevedono già i vari frame all'interno del progetto grafico. Se utilizzassimo Photoshop, ad esempio, per ogni frame dovremmo creare una cartella che contenga tutti gli elementi che vogliamo animare all'interno del banner.

Il primo step può essere quello di eseguire in sequenza questi frame esportandoli in una gif (:D) per dare a noi stessi e al cliente un'idea di come si svolgerà l'animazione (senza interpolazioni particolari).

Approvata la creatività e l'idea dell'animazione si passa all’esportazione degli elementi. Il modo più semplice e veloce è salvare immagini in formato .jpg o .png (nel caso di trasparenze) e importarle nel programma che si vuole utilizzare per realizzare l'animazione.

Google mette a disposizione Google Web Designer (GWD), un software totalmente gratuito che permette di realizzare (con un'interfaccia veramente intuitiva) delle creatività animate esportandole comodamente per essere pubblicate direttamente su Google ADS o in ambienti non Google.

L'impostazione del documento è fondamentale, tutti gli asset devono essere nominati in modo corretto e posizionati in modo logico all'interno della timeline per delineare al meglio la giusta sequenza degli elementi.

Impostato il documento si iniziano a muovere gli elementi lungo la timeline, un frame a destra, un frame a sinistra e ci siamo! Abbiamo la prima animazione!

Il primo play

Tendenzialmente il primo start è una catastrofe, quello che avevi in mente si disfa inesorabilmente nonostante lo studio millimetrico dei fotogrammi chiave.

Casa che crolla

Il segreto è che si deve giocare sul filo del decimo di secondo.

Per quanto riguarda le interpolazioni bisogna ricordarsi che il movimento degli elementi ha una doppia valenza, oltre ad animare il banner deve avere la capacità di attirare l'attenzione durante la navigazione dell'utente.

Rework infiniti

A ogni nuovo start bisogna preparare i popcorn e mettersi comodi riguardandolo più e più volte, perché a ogni loop dell'animazione si notano i difetti e le imperfezioni e con un po’ di pazienza e infiniti rework si arriva al punto in cui tutto si allinea perfettamente.

Uomo mangia enorme sacchetto di popcorn

Tutto bello e tutto perfetto, ma è facile con un formato di 300x600 in verticale. Ora rifai tutto incastrando gli elementi in un 320x100 orizzontale per mobile. In bocca al lupo!