32
Aggiornamento al 9 novembre 2016 Specifiche Tecniche digital Formati web

Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Aggiornamento al 9 novembre 2016

Specifiche Tecniche digital Formati web

Page 2: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 1

Sommario

1. Introduzione .................................................................................................................................................................................................................4

2. Tempistiche consegna materiali ....................................................................................................................................................................................4

3. Reportistica ..................................................................................................................................................................................................................4

4. Redirect ........................................................................................................................................................................................................................5

5. Tipi di creatività ............................................................................................................................................................................................................5

5.1 – Gif/Jpg .................................................................................................................................................................................................................................... 5

5.2 – HTML5 .................................................................................................................................................................................................................................... 6

5.3 – Video ...................................................................................................................................................................................................................................... 7

6. Formati pubblicitari .....................................................................................................................................................................................................7

6.1 SPONSOR 1 DAY STANDARD (presenza su tutti i formati con Masthead/Leaderboard e Box) ................................................................................................ 7

6.2 SPONSOR 1 DAY HERO (presenza su tutti i formati con Hero e Box) ....................................................................................................................................... 8

6.3 DOMINATION TOP VIEW STANDARD (presenza sui primi 2 formati desktop – Masthead/Leaderboard e Box - e sul primo mobile - Box) ........................... 8

6.4 DOMINATION TOP VIEW HERO (presenza sui primi 2 formati desktop - Hero e Box- e sul primo formato mobile – Hero) ................................................... 8

6.5 DOMINATION BREAKER STANDARD (presenza all'interno delle gallery listicle su 2 formati desktop- Masthead/Leaderboard e Box- e su un formato

mobile – Box) .................................................................................................................................................................................................................................. 9

6.6 DOMINATION BREAKER HERO (presenza all'interno delle gallery listicle su 2 formati desktop- Hero e Box- e su un formato mobile – hero) ..................... 9

Page 3: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 2

6.7 SINGLE FORMAT HEADER STANDARD (masthead o leaderboard su desktop / 300x250 su mobile) ....................................................................................... 9

6.8 SINGLE FORMAT HERO ADV (hero adv che si adatta in automatico sui device) .................................................................................................................... 10

6.9 SINGLE FORMAT BOX ATF ....................................................................................................................................................................................................... 10

6.10 SINGLE FORMAT BOX BTF ..................................................................................................................................................................................................... 10

6.11 INTERSCROLLER (formato solo in pagina, erogato solo su mobile con freq 1/gg per utente unico) ................................................................................... 11

6.12. MARQUEE (personalizzazione dell’header editoriale del sito – non erogato da Adserver) ................................................................................................ 11

6.13. INTERSTITIAL (formato a tutto schermo, erogato con freq 1/gg per utente unico) ........................................................................................................... 11

6.14 DEM ...................................................................................................................................................................................................................................... 12

6.15 Box Newsletter ..................................................................................................................................................................................................................... 15

6.16 Boxlink (banner in formato html immagine + testo): ........................................................................................................................................................... 15

6.17 Box Instant Article ................................................................................................................................................................................................................ 16

7. Formato speciale HERO ADV ...................................................................................................................................................................................... 17

7.1 Tempi di consegna materiali .................................................................................................................................................................................................. 17

7.2. Reportistica ............................................................................................................................................................................................................................ 17

7.3. Redirect.................................................................................................................................................................................................................................. 17

7.4. Template predefiniti .............................................................................................................................................................................................................. 18

A. HERO ADV MULTILINK CON VIDEO AL CENTRO ....................................................................................................................................................................... 18

Page 4: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 3

B. HERO ADV MULTILINK CON PHOTOGALLERY GRANDE + SOCIAL ............................................................................................................................................. 20

C. HERO ADV MULTILINK CON PHOTOGALLERY ........................................................................................................................................................................... 22

D. HERO ADV MULTILINK CON PHOTOGALLERY E-COMMERCE (SHOP NOW) ............................................................................................................................. 24

E. HERO ADV MULTILINK CON PHOTOGALLERY + VIDEO + EVENTUALI THUMB .......................................................................................................................... 26

Page 5: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 4

1. Introduzione

Lo scopo di questo documento è quello di definire le linee guida per la produzione dei materiali pubblicitari per le campagne sul media Internet.

In generale, tutte le creatività devono rispettare i seguenti requisiti:

Devono essere fornite le URL di puntamento

La URL deve corrispondere alla pagina di un sito, e non è ammesso il puntamento diretto al download di file, eseguibili o meno

L’editore si riserva il diritto di rifiutare creatività non ritenute idonee

Qualsiasi richiesta che esula da questo documento dovrà essere vagliata dall’ufficio tecnico e dal marketing con un preavviso che consenta di effettuare una

completa valutazione attraverso specifici test.

2. Tempistiche consegna materiali

I materiali devono essere consegnati almeno 5 giorni lavorativi prima della messa online; se tali tempistiche non dovessero essere rispettate, la campagna potrebbe subire dei ritardi nella messa online.

I materiali vanno inviati sempre al seguente indirizzo email: [email protected]; riceverai una risposta automatica che conferma l'avvenuta ricezione del tuo ticket. Accertati che l'ID del ticket rimanga nell'oggetto quando ci rispondi, in questo modo potremo rintracciare tutte le tue repliche.

3. Reportistica

I dati di reportistica sono forniti da HEARST Italia tramite piattaforma DFP. Per le campagne di E-mail Marketing la piattaforma di riferimento è invece

ContactLab. Particolari esigenze di tracciamento devono essere comunicate preventivamente e saranno gestite caso per caso.

Page 6: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 5

4. Redirect

Tutte le creatività in redirect devono essere impostate in modo che al refresh della pagina tutti gli elementi inseriti (stili, .js, ecc) dallo script redirect vengano

eliminati dalle pagine. Questo è necessario al fine di evitare problemi tecnici nelle pagine dei siti. Tale codice deve comparire SOLO UNA VOLTA in una zona

della creatività (ad esempio si potrebbe mettere nel medium-rectangle-1).

È necessario fornire redirect in formato frame per i formati Leaderboard e Masthead (nel caso di AdServer Dart fornire oltre codice Iframe anche Internal

redirect). I Tag in Redirect non devono avere script o div con stili in linea.

Non è consentita la gestione in redirect dei seguenti formati:

Background

Marquee

DEM

Newsletter

5. Tipi di creatività

5.1 – Gif/Jpg

FORMATO DIMENSIONI PESO MAX

LEADERBOARD 728x90 100 KB

MASTHEAD 970x250 100 KB

LARGE LEADERBOARD 970x90 100 KB

BOX 300x250 100 KB

HALF PAGE 300x600 100 KB

Page 7: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 6

5.2 – HTML5

È possibile fornire tag full-redirect in HTML5.

Per la creazione del pacchetto HTML5 vi suggeriamo di utilizzare Google Web Designer, compatibile con DFP e scaricabile al seguente URL: https://www.google.com/webdesigner/

Prima della pubblicazione di GoogleWebDesign, ricordarsi di andare su “Visualizza Codice” e togliere tutti i -webkit- perché creano delle incompatibilità con

alcuni Browser. Il pacchetto Html5 creato da GoogleWebDesigner, è solitamente formato da un file html, dei .js, .css e un asset di creatività:

Il pacchetto html5 non ha un limite di peso particolare; creatività particolarmente pesanti

limitano però le performance dell’adv in quanto generano difficoltà di erogazione e di

visualizzazione del banner.

N.B.: Non richiamare nel file HTML5 creatività Video (.mp4, etcc..) o in formato Flash (.fla, etc…)

Page 8: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 7

5.3 – Video

Formato: .MP4

codec Video: H264

codec Audio: AAC

peso max: 2MB

Immagine poster: .jpg o.gif o .png

Non inserire icone; i bottoni per audio e replay verranno gestiti attraverso il nostro template.

Per creare il video MP4 vi suggeriamo di utilizzare i seguenti programmi free, settando le dimensioni corrette in base alla creatività (ad esempio: per il formato

medium Rectangle, settare il formato 300x250px): Free Make Video Converter per PC: http://www.freemake.com/it/downloads/, Any Video converter per

MAC: http://www.any-video-converter.com/products/mac_video_converter_freeware/

Per tutti i siti è necessario fornire la URL di destinazione.

6. Formati pubblicitari

6.1 SPONSOR 1 DAY STANDARD (presenza su tutti i formati con Masthead/Leaderboard e Box)

CheckList

Materiali Desktop:

o File 970x250 px (Masthead) o 728x90 px (leaderboard) può essere statico o video

o File 300x250 px / 300x600 px

Materiali Mobile

o File 300x250 px che andrà in sostituzione del Masthead / Leaderboard

url di destinazione

Page 9: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 8

6.2 SPONSOR 1 DAY HERO (presenza su tutti i formati con Hero e Box)

CheckList

Materiali Desktop/Mobile

o File Hero (vedi Specifiche ad hoc Hero)

o File 300x250 px / 300x600 px

url di destinazione

Tutti i dettagli per la realizzazione del formato HERO sono disponibili al punto 7

6.3 DOMINATION TOP VIEW STANDARD (presenza sui primi 2 formati desktop – Masthead/Leaderboard e Box - e sul primo mobile - Box)

CheckList

Materiali Desktop:

o File 970x250 px (Masthead) o 728x90 px (leaderboard) può essere statico o video

o File 300x250 px / 300x600 px

Materiali Mobile

o File 300x250 px che andrà in sostituzione del Masthead / Leaderboard

url di destinazione

6.4 DOMINATION TOP VIEW HERO (presenza sui primi 2 formati desktop - Hero e Box- e sul primo formato mobile – Hero)

CheckList

Materiali Desktop/Mobile

o File Hero (vedi Specifiche ad hoc Hero)

o File 300x250 px / 300x600 px

url di destinazione

Tutti i dettagli per la realizzazione del formato HERO sono disponibili al punto 7

Page 10: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 9

6.5 DOMINATION BREAKER STANDARD (presenza all'interno delle gallery listicle su 2 formati desktop- Masthead/Leaderboard e Box- e su un formato

mobile – Box)

CheckList

Materiali Desktop:

o File 970x250 px (Masthead) o 728x90 px (leaderboard) può essere statico o video

o File 300x250 px / 300x600 px

Materiali Mobile

o File 300x250 px che andrà in sostituzione del Masthead / Leaderboard

url di destinazione

6.6 DOMINATION BREAKER HERO (presenza all'interno delle gallery listicle su 2 formati desktop- Hero e Box- e su un formato mobile – hero)

CheckList

Materiali Desktop/Mobile

o File Hero (vedi Specifiche ad hoc Hero)

o File 300x250 px / 300x600 px

url di destinazione

Tutti i dettagli per la realizzazione del formato HERO sono disponibili al punto 7

6.7 SINGLE FORMAT HEADER STANDARD (masthead o leaderboard su desktop / 300x250 su mobile)

CheckList

Materiali Desktop:

o File 970x250 px (Masthead) o 728x90 px (leaderboard) può essere statico o video

Materiali Mobile

o File 300x250 px che andrà in sostituzione del Masthead / Leaderboard

url di destinazione

Page 11: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 10

6.8 SINGLE FORMAT HERO ADV (hero adv che si adatta in automatico sui device)

CheckList

Materiali Desktop/Mobile

o File Hero (vedi Specifiche ad hoc Hero)

url di destinazione

Tutti i dettagli per la realizzazione del formato HERO sono disponibili al punto 7

6.9 SINGLE FORMAT BOX ATF

CheckList

Materiali Desktop:

o File 300x250 px / 300x600 px

Materiali Mobile

o File 300x250 px

url di destinazione

6.10 SINGLE FORMAT BOX BTF

CheckList

Materiali Desktop:

o File 300x250 px / 300x600 px

Materiali Mobile

o File 300x250 px

url di destinazione

Page 12: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 11

6.11 INTERSCROLLER (formato solo in pagina, erogato solo su mobile con freq 1/gg per utente unico)

Checklist formato Statico

Dimensioni: 320x528 pixel - PNG or GIF files at 72 dpi in your creatives (use PNG files for transparency and animations). No TIFF files.

Peso= max 100 kb

CheckList formato Video

Video 16:9

Formato .mp4

Codec Audio AAC

Codec Video H264

Width 414px (l’altezza si proporziona)

Preview Video 414x250px - Formato .jpg

Background 414x726px - Formato .png o .jpg - fornire colore fondo esadecimale (facoltativo)

Logo in formato .png trasparente - Widht max 360px - Hight max 180px

6.12. MARQUEE (personalizzazione dell’header editoriale del sito – non erogato da Adserver)

CheckList

Dimensione: 2600 x 338 px

File: .jpg

Peso: 100kb

url di destinazione

Nella creazione del formato tener conto del logo del sito (dimensione logo 485x87px) posto al centro dell’header, che si sovrapporrà all’immagine del cliente.

6.13. INTERSTITIAL (formato a tutto schermo, erogato con freq 1/gg per utente unico)

CheckList formato desktop statico o video

Dimensioni 1000x600 px

Page 13: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 12

Formato .gif o .jpg o Video

Durata: 7 sec

url di destinazione

CheckList formato mobile statico

Dimensioni: 300x460 px (se video 640x480 px)

Formato: .jpg o Video mp4

Peso : Max 100 Kb (se video max 2 mb)

Durata: 7 sec

Url di destinazione

Immagine per Start Banner:

Dimensioni : 640x300 px

Peso : Max 50 Kb

Formato: .jpg

In generale, i formati video devono seguire le specifiche del capitolo e 5.3 a pagina 6

Se il formato è mobile video, il comportamento è il seguente:

l’utente accede alla pagina del sito

si apre un overlay con un’immagine e il bottone “Play” per far partire il video.

Al click sul button “Play” parte il video: per smartphone Apple parte il player di sistema e mostra il video a pieno schermo; per alcuni smartphone

Android e Windows, parte il player in pagina

6.14 DEM

Dimensioni massima del messaggio: 2 MB

Larghezza massima table contenitore: 600px

Indicare sempre l’oggetto del messaggio (Subject); nel testo evitare l’uso di parole accentate (usare l’apostrofo) e di caratteri speciali (es. ; &, <, >, ©);

Page 14: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 13

Non è consentita la scelta dell'alias del mittente; la DEM risulta inviata dal sito a cui l'utente del cluster di invio si è registrato (es: Elle.it Consiglia,

Psychologies.it Promotion)

Non includere attachment o link a esecutivi o download.

Si richiede la consegna di un archivio zip contenente file HTML,relativa cartella di immagini, foglio di stile esterno (se utilizzato) e link di tracciamento,

già inseriti nel codice html, se si intende utilizzarne.

Si richiede inoltre la consegna di un pdf o un jpg del layout , al fine di verificare l'impaginazione.

Oltre alla creatività devono essere forniti gli indirizzi a cui si vuole che le e-mail di test siano inviate per approvazione.

Non sono ammesse immagini in redirect

Non sono ammesse immagini con scritte o elementi lampeggianti all’interno della creatività

Indicazioni per la realizzazione ottimale del messaggio:

Il messaggio deve essere realizzato in formato HTML, composto da testo e immagini o da una singola immagine + link di puntamento.

Impaginazione in modalità TABLE: limitare l'uso di DIV e CSS che non devono essere utilizzati per determinare posizioni e allineamenti degli elementi

ma solo per la formattazione dei testi.

Non usare i CSS per determinare la posizione di un elemento (es. allineamento di un'immagine o di una tabella, ecc...)

Inserire lo stile sia come CSS interno (compreso tra i tag style nella head) sia come file esterno (caricato su un server e poi linkato all'interno del

file.

Il CSS interno dovrà essere commentato (cioè tutti gli elementi del foglio di stile, esclusi i tag style devono essere compresi tra i simboli <!-- e --> )

Tutto il contenuto del messaggio va inserito all'interno di una tabella a larghezza fissa (specificando quindi la larghezza nell'attributo width del tag

table); la larghezza consigliata della tabella è di 550 pixel: in questo modo si è sicuri che non compaia la barra di scorrimento orizzontale su tutti i

principali programmi di posta e webmail.

Se avete invece l'esigenza di un layout con una larghezza maggiore, la larghezza massima che raccomandiamo è di 600 pixel: molti programmi e

webmail visualizzeranno il messaggio correttamente e (dove invece comparirà la barra di scorrimento orizzontale, sarà comunque uno scorrimento

minimo che non dovrebbe creare fastidio all'utente finale)

Non c'è una lunghezza massima imposta da limiti tecnici

E’ necessario ricordarsi di inserire un testo nel tag <title> nella <head>. Evitare di lasciare il testo di default assegnato dall'editor html (es. "Untitled1" o

"Nuova pagina 1").

Page 15: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 14

Evitare l'uso di immagini di sfondo che potrebbero non essere visualizzate ed evitare di scrivere il testo in bianco o comunque dello stesso colore dello

sfondo del body, colore che potrebbe non essere visualizzato rendendo illeggibile il contenuto.

Si consiglia di evitare di inserire solamente immagini nell'html: questa scelta aumenterebbe di molto la probabilità che il messaggio finisca

nell'antispam; meglio inserire testo scritto per garantire la lettura del contenuto anche agli utenti che bloccano la visualizzazione delle immagini. Le

immagini molto grandi andrebbero divise in due o più parti e poi composte usando una tabella (tag table).

Elementi da evitare:

Assegnare ad ogni immagine un nome significativo di quel che rappresenta: evitare dunque nomi del tipo : 001.gif, 002.gif, o foto1.jpg, foto2.jpg

ecc.. Questo accorgimento diminuisce il rischio che il messaggio venga considerato spam.

Evitare le lettere accentate digitate da tastiera: meglio sostituirle con la vocale non accentata seguita da apostrofo; oppure con gli appositi codici

html (es. &agrave;). Fare attenzione ai caratteri di MS Word (es. le virgolette, i puntini sospensivi, i trattini e gli apostrofi di Word sono da sostituire

con i corrispettivi simboli digitati da tastiera).

Evitare immagini mappate. Non inserire immagini che contengono una mappa. Al loro posto, dividere l'immagine, comporla in una tabella e linkare

i singoli pezzi.

Evitare Javascript. Non inserire javascript nell'HTML del messaggio.

Evitare Flash. Non inserire file flash (.swf) nell'HTML. Se è proprio necessario inserire elementi in movimento, usare le gif animate.

Non mettere come testo l'url del link. Ad esempio, evitare link del tipo <a href="http://www.nomesito.it">www.nomesito.it</a>. perché alcuni

programmi di posta diffusi, tra cui Thunderbird, effettuano un controllo antiphishing che potrebbe segnalare come sospetto un link del genere.

Le immagini saranno caricate su un server e poi inserite nel messaggio nell'attributo src del tag img. Il formato deve essere jpg o gif (può essere anche

una gif animata). Non è consentito l’uso di immagini mappate. Ogni immagine dovrebbe pesare il meno possibile per rientrare nel limite complessivo di

peso consigliato (vedi sotto punto 6).

Per la corretta visualizzazione con GMail e Hotmail (Outlook) inserire i seguenti codici: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Negli stili esterni, interni e in linea, riguardanti il tag img, inserire l’attributo display: block Le specifiche sopra indicate permettono una corretta

visualizzazione da parte della maggioranza dei sistemi di webmail e dei programmi di posta attualmente in uso. Ovviamente ci sono dei limiti

indipendenti dalla nostra volontà (politiche dei singoli provider o produttori di software, configurazione del livello di protezione dei singoli computer)

che non abbiamo modo di risolvere. Attualmente ad esempio sono note politiche di blocco dei fogli di stile da parte di GMail e di Hotmail: in queste

webmail quindi il messaggio potrebbe risultare scomposto, pur rispettando le nostre specifiche. Problemi di visualizzazione si segnalano spesso anche

con il programma di posta della suite Lotus.

Page 16: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 15

6.15 Box Newsletter

Checklist

Banner in formato .gif e .jpg

Dimensioni: 300x250

Peso massimo: 25 kb

Non si accettano banner in modalità redirect

url di destinazione

Sono consentite .gif animate ma non ne è garantita la visualizzazione corretta su tutti i servizi di web mail. Le .gif animate devo rispettare le medesime

specifiche indicate per le .gif statiche (in particolare per quanto riguarda il peso).

6.16 Boxlink (banner in formato html immagine + testo):

Checklist Cosmopolitan – Gioia - Elle

Dimensioni Immagine 170x85 + titolo 22 caratteri (comprensivi degli spazi) + testo 95 caratteri (comprensivi degli spazi)

Peso massimo 20 kb

File .gif statica o .jpg

Url di destinazione

Checklist ElleDecor – ShoppingDonna

Dimensioni Immagine 90x90 + titolo 15 caratteri (comprensivi degli spazi) + testo 90 caratteri (comprensivi degli spazi)

Peso massimo 20 kb

File .gif statica o .jpg

Url di destinazione

Page 17: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 16

Checklist MarieClaire

Dimensioni Immagine 120x90 + testo 120 caratteri (comprensivi degli spazi)

Peso massimo 20 kb

File .gif statica o .jpg

Url di destinazione

Checklist VeryCool - LetteraD

Dimensioni Immagine 115x70 + titolo 15 caratteri (comprensivi degli spazi) + testo 90 caratteri (comprensivi degli spazi)

Peso massimo 20 kb

File .gif statica o .jpg

Url di destinazione

6.17 Box Instant Article

Checklist

Banner in formato .gif e .jpg

Dimensioni: 300x250

Peso massimo: 100 kb

url di destinazione

Non si accettano banner in modalità redirect

Page 18: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 17

7. Formato speciale HERO ADV

7.1 Tempi di consegna materiali

Il formato HERO può ospitare una campagna interattiva, multilink e multidimensionale con possibilità di prevedere contemporaneamente diversi elementi (ad

esempio photogallery, video, videogallery, thumb, bottoni social).

La creatività può essere realizzata dal cliente o dal team grafico di Hearst Italia con materiali forniti dal cliente (in questo caso è previsto un costo a listino):

HERO ADV realizzato dal Cliente _ i materiali devono essere consegnati 5 giorni lavorativi prima della messa online (i giorni si intendono dalla ricezione

corretta dei materiali da parte del cliente); se tali tempistiche non dovessero essere rispettate, la campagna potrebbe subire dei ritardi nella messa

online.

HERO ADV realizzata dal team grafico di Hearst Italia su TEMPLATE PREDEFINITI_ i materiali devono essere consegnati 15 giorni lavorativi prima della

messa online (i giorni si intendono dalla ricezione corretta dei materiali da parte del cliente); se tali tempistiche non dovessero essere rispettate, la

campagna potrebbe subire dei ritardi nella messa online

HERO ADV realizzata dal team grafico di Hearst Italia su TEMPLATE DA STUDIARE AD HOC_ le tempistiche per la ricezione dei materiali devono essere

valutate dall’ufficio traffico e dal team marketing in base alle esigenze del cliente e alla complessità delle richieste.

7.2. Reportistica

I dati di reportistica sono forniti da HEARST Italia tramite piattaforma DFP Doubleclick e piattaforma CELTRA.

Particolari esigenze di tracciamento devono essere comunicate preventivamente e saranno gestite caso per caso.

7.3. Redirect

Non è possibile erogare l’Hero ADV in modalità redirect.

È possibile fornire tag per il conteggio di impression e click.

Page 19: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 18

7.4. Template predefiniti

A. HERO ADV MULTILINK CON VIDEO AL CENTRO

L’Hero adv con video integrato consiste in un background comprensivo di un video, inserito al centro del background.

Page 20: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 19

Checklist immagine di background (l’immagine Background non è responsiva, ma si taglia ai lati a secondo della risoluzione dello schermo dell’utente):

Dimensione: 1920x300 px

Peso max: 200 kb

Formato: .gif o .jpg

Fornire logo in formato .png in trasparenza

url di puntamento

Checklist video:

Dimensione: 535x300 px

Peso max: 4 mb

Formato: .MP4

Codec video: H264

Codec audio: AAC

Durata consigliata: 15 secondi - ultimo frame non dev’essere nero

Immagine per anteprima mobile: 535x300 px - .jpg o.gif o .png - peso max 70 Kb

url di puntamento

Non è necessario inserire icone (bottoni audio e replay verranno gestiti attraverso il nostro player).

L’audio del video partirà al click; se l’utente scrolla verso il basso e poi torna indietro, il video riparte da dove si era fermato.

N.B: Nella versione mobile il video si ridimensiona

Page 21: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 20

B. HERO ADV MULTILINK CON PHOTOGALLERY GRANDE + SOCIAL

Si tratta di un template complesso che prevede un’immagine di background, una photogallery sfogliabile posizionata centralmente e i social.

L’immagine di background può essere anche un fondo colore.

Page 22: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 21

Checklist immagine di background (l’immagine Background non è

responsiva, ma si taglia ai lati a secondo della risoluzione dello

schermo dell’utente):

Dimensione: 1920x300 px

Peso max: 200 kb

Formato: .gif o .jpg

Fornire logo in formato .png in trasparenza

url di puntamento

Checklist gallery:

Dimensione: 1122x300 px

Peso max: 45 kb per ciascuna immagine

Formato: .jpg

Numero massimo di foto: consigliate massimo 10 immagini

Eventuale testo da inserire nelle immagini: max 130 caratteri (spazi inclusi) per foto

url di puntamento

Link dei Social

Le font sono regolabili per grandezza, colore e ombreggiatura; è anche possibile aggiungere delle forme grafiche (es. icona inscritta in un cerchio)

Page 23: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 22

C. HERO ADV MULTILINK CON PHOTOGALLERY

Consiste in un template complesso con un’immagine di background e una photogallery sfogliabile.

Page 24: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 23

Checklist immagine di background (l’immagine Background non è responsiva, ma si taglia ai lati a secondo della risoluzione dello schermo dell’utente):

Dimensione: 1920x300 px

Peso max: 200 kb

Formato: .gif o .jpg

Fornire logo in formato .png in trasparenza

url di puntamento

Checklist gallery:

Dimensione: 540x300 px desktop – 320x300 px mobile

Peso max: 20 kb per ciascuna immagine

Formato: .jpg

Numero massimo di foto: consigliate massimo 10 immagini

url di puntamento

Page 25: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 24

D. HERO ADV MULTILINK CON PHOTOGALLERY E-COMMERCE (SHOP NOW)

Consiste in un template complesso che prevede un’immagine di background e una photogallery sfogliabile e-commerce

Page 26: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 25

Checklist immagine di background (l’immagine Background non è responsiva, ma si taglia ai lati a secondo della risoluzione dello schermo dell’utente):

Dimensione: 1920x300 px

Peso max: 200 kb

Formato: .gif o .jpg

Fornire logo in formato .png in trasparenza

url di puntamento

Checklist gallery:

Dimensione: 540x300 px desktop – 320x300 px mobile

Peso max: 20 kb per ciascuna immagine

Formato: .jpg

Numero massimo di foto: consigliate massimo 10 immagini

url di puntamento

Page 27: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 26

E. HERO ADV MULTILINK CON PHOTOGALLERY + VIDEO + EVENTUALI THUMB

Prevede un’immagine di background, una photogallery con thumb e un player video.

Page 28: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 27

Checklist immagine di background (l’immagine Background non è responsiva, ma si taglia ai lati a secondo della risoluzione dello schermo dell’utente):

Dimensione: 1920x300 px

Peso max: 200 kb

Formato: .gif o .jpg

Fornire logo in formato .png in trasparenza

url di puntamento

Checklist gallery:

Dimensione: 400x300 px

Peso max: 25 kb per ciascuna immagine

Formato: .jpg

Numero massimo di foto: consigliate massimo 10 immagini (attenzione a non superare il peso massimo complessivo di 300kb)

Checklist thumb:

Dimensione: 127x95 px

Numero minimo di thumb: 3

Checklist video:

Dimensione: 535x300 px

Peso max: 10 mb

Formato: .MP4

Codec video: H264

Codec audio: AAC

Durata consigliata: 15 secondi – ultimo frame non dev’essere nero

Immagine per anteprima mobile: 535x300 px - .jpg o.gif o .png - peso max 70 Kb

url di puntamento

Page 29: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 28

Non è necessario inserire icone (bottoni audio e replay verranno gestiti attraverso il nostro player).

L’audio del video partirà al click; se l’utente scrolla verso il basso e poi torna indietro, il video riparte da dove si era fermato.

N.B: Nella versione mobile il video si ridimensiona

Page 30: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 29

F. HERO ADV MULTILINK CON PHOTOGALLERY + VIDEO + EVENTUALI THUMB + BOTTONI SOCIAL

Prevede un’immagine di background, una photogallery con thumb, un player video e i bottoni social.

Page 31: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 30

Checklist immagine di background (l’immagine Background non è responsiva, ma si taglia ai lati a secondo della risoluzione dello schermo dell’utente):

Dimensione: 1920x300 px

Peso max: 200 kb

Formato: .gif o .jpg

Fornire logo in formato .png in trasparenza

url di puntamento

Checklist gallery:

Dimensione: 400x300 px

Peso max: 25 kb per ciascuna immagine

Formato: .jpg

Numero massimo di foto: consigliate massimo 10 immagini (attenzione a non superare il peso massimo complessivo di 300kb)

Checklist thumb:

Dimensione: 127x95 px

Numero minimo di thumb: 3

Checklist video:

Dimensione: 535x300 px

Peso max: 10 mb

Formato: .MP4

Codec video: H264

Codec audio: AAC

Durata consigliata: 15 secondi – ultimo frame non dev’essere nero

Immagine per anteprima mobile: 535x300 px - .jpg o.gif o .png - peso max 70 Kb

url di puntamento

Page 32: Specifiche Tecniche digital - assets-it.elle.com · Hearst Italia – Specifiche tecniche digital – Formati web Pag. 4 1. Introduzione Lo scopo di questo documento è quello di

Hearst Italia – Specifiche tecniche digital – Formati web

Pag. 31

Non è necessario inserire icone (bottoni audio e replay verranno gestiti attraverso il nostro player).

L’audio del video partirà al click; se l’utente scrolla verso il basso e poi torna indietro, il video riparte da dove si era fermato.

N.B: Nella versione mobile il video si ridimensiona

Link dei Social

Le font sono regolabili per grandezza, colore e ombreggiatura; è anche possibile aggiungere delle forme grafiche (es. icona inscritta in un cerchio)