SPECIFICHE TECNICHE FORMATI PUBBLICITARI WEB

Transcript

1 SPECIFICHE TECNICHE FORMATI PUBBLICITARI WEB INDICE 1. Introduzione 2. Tempistiche Consegna Materiali 3. Reportistica 4. Redirect 5. Tipo Banner 5.1 Gif/Jpg 5.2 Flash 5.3 Flash Video Skin 5.4 Flash Video 300x250 / 300x Formati Pubblicitari 6.1 Cover 6.2 Skin video 6.3 SkinPage 6.4 Page 6.5 Interstitial 6.6 Dem 6.7 Dem Multiclient 6.8 Newsletter 6.9 Boxlink 6.10 Vertical Screen Video 6.11 Redirect Video Speciali (Xvideo Mvideo Tweb Tlux) 6.12 Skin Page Riders 6.13 Manchette Riders 6.14 ewall 6.15 Gallery Interstitial 6.16 App Gioia 6.17 Box Details 6.18 Marieclaire Mobile Pag

2 1. Introduzione Lo scopo del 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: Deve essere fornita la URL di puntamento, ossia l indirizzo Internet a cui deve essere reindirizzato il navigatore quando clicca sull immagine e/o testo. 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 comunque il diritto di rifiutare creatività non ritenute idonee A parte casi particolari, cui si rimanda a paragrafi dedicati, si accettano generalmente creatività in rotazione per un massimo di 5 soggetti per le campagna settimanali e massimo 2 soggetti per le campagne giornaliere. 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 con dei test. 2. Tempistiche consegna materiali I materiali devono essere consegnati almeno 4 giorni lavorativi prima della messa online; se tali tempistiche non dovessero essere rispettate, la campagna potrebbe subire dei ritardi nella messa online. 3. Reportistica I dati di reportistica sono forniti da HEARST magazines Italia tramite piattaforma Dart Doubleclick ; per le campagne di Marketing la piattaforma di riferimento è invece Contact Lab. Particolari esigenze di tracciamento devono essere comunicate preventivamente e saranno gestite caso per caso. 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 serve per evitare problemi 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) I Tag in Redirect non devono avere script o div con stili in linea La campagna in redirect con creatività flash Medium Rectangle, Half Page o Leaderboard I video ES di codice generato dalla redirect: deve contenere solo: object/embed object/embed, video <object width=.." height=.."> <param name="movie" value= nome_video.swf > </param> <param name="allowfullscreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param> <embed src= video.swf" wmode="transparent" type="application/x-shockwave-flash width=.." height=.." allowscriptaccess="always" allowfullscreen="true"> </embed> </object> Non è consentita la gestione in redirect dei seguenti formati: Background Boxlink html Maxi Banner Gioia e Riders DEM Negli altri casi la redirect è ammessa, ma le creatività devono comunque rispondere alle specifiche indicate per lo specifico formato.; il redirect è ammesso per il formato Header in total redirect. È possibile fornire un pxl di tracciamento per il conteggio delle impression (pxltracker) e dei click (clickcommand) delle singole creatività. L espansione nelle creatività in redirect è ammessa solo al click con Audio ON dopo l espansione. Per quel che riguarda il tracciamento dell Header nelle skin, se non viene fornito un tag apposito, inseriremo quello fornito per la skin, e conteggeremo 2 volte le relative impression. N.B. : Coloro che utilizzano un AdServer Dart dovranno consegnare l internal redirect. 2

3 5. Tipo Banner 5.1 Gif/Jpg Per il peso dei file vale la seguente tabella riassuntiva: Formato Dimensioni Peso Massimo Leaderboard 728x90 70 Kb MPU 300x Kb Half Page 300x Kb Per le creatività flash i filmati devono essere salvati almeno due versioni precedenti rispetto all ultima versione in uso di flahs player. Per il peso dei file SWF vale la seguente tabella riassuntiva: Formato Dimensioni Peso Massimo Leaderboard 728x90 70 Kb MPU 300x Kb Half Page 300x Kb Flash Il banner flash, per operare correttamente, quando l'utente clicca sulla creatività deve essere reindirizzato al sito del cliente e il sistema deve aver contato il click. Per far ciò il codice.fla del filmato deve contenere nella scena iniziale, sul livello principale, un'area bottone trasparente che copra l intera dimensione con l'azione riportata qui di seguito: on (release) { geturl(_level0.clicktag,"_blank"); } N.B.: _level0.clicktag deve essere inserito senza apici in quanto variabile globale. È vietato l uso di Action Script 3. Espandibili: deve avvenire al click le verso il basso a sinistra (solo per Elle il secondo posizionamento si espande verso il basso a destra) ad un formato di 600x600 pxl peso massimo 90Kb; all espansione la creatività può avere l audio in ON; per evitare il carico eccessivo della cpu, il frame rate dei filmati swf non deve superare i 18 fps - La creatività dovrà essere in redirect. Deve essere sempre fornita anche un immagine (gif/jpg di uguale dimensione e peso) come backup nel caso in cui l'utente non riesca a visualizzare il filmato flash perché non dispone dell'apposito plug-in o il browser non supporti javascript. Deve essere fornita, a parte, l URL da attivare cliccando sul banner per l'indirizzamento al sito del cliente. È consentito l'inserimento di audio, ma deve essere attivabile e disattivabile esclusivamente dall'utente attraverso un comando on/off o un tasto play.; il banner deve comunque iniziare con l'animazione in modalità audio off Flash Video Skin Il filmato.swf non deve superare 2 MB, in caso contrario sarà gestito in redirect La gestione del video prevede l'attivazione del comando Clicktag come descritto nella realizzazione delle creatività flash standard del capitolo 5.2 Per evitare il carico eccessivo della cpu, il frame rate del filmato non deve superare i 18 fps. Il contenuto video deve iniziare in modalità "audio off", attivabile dall'utente tramite comando inserito nel file swf. Deve essere sempre fornita anche un immagine (gif/jpg di uguale dimensione e peso) come backup nel caso in cui l'utente non riesca a visualizzare il filmato flash perché non dispone dell'apposito plug-in o il browser non supporti javascript. In caso di Video in redirect: Per un corretto inserimento e visualizzazione della campagna, inserire i seguenti tag param all interno dell object (in cui è necessario inserire le dimensioni corrette del video) : <object width=.." height=.."> <param name="movie" value= nome_video.swf > </param> <param name="allowfullscreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param> <embed src= video.swf" wmode="transparent" type="application/x-shockwave-flash width=.." height=.." allowscriptaccess="always" allowfullscreen="true"> </embed> </object> I nostri formati pubblicitari non sono ottimizzati per le versioni di IE8 o precedenti 3

4 5.4 Flash Video 300x250 / 300x600 Per la messa online di questo formato si richiede la consegna di un file swf con le seguenti caratteristiche: Deve essere realizzato secondo le specifiche del formato banner flash standard (relativamente alla gestione del link) on (release) { geturl (_level0.clicktag, "_blank"); } Deve richiamare in modalità progressive download un file video esterno in formato flv di durata max 15 secondi e peso da concordare (preferibilmente da 1 a 2 Mb max). Il sorgente.fla deve contenere sul action script var flv_url il seguente link di richiamo al nostro Server che eroga il video questo link: Per Elle " Per MarieClaire " Per Cosmopolitan " Si richiede comunque la consegna del file sorgente.fla Si richiede l URL da attivare cliccando sul filmato per l'indirizzamento al sito del cliente. Il contenuto video deve iniziare in modalità "audio off", attivabile dall'utente tramite comando inserito nel file swf. È possibile prevedere l'inserimento dei comandi stop e play nel file swf che gestisce la visualizzazione del contenuto video. 6. Formati Pubblicitari Nei paragrafi seguenti sono presenti le tabelle riassuntive relative a dimensioni e pesi accettati per le diverse creatività. 1. Video Header 2. Skin video 3. SkinPage 4. Page 5. Interstitial 6. Dem 7. Newsletter 8. Boxlink 9. Vertical Screen Video 10. Cucina Italiana 11. Redirect Video Speciali (Xvideo Mvideo Tweb Tlux) 12. Skin Page Gioia e Riders 13. Manchette Riders 14. ewall 15. FlipAdv 16. App Gioia 4

5 6.1 Cover La Cover consiste in uno sfondo cliccabile comprensivo di un player video di grandi dimensioni inserito nell header + banner a scelta tra Medium Rectangle e Half Page di numero variabile: Elle, ElleDecor 4 box nelle home di sezione 2 box nelle pagine interne e in homepage generica Marieclaire Cosmopolitan, 2 box in tutto il sito ShoppingDonna VeryCool, LetteraDonna, Gioia 1 box in tutto il sito Il logo del sito appare in trasparenza sopra la creatività del cliente (la sovrapposizione del logo sito con la creatività cliente è salvo approvazione editoriale; in caso di mancata approvazione l editore si riserva di inserire uno sfondo bianco a parziale copertura, previa approvazione del cliente) Per tutti i siti è necessario fornire la URL di destinazione BACKGROUND E necessario fornire un immagine di background che segua le seguenti specifiche: Peso massimo: 100 kb Tipo file: gif o jpg Dimensioni totali creatività tutti i siti x 600 pxl o x 800 pxl Dimensioni area visibile header tutti i siti 360 pxl (+35pxl LetteraD) in altezza comprensivo del Logo del sito Dimensioni contenitore Elle / ElleDecor / Gioia responsive editoriale Sito Shoppingdonna responsive MarieClaire pxl Cosmopolitan pxl VeryCool / LetteraD 983 pxl NOTA: larghezza minima visibile Elle / ElleDecor / Gioia responsive a lato del sito Shoppingdonna responsive con risoluzione a 1200 pxl MarieClaire 100 pxl Cosmopolitan 100 pxl VeryCool / LetteraD 108 pxl Per una corretta visualizzazione della creatività da parte di tutti gli utenti è necessario che gli elementi importanti della creatività (ad esempio loghi o testi) stiano all interno di una larghezza massima di 1200 pxl; su Elle l immagine del background è responsive. Si consiglia di posizionare i contenuti principali al centro dell header in alto, visualizzabile con tutte le risoluzioni, e di inserire contenuti secondari (meglio non testuali) ai lati. Fornire il Codice colore del background in formato esadecimale da impostare come sfondo della pagina per permettere la colorazione anche oltre le dimensioni 1400x600 per eventuali utenti con schermi ad alta risoluzione. L immagine di fondo deve essere continuativa con il sito, perciò non è necessario inserire bordi colorati che fungono da contorno del sito. Si richiede di fornire un immagine completa e senza il buco corrispondente allo spazio editoriale; è ASSOLUTAMENTE VIETATO inserire il contenitore bianco del sito quindi l immagine deve essere continua (vedi esempio sotto) P.S.: per tutti i siti tranne che Marieclaire, nella versione mobile saranno visibili solo i Medium Rectangle 300x250pxl MEDIUM RECTANGLE Dimensioni : 300x250 pxl o 300x600 pxl Formato: gif o jpg o.swf I banner in formato.swf devono seguire le specifiche del capitolo 5.2 a pagina 3. VIDEO Il video all interno dell header avrà le seguenti dimensioni tutti i siti: IMMAGINE DI FONDO CONTINUATIVA NEL SITO 962 x 360 pxl IMMAGINE DI FONDO CONTINUATIVA L audio è ammesso alla partenza sempre in OFF con passaggio ad ON consentito solo al click utente su apposito bottone; deve essere sempre possibile la disattivazione da ON a OFF. Posizione icona audio nell angolo in alto a destra. Per la gestione del filmato e del click seguire le specifiche del capitolo 5 È essenziale che l immagine sfumi sia sotto che ai lati ad un singolo colore. In questo modo, attribuendo il codice colore di sfondo, la skin avrà un risultato ottimale e in armonia con il look&feel del sito. I nostri formati pubblicitari non sono ottimizzati per le versioni di IE8 o precedenti 5

6 COVER Esempio Grafico clicca qui ELLE, ElleDecor 2 COLONNE (ipad) 3 COLONNE 962x360px 962x360px 6

7 COVER Esempio Grafico clicca qui MARIECLAIRE 7

8 COVER Esempio Grafico clicca qui COSMOPOLITAN LOGO IN TRASPARENZA LOGO CON SFONDO BIANCO 962x360px 962x360px 8

9 COVER Esempio Grafico VeryCool LOGO IN TRASPARENZA 962x360px 9

10 COVER Esempio Grafico LetteraD LOGO IN TRASPARENZA 962x360px 10

11 COVER Esempio Grafico ShoppingDonna 11

12 COVER Esempio Grafico Gioia 12

13 6.2 Skin Video La Skin Video consiste in uno sfondo cliccabile comprensivo di un player video, inserito nell header + banner a scelta tra Medium Rectangle e Half Page di numero variabile: Elle, ElleDecor 4 box nelle home di sezione 2 box nelle pagine interne e in homepage generica Marieclaire Cosmopolitan, 2 box in tutto il sito ShoppingDonna VeryCool, LetteraDonna, Gioia 1 box in tutto il sito Il logo del sito appare in trasparenza sopra la creatività del cliente (la sovrapposizione del logo sito con la creatività cliente è salvo approvazione editoriale; in caso di mancata approvazione l editore si riserva di inserire uno sfondo bianco a parziale copertura, previa approvazione del cliente) Per tutti i siti è necessario fornire la URL di destinazione BACKGROUND E necessario fornire un immagine di background che segua le seguenti specifiche: Peso massimo: 100 kb Tipo file: gif o jpg Dimensioni totali creatività tutti i siti x 600 pxl o x 800 pxl Dimensioni area visibile header tutti i siti 300 pxl in altezza comprensivo del Logo del sito Dimensioni contenitore Elle / ElleDecor / Gioia responsive editoriale Sito Shoppingdonna responsive MarieClaire pxl Cosmopolitan pxl VeryCool / LetteraD 983 pxl NOTA: larghezza minima visibile Elle / ElleDecor / Gioia responsive a lato del sito Shoppingdonna responsive con risoluzione a 1200 pxl MarieClaire 100 pxl Cosmopolitan 100 pxl VeryCool / LetteraD 108 pxl Per una corretta visualizzazione della creatività da parte di tutti gli utenti è necessario che gli elementi importanti della creatività (ad esempio loghi o testi) stiano all interno di una larghezza massima di 1200 pxl; su Elle l immagine del background è responsive. Si consiglia di posizionare i contenuti principali al centro dell header in alto, visualizzabile con tutte le risoluzioni, e di inserire contenuti secondari (meglio non testuali) ai lati. È essenziale che l immagine sfumi sia sotto che ai lati ad un singolo colore. In questo modo, attribuendo il codice colore di sfondo, la skin avrà un risultato ottimale e in armonia con il look&feel del sito. Fornire il Codice colore del background in formato esadecimale da impostare come sfondo della pagina per permettere la colorazione anche oltre le dimensioni 1400x600 per eventuali utenti con schermi ad alta risoluzione. L immagine di fondo deve essere continuativa con il sito, perciò non è necessario inserire bordi colorati che fungono da contorno del sito. Si richiede di fornire un immagine completa e senza il buco corrispondente allo spazio editoriale; è ASSOLUTAMENTE VIETATO inserire il contenitore bianco del sito quindi l immagine deve essere continua (vedi esempio sotto) P.S.: per tutti i siti tranne che Marieclaire, nella versione mobile saranno visibili solo i Medium Rectangle 300x250pxl MEDIUM RECTANGLE Dimensioni : 300x250 pxl o 300x600 pxl Formato: gif o jpg o swf I banner in formato.swf devono seguire le specifiche del capitolo 5.2 a pagina 3. VIDEO Il video all interno dell header avrà le seguenti dimensioni tutti i siti: IMMAGINE DI FONDO CONTINUATIVA NEL SITO 400 x 225 pxl IMMAGINE DI FONDO CONTINUATIVA L audio è ammesso alla partenza sempre in OFF con passaggio ad ON consentito solo al click utente su apposito bottone; deve essere sempre possibile la disattivazione da ON a OFF. Posizione icona audio nell angolo in alto a destra. Per la gestione del filmato e del click seguire le specifiche del capitolo 5 I nostri formati pubblicitari non sono ottimizzati per le versioni di IE8 o precedenti 13

14 SKIN VIDEO Esempio Grafico clicca qui ELLE, ElleDecor 2 COLONNE (ipad) 3 COLONNE 400x225px 234px 400x225px 300px 14

15 SKIN VIDEO Esempio Grafico clicca qui MARIECLAIRE 15

16 SKIN VIDEO Esempio Grafico clicca qui COSMOPOLITAN LOGO IN TRASPARENZA LOGO CON SFONDO BIANCO 400x225px 300px 400x225px 300px 16

17 SKIN VIDEO Esempio Grafico VeryCool LOGO IN TRASPARENZA 400x225px 300px 17

18 SKIN VIDEO Esempio Grafico LetteraD LOGO IN TRASPARENZA 400x225px 300px 18

19 SKIN VIDEO Esempio Grafico ShoppingDonna 400x225px 300px 19

20 SKIN VIDEO Esempio Grafico Gioia 400x225px 300px 20

21 6.3 Skin Page La Skin Page consiste in un background cliccabile + banner a scelta tra Medium Rectangle e Half Page di numero variabile: Elle, ElleDecor 4 box nelle home di sezione 2 box nelle pagine interne e in homepage generica Marieclaire Cosmopolitan, 2 box in tutto il sito ShoppingDonna VeryCool, LetteraDonna, Gioia 1 box in tutto il sito Il logo del sito appare in trasparenza sopra la creatività del cliente (la sovrapposizione del logo sito con la creatività cliente è salvo approvazione editoriale; in caso di mancata approvazione l editore si riserva di inserire uno sfondo bianco a parziale copertura, previa approvazione del cliente) Per tutti i siti è necessario fornire la URL di destinazione BACKGROUND E necessario fornire un immagine di background che segua le seguenti specifiche: Peso massimo: 100 kb Tipo file: gif o jpg È essenziale che l immagine sfumi sia sotto che ai lati ad un singolo colore. In questo modo, attribuendo il codice colore di sfondo, la skin avrà un risultato ottimale e in armonia con il look&feel del sito. Fornire il Codice colore del background in formato esadecimale da impostare come sfondo della pagina per permettere la colorazione anche oltre le dimensioni 1400x600 per eventuali utenti con schermi ad alta risoluzione. L immagine di fondo deve essere continuativa con il sito, perciò non è necessario inserire bordi colorati che fungono da contorno del sito. Si richiede di fornire un immagine completa e senza il buco corrispondente allo spazio editoriale; è ASSOLUTAMENTE VIETATO inserire il contenitore bianco del sito quindi l immagine deve essere continua (vedi esempio sotto) P.S.: per tutti i siti tranne che Marieclaire, nella versione mobile saranno visibili solo i Medium Rectangle 300x250pxl IMMAGINE DI FONDO CONTINUATIVA Dimensioni totali creatività tutti i siti x 600 pxl o x 800 pxl Dimensioni area visibile header tutti i siti 300 pxl in altezza comprensivo del Logo del sito Dimensioni contenitore Elle / ElleDecor / Gioia responsive editoriale Sito Shoppingdonna responsive MarieClaire pxl Cosmopolitan pxl VeryCool / LetteraD 983 pxl IMMAGINE DI FONDO CONTINUATIVA NEL SITO NOTA: larghezza minima visibile Elle / ElleDecor / Gioia responsive a lato del sito Shoppingdonna responsive con risoluzione a 1200 pxl MarieClaire 100 pxl Cosmopolitan 100 pxl VeryCool / LetteraD 108 pxl Per una corretta visualizzazione della creatività da parte di tutti gli utenti è necessario che gli elementi importanti della creatività (ad esempio loghi o testi) stiano all interno di una larghezza massima di 1200 pxl; su Elle l immagine del background è responsive. MEDIUM RECTANGLE Dimensioni : 300x250 pxl o 300x600 pxl Formato: gif o jpg o swf I banner in formato.swf devono seguire le specifiche del capitolo 5.2 a pagina 3. Si consiglia di posizionare i contenuti principali al centro dell header in alto, visualizzabile con tutte le risoluzioni, e di inserire contenuti secondari (meglio non testuali) ai lati. I nostri formati pubblicitari non sono ottimizzati per le versioni di IE8 o precedenti 21

22 SKIN PAGE Esempio Grafico clicca qui ELLE, ElleDecor 2 COLONNE (ipad) 3 COLONNE 234px 300px 22

23 SKIN PAGE Esempio Grafico clicca qui MARIECLAIRE 23

24 SKIN PAGE Esempio Grafico clicca qui COSMOPOLITAN LOGO IN TRASPARENZA LOGO CON SFONDO BIANCO 300px 300px 24

25 SKIN PAGE Esempio Grafico VeryCool LOGO IN TRASPARENZA 300px 25

26 SKIN PAGE Esempio Grafico LetteraD LOGO IN TRASPARENZA 300px 26

27 SKIN PAGE Esempio Grafico ShoppingDonna 300px 27

28 SKIN PAGE Esempio Grafico Gioia 300px 28

29 6.4 Page Il formato Page prevede la presenza contemporanea sulla sezione del sito pianificato di un Leaderboard nell header + banner a scelta tra Medium Rectangle e Half Page di numero variabile: Elle, ElleDecor 4 box nelle home di sezione 2 box nelle pagine interne e in homepage generica Marieclaire Cosmopolitan, 2 box in tutto il sito ShoppingDonna VeryCool, LetteraDonna, Gioia 1 box in tutto il sito 6.5 Interstitial Dimensione: x 600 pxl File:.swf,.gif o.jpg Durata: 7 sec. E necessario fornire la URL di destinazione Per la gestione del filmato e del click seguire le specifiche del capitolo 5 Per tutti i siti è necessario fornire la URL di destinazione LEADERBOARD Dimensioni 728x90pxl Formato.gif o.jpg o.swf I banner in formato.swf devono seguire le specifiche del capitolo 5.2 a pagina 3. MEDIUM RECTANGLE Dimensioni : 300x250 pxl o 300x600 pxl Formato: gif o jpg o swf I banner in formato.swf devono seguire le specifiche del capitolo 5.2 a pagina 3. Leaderboard 728x90 Medium Rectangle 300x250 Per l Esempio grafico clicca qui: ELLE MARIECLAIRE COSMOPOLITAN Per l Esempio grafico clicca qui: ELLE MARIECLAIRE COSMOPOLITAN I nostri formati pubblicitari non sono ottimizzati per le versioni di IE8 o precedenti 29

30 6.6 DEM Specifiche generali: 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. ; &, <, >, ); 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 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"). 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. à). 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=" 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" " 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. 30

31 6.7 DEM Multiclient Esempio grafico per la creazione dell immagine: Specifiche generiche valide per Cosmo Elle/Elle-network e Marieclaire: Si richiedono solo immagini composte e url di destinazione le Immagini dovranno avere lo sfondo bianco LEADERBOARD Dimensioni altezza 300pxl larghezza 250pxl Formato.gif o.jpg DPi x250px N.B.: le creatività composte da due immagini, dovranno occupare comunque uno spazio totale come fosse un immagine intera (ad esempio potranno essere inviate o 2 immagini con Width 150px e Height 250px, o 2 immagini di Width 300px e Height 125px) testo allineato sempre a sinistra: Font Titolo : Arial 18px Maiuscolo e in bold Font testo: Arial 14px minuscolo ELLE.it/Ellenetwork COLOR TITOLO: #F20000 COLOR TESTO: # x250px MARIECLAIRE.it COLOR TITOLO: #FF0000 COLOR TESTO: # COSMOPOLITAN.it COLOR TITOLO: #ed008b COLOR TESTO: # P.S.: nel caso di due immagini e due url specificare a quale immagine agganciare ogni url 300x250px 31

32 6.8 Box Newsletter Sito Formato Dimensioni Elle, Cosmopolitan, MarieClaire, Riders ShoppingDonna Medium Rectangle Medium Rectangle Banner in formato.gif e.jpg (No Flash) Non si accettano banner in modalità redirect. 300x x300 Peso Massimo 25 Kb 25 Kb Non sono richieste specifiche tecniche particolari nel caso di questo tipo di creatività, se non il vincolo di attenersi a dimensioni e peso, oltre alla segnalazione della URL della pagina da raggiungere cliccando sul banner. 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). Medium Rectangle 300x250 Medium Rectangle 300x Medium Rectangle 300x250 Medium Rectangle 300x250 32

33 6.9 Boxlink Elle ElleDecor Gioia - ShoppingDonna All interno del sito, il cliente ha la possibilità di inserire un banner in formato html che rispecchi le seguenti caratteristiche: BANNER IN FORMATO HTML (IMMAGINE + TESTO): 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 MarieClaire All interno del sito, il cliente ha la possibilità di inserire un banner in formato html che rispecchi le seguenti caratteristiche: BANNER IN FORMATO HTML (IMMAGINE + TESTO): Dimensioni Immagine 120x90 + testo 120 caratteri (comprensivi degli spazi) Peso massimo 20 kb File.gif statica o.jpg Url di destinazione Cosmopolitan All interno del sito, il cliente ha la possibilità di inserire un banner in formato html che rispecchi le seguenti caratteristiche: BANNER IN FORMATO HTML (IMMAGINE + TESTO): Dimensioni Immagine 80x80 + testo 70 caratteri (comprensivi degli spazi) Peso massimo 20 kb File.gif statica o.jpg Url di destinazione VeryCool - LetteraD All interno del sito, il cliente ha la possibilità di inserire un banner che rispecchi le seguenti caratteristiche: BANNER IN FORMATO HTML (IMMAGINE + TESTO): 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 Gioia formato HTML Cosmopolitan formato HTML Elle, ElleDecor, ShoppingDonna formato HTML MarieClaire formato HTML VeryCool LetteraD formato HTML 33

34 6.10 Vertical Screen Video (Elle MarieClaire Cosmopolitan - Criticità Browser) Esempio di Background Materiale da fornire I materiali che è necessario ricevere per la messa online del formato Vertical Screen Video di Elle.it e MarieClaire.it sono un background + un video. È inoltre necessario fornire la URL di destinazione Non è consentita la Redirect. BACKGROUND E necessario fornire un immagine statica di background Dimensioni totali creatività Tutti i Siti x 950 pxl Per una corretta visualizzazione della creatività da parte di tutti gli utenti è necessario che gli elementi importanti della creatività (ad esempio loghi e Testi) siano collocati in basso a destra. I loghi dovranno essere contenuti (partendo dal bordo in basso a destra) tra un altezza massima di 240pxl (Height ) e una larghezza massima di 207pxl (Width). E essenziale che l immagine sfumi sia sopra che a sinistra ad un singolo colore. In questo modo, attribuendo il codice colore di sfondo, la creatività avrà un risultato ottimale e in armonia con il look&feel del sito. L immagine di fondo deve essere continuativa con il sito, perciò non è necessario inserire bordi colorati che fungono da contorno del sito. Peso massimo: 100 kb Tipo file: gif o jpg Codice colore in formato esadecimale da impostare come sfondo della pagina. VIDEO da fornire Dimensioni totali creatività tutti i Siti 573 x 324 pxl È necessario fornire tre file.mp4 +.ogg theora (il file swf (per explorer 8) viene generato dallo script tramite.mp4) +.webm. È essenziale che i file del video non contengano Icone ne pulsanti start&stop e audio (i pulsanti verranno creati direttamente da noi). Peso massimo: 5 MB Tipo file necessari:.mp4 +.ogg theora +.webm Durata massima: 3 minuti I nostri formati pubblicitari non sono ottimizzati per le versioni di IE8 o precedenti 34

35 Criticità Browser Il video e la skin effettuano un resize automatico in base alla risoluzione del monitor; Ii video parte in automatico senza audio (sono presenti il pulsante audio on/off e il pulsante replay); la navigazione del sito continua indipendentemente dal video. Visualizzazione ottimale monitor 1280x1024 (4:3) 1024x600 (16:9) In alcuni casi limite (es:1280x600-2:1) il video si potrebbe sovrapporre a parte della skin. Criticità Altri Dispositivi Per la versione mobile di Elle la skin non è prevista. iphone Resize in automatico, per visualizzare il video bisogna cliccare play (sui sistemi Apple la gestione di qualsiasi azione è accompagnata dal touch). Il video si apre a tutto schermo, dunque l utente può decidere di: Guardare l intero video Chiudere la finestra del video con done/fine, In questo modo non sarà più visualizzato Compatibilità Browser PC/MEC BROWSER PC Mozilla Firefox (dalla versione 11) Chrome (dalla versione 18) Explorer 8 Explorer 9 COMPATIBILITA TOTALE V V *Il video e lo sfondo sono visualizzati ma non possono fare il resize, browser obsoleto. V COMPATIBILITA PARZIALE* X PERCHÉ CHIUDERE IL VIDEO CON IL TASTO DONE INVECE DI UTILIZZARE IL TASTO PAUSA: Con il tasto chiudi il video si ripresenta ogni qual volta l utente compie un azione / navigazione, diventando invasivo con l apertura a tutto schermo del player e non permettendo all utente di compiere nessun altra azione, prima di aver completato l intera visualizzazione del video. ipad Compatibilità ottimale, uguale a un browser web. Differenza nella navigazione, per attivare il video, l azione è gestita da un touch su play. Android phone Identica a un browser web. BROWSER MaC Mozilla Firefox (dalla versione 11) Chrome (dalla versione 18) Safari (dalla versione 5.1) Explorer 8 Explorer 9 COMPATIBILITA TOTALE *Il video e lo sfondo sono visualizzati ma non possono fare il resize, browser obsoleto. COMPATIBILITA PARZIALE* I browser e le versioni non comprese nelle liste di cui sopra, non sono testati. V V V V X Compatibilità DISPOSITIVO dispositivi APPLE E ANDROID COMPATIBILITA TOTALE iphone 4S - 5 V iphone 3G IPad V Android phone * dispositivo obsoleto. I dispositivi non inclusi nella lista di cui sopra non sono testati. COMPATIBILITA PARZIALE* Lista completa compatibilità HTML5/CSS3: V X 35

36 Vertical Screen Video Esempio Grafico clicca qui ELLE 36

37 Vertical Screen Video Esempio Grafico clicca qui MARIECLAIRE 37

38 Vertical Screen Video Esempio Grafico clicca qui COSMOPOLITAN 38

39 6.11 Redirect Video Speciali (Xvideo Mvideo Tweb Tlux) Xvideo Il formato MPU si apre in automatico quando l utente apre la pagina e poi si ri-collassa dopo 4 secondi dalla partenza del video Dimensioni di partenza: 300x250pxl Dimensione espansione: 800x800pxl MAX Formato redirect.swf Tipo di espansione : per tutti i siti ad esclusione di Elle l espansione avviene : verso il basso verso sinistra per Elle.it l espansione avviene a secondo del posizionamento: Primo e Terzo box in pagina Secondo e Quarto box in pagina Si ri-espande al click con Audio On Si chiude con un pulsante di chiusura verso il basso verso sinistra verso il basso verso destra Tweb Formato MPU con espansione al click e audio in ON una volta espanso. Dimensioni di partenza: 300x250pxl Dimensione espansione: 800x800pxl MAX Formato redirect.swf Tipo di espansione : per tutti i siti ad esclusione di Elle l espansione avviene : verso il basso verso sinistra per Elle.it l espansione avviene a secondo del posizionamento: Primo e Terzo box in pagina verso il basso verso sinistra Secondo e Quarto box in pagina verso il basso verso destra Si chiude con un pulsante di chiusura Xvideo CHIUSO Tweb ESPANSO Xvideo ESPANSO Tweb CHIUSO 39

40 MVideo REVERSE EXPANDING Il formato MPU expanso si apre in automatico quando l utente apre la pagina e poi si ri-collassa dopo 4 secondi dalla partenza del video Dimensioni di partenza: 300x250pxl Dimensione espansione: 800x800pxl MAX Formato redirect.swf Tipo di espansione : per tutti i siti ad esclusione di Elle l espansione avviene : verso il basso verso sinistra per Elle.it l espansione avviene a secondo del posizionamento: Primo e Terzo box in pagina Secondo e Quarto box in pagina verso il basso verso sinistra verso il basso verso destra Tlux Elle.it e Marieclaire.it Formato masthead a frequenza 1 al giorno, con espansione Fullbrowser al click e pulsante di replay per l espansione. Dimensioni: 1600x1024 Formato: redirect.swf Tipo di espansione: Fullbrowser Si ri-espande al click con Audio On Si chiude con un pulsante di chiusura Tlux MASTHEAD Si ri-espande a mouse over con Audio On Si chiude in modalità mouse out Mvideo ESPANSO Mvideo CHIUSO Tlux FULLBROWSER 40

41 6.12 Skin Page Riders La Skin Page si sviluppa in 2 fasi. Nella prima fase è visibile il Background (non cliccabile) + il maxi banner; nella seconda fase, il Maxi banner scompare e sono visualizzati il BackgrounD (non cliccabile) + il banner 728x90 + il banner 300x250. Per tutti i siti è necessario fornire la URL di destinazione BACKGROUND E necessario fornire un immagine di background con le seguenti dimensioni: Dimensioni totali creatività Riders-online.it x pxl MAXI BANNER Formato: gif o jpg Frequenza di visualizzazione: Durata di visualizzazione: Dimensioni: 1 volta per sessione 10 sec. 955x500 pxl Dimensioni contenitore Riders-online.it 955pxl Per una corretta visualizzazione della creatività da parte di tutti gli utenti è necessario che gli elementi importanti della creatività (ad esempio loghi o testi) stiano all interno di una larghezza massima di 1200 pxl. LEADERBOARD Dimensioni : Formato: 728x90 pxl gif o jpg o swf Si consiglia di posizionare i contenuti principali al centro dell header in alto, visualizzabile con tutte le risoluzioni, e di inserire contenuti secondari (meglio non testuali) ai lati. Peso massimo: 90 kb MEDIUM RECTANGLE Dimensioni : 300x250 pxl Tipo file: gif o jpg Formato: gif o jpg o swf Codice colore in formato esadecimale da impostare come sfondo della pagina. L immagine di fondo deve essere continuativa, perciò non è necessario inserire bordi colorati che fungono da contorno del sito. NB: I banner in formato.swf devono seguire le specifiche del capitolo 5.2 a pagina 3. 41

42 SKIN PAGE Esempio Grafico Online clicca qui Riders-online.it FASE 1 con Maxi Banner FASE 2 42

43 6.13 Manchette Riders Riders-online.it All interno del sito Riders-online.it, il cliente ha la possibilità di inserire al lato del logo del sito uno o due banner di dimensioni 160x90 che rispecchi le seguenti caratteristiche: BANNER IN FORMATO HTML (IMMAGINE + TESTO): Dimensioni Immagine 160x90 Peso massimo 20 kb File.gif o.jpg o.swf Url di destinazione Riders-online.it 43

44 6.14 ewall All interno di Elle.it, Marieclaire.it e Cosmopolitan.it, il cliente ha la possibilità di inserire, un formato pubblicitario molto impattante, nel contesto editoriale del sito. Resolution max 1920 x1080pxl min 1280 x 720pxl (o scala in proporzione onde evitare errori di visualizzazione) Peso massimo 500 Mb File.gif o.jpg o.swf Video formats: flv,.mp4 Length: 30 sec max (additional technical fee for ads > 30 sec) Aspect ratio: 16:9 (4:3 not supported) Codec: any Video Codecs format, excepted: ProRes 4444, HDV 720p60, Go2 Meeting 3 & 4, ER AAC LD, REDCODE Sound: off Url di destinazione È accettata URL redirection (click command) o VAST redirect 44

45 6.15 Gallery Interstitial All interno di Elle.it, il cliente ha la possibilità di inserire, un formato pubblicitario di grandi dimensioni, nella navigazione a slide delle Gallery, a sfondo nero integrato ai contenuti del sito. Dimensioni 550x550pxl Peso Max 90Kb Formato.gif o.jpg o.swf I banner in formato.swf devono seguire le specifiche del capitolo 5.2 a pagina 3. Url di destinazione 45

46 6.16 AppGioia Sull App di Gioia (visibile solo su ios), è possibile inserire una splashpage con tasto x di chiusura posizionato in alto, che appare all utente prima dei contenuti di Gioia. Non è consentito il pxl tracker per il conteggio delle impression ma solo il clickcommand SplashPage Peso massimo: 80 kb Tipo file:.gif o.jpg Mandare due creatività di dimensioni: 320x480 pxl portrait 480x320 pxl landscape Url di destinazione N.B.: il formato flash non è supportato APP Apple MEDIUM RECTANGLE Dimensioni : 300x250 pxl Peso massimo: 80 kb Tipo file:.gif o.jpg Url di destinazione N.B: Per i Tablet e ipad il sito sarà visibile fino a tre colonne Per ipad la versione Flash dei banner non è supportata 300x250pxl 46

47 6.17 Box Details possibilità di brandizzare l area Crea il tuo Elle Details con un mini-banner, all apertura della pagina, gli Utenti visualizzeranno il mini-banner insieme ai contenuti di editing della foto scelta. Box Details Peso massimo: 80 kb Tipo file:.gif o.jpg o.swf Dimensioni: 300x30 pxl Url di destinazione Box Details Box Details 47

48 6.18 Marieclaire Mobile La versione Mobile di Marieclaire, da la possibilità al cliente di inserire un Header Mobile subito sotto al menu del sito + Medium Rectangle E necessario fornire la URL di destinazione HEADER MOBILE Dimensioni : 300x100 pxl Peso : Max 60 pxl Formato: gif o jpg Esempio Grafico Marieclaire Mobile Marieclaire Mobile MEDIUM RECTANGLE Dimensioni : 300x250 pxl Peso : Max 70 pxl Formato: gif o jpg I nostri formati pubblicitari non sono ottimizzati per le versioni di IE8 o precedenti 48