Requisiti dei banner HTML

Uno ZIP, una pagina iniziale, una misura dichiarata e tutto ciò che serve al suo interno. Il resto di questa pagina spiega cosa succede se manca uno di questi elementi.

Cosa carichi#

Un solo .zip. Al suo interno, almeno un file .html — è l’unico requisito obbligatorio, e un archivio che non lo contiene viene rifiutato con questo messaggio. Il caricamento in sé è limitato a 512 MB; il limite che incontrerai per primo è il tuo spazio, che viene contato sulla dimensione decompressa e non sull’archivio, quindi un piccolo ZIP che si espande fino a un gigabyte viene rifiutato dopo la decompressione e non viene scalato nulla dalla tua quota.

Quale pagina parte#

Un index.html al primo livello dell’archivio, se c’è. Altrimenti la piattaforma cerca una pagina qualsiasi al primo livello, poi un index.html più in profondità, poi una pagina qualsiasi — preferendo la più piccola, che quasi sempre è l’ingresso e non un componente. Una pagina contenitore che si limita a incorniciarne un’altra viene seguita fino alla pagina che incornicia, ed è così che appare un export di Adobe Animate.

Nota

Le cartelle __MACOSX e i file ._ vengono ignorati, quindi uno ZIP creato su Mac con il clic destro su una cartella funziona così com’è. Non serve rimuoverli.

Dichiara la misura#

Indica nella pagina la misura per cui è stato progettato il banner, così uno schermo può ingrandirlo senza deformarlo. Il meta tag standard viene letto per primo:

Nell’head della tua pagina iniziale

<meta name="ad.size" content="width=1080,height=1920">

Senza di esso, la piattaforma ripiega sulle dimensioni di un elemento <canvas> o sulla dichiarazione propria di un export di Animate. Se non esiste nessuna di queste, il banner non ha una misura di progetto e viene stirato fino a riempire la zona in cui va in onda — ed è così che una creatività 300×250 finisce distesa su uno schermo verticale.

Tutto dentro l’archivio#

Nessun URL esterno. Uno schermo continua a trasmettere dal proprio disco per sette giorni senza connessione, e può mettere in cache solo ciò che è arrivato nello ZIP — un font, uno script o un’immagine presi da internet sono la parte del tuo banner che resta vuota proprio nella situazione per cui esiste il player. Font, librerie e immagini viaggiano con la creatività, richiamati con percorsi relativi.

Le creatività vengono eseguite in una sandbox. Script e animazioni funzionano normalmente. Tre cose no, per scelta di progetto, e un banner che ne dipende sembrerà rotto solo su uno schermo:

Niente archiviazione. localStorage e i cookie non sono disponibili e generano un errore se usati. Un banner non può ricordare nulla tra una riproduzione e l’altra, e non dovrebbe provarci.
Niente navigazione e niente pop-up. window.open e qualsiasi tentativo di portare il player altrove sono bloccati. Uno schermo non ha un tasto Indietro, né qualcuno che lo prema.
Niente moduli. Su uno schermo nessun passante compila nulla.

Quanto dura#

Decide la playlist, non il banner. Una creatività riceve i secondi impostati per lei nella playlist e poi viene sostituita, ovunque sia arrivata la sua animazione — quindi un banner dovrebbe andare in loop, o fermarsi su un ultimo fotogramma che valga la pena guardare. Un banner non ha modo di chiedere più tempo.

Prima di inviarlo#

Apri la pagina iniziale dalla cartella decompressa, offline, con la rete disattivata. Ciò che vedi è ciò che vede uno schermo.
Controlla che la misura nel tag corrisponda a quella per cui l’hai progettato.
Lascialo girare tre volte più a lungo dello slot della playlist e guarda l’ultimo fotogramma.
Cerca richieste in uscita: strumenti per sviluppatori del browser, scheda Rete, e nulla verso un host esterno.

Un banner che funziona qui ma non sullo schermo

Quasi sempre è una di due cose: prende qualcosa da internet, oppure dipende dall’archiviazione. Entrambe funzionano sul tuo portatile, e nessuna delle due funziona nella sandbox di uno schermo che per di più può essere offline.