SKIN VIDEO Esempio Grafico Gioia

Transcript

SPECIFICHE TECNICHE
FORMATI PUBBLICITARI
WEB
INDICE
1. Introduzione
2. Tempistiche Consegna Materiali
3. Reportistica
4. Redirect
5. Tipo Banner
5.1
5.2
5.3
5.4
Gif/Jpg
Flash
Flash Video Skin
Flash Video 300x250 / 300x600
6. 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
2
2
2
3
3
3
3
4
4
5
13
21
29
29
30
31
32
33
34
39
40
41
43
44
45
46
47
48
1. Introduzione
I Tag in Redirect non devono avere script o div con stili in linea
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:
La campagna in redirect con creatività flash
deve contenere solo:

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.
 Medium Rectangle, Half Page o Leaderboard
object/embed
 I video
object/embed, video

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 E-mail 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.
ES di codice generato dalla redirect:
<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.
Tale codice deve comparire SOLO UNA VOLTA in una zona della creatività (ad esempio si potrebbe
mettere nel medium-rectangle-1)
2
Per le creatività flash i filmati devono essere salvati almeno due versioni precedenti rispetto
all’ultima versione in uso di flahs player.
5. Tipo Banner
5.1 – Gif/Jpg
Per il peso dei file SWF vale la seguente tabella riassuntiva:
Per il peso dei file vale la seguente tabella riassuntiva:
Formato
Dimensioni
Peso Massimo
Formato
Dimensioni
Peso Massimo
Leaderboard
728x90
70 Kb
Leaderboard
728x90
70 Kb
MPU
300x250
70 Kb
MPU
300x250
70 Kb
70 Kb
Half Page
300x600
70 Kb
Half Page
300x600
5.2 - Flash
5.3 - Flash Video Skin
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:

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.
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.


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>
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.
<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
5.4 – Flash Video 300x250 / 300x600
6. Formati Pubblicitari
Per la messa online di questo formato si richiede la consegna di un file swf con le seguenti
caratteristiche:
Nei paragrafi seguenti sono presenti le tabelle riassuntive relative a dimensioni e pesi accettati
per le diverse creatività.

Deve essere realizzato secondo le specifiche del formato banner flash standard
(relativamente alla gestione del link)
1.
Video Header
on (release) {
2.
Skin video
getURL (_level0.clickTag, "_blank");
3.
SkinPage
}
4.
Page
Interstitial

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).
5.
6.
Dem

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:
7.
Newsletter
Per Elle
"http://www.elle.it/files/publi/nomevideo.flv";
Per MarieClaire "http://www.marieclaire.it/files/publi/nomevideo.flv";
Per Cosmopolitan "http://www.cosmopolitan.it/files/publi/nomevideo.flv";
8.
Boxlink
9.
Vertical Screen Video
10. Cucina Italiana
11. Redirect Video Speciali (Xvideo – Mvideo – Tweb – Tlux)

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.
12. Skin Page Gioia e Riders
13. Manchette Riders
14. eWall
15. FlipAdv
16. App Gioia
4
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

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
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)
IMMAGINE DI
FONDO
CONTINUATIVA
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
Dimensioni area visibile header
tutti i siti
in altezza comprensivo del Logo del sito
Dimensioni contenitore
editoriale Sito
NOTA: larghezza minima visibile
a lato del sito
con risoluzione a 1200 pxl

IMMAGINE DI
FONDO
CONTINUATIVA
NEL SITO
1.600 x 600 pxl o 1.600 x 800 pxl
360 pxl (+35pxl LetteraD)
Elle / ElleDecor / Gioia
Shoppingdonna
MarieClaire
Cosmopolitan
VeryCool / LetteraD
responsive
responsive
1.000 pxl
1.000 pxl
983 pxl
Elle / ElleDecor / Gioia responsive
Shoppingdonna
responsive
MarieClaire
100 pxl
Cosmopolitan
100 pxl
VeryCool / LetteraD
108 pxl
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:
962 x 360 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.

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.
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.

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
COVER Esempio Grafico clicca qui ELLE, ElleDecor
2 COLONNE (iPad)
3 COLONNE
962x360px
962x360px
6
COVER Esempio Grafico clicca qui MARIECLAIRE
7
COVER Esempio Grafico clicca qui COSMOPOLITAN
LOGO IN TRASPARENZA
962x360px
LOGO CON SFONDO BIANCO
962x360px
8
COVER Esempio Grafico VeryCool
LOGO IN TRASPARENZA
962x360px
9
COVER Esempio Grafico LetteraD
LOGO IN TRASPARENZA
962x360px
10
COVER Esempio Grafico ShoppingDonna
11
COVER Esempio Grafico Gioia
12
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:
ShoppingDonna


IMMAGINE DI
FONDO
CONTINUATIVA
BACKGROUND

Peso massimo:
100 kb

Tipo file:
gif o jpg
tutti i siti
tutti i siti
editoriale Sito
300 pxl
Shoppingdonna
MarieClaire
Cosmopolitan
VeryCool / LetteraD
responsive
responsive
1.000 pxl
1.000 pxl
983 pxl
a lato del sito
Shoppingdonna
responsive
MarieClaire
100 pxl
Cosmopolitan
100 pxl
VeryCool / LetteraD
108 pxl

IMMAGINE DI
FONDO
CONTINUATIVA
NEL SITO
1.600 x 600 pxl o 1.600 x 800 pxl
MEDIUM RECTANGLE
 Dimensioni : 300x250 pxl o 300x600 pxl

Formato: gif o jpg o swf

VIDEO
 Il video all’interno dell’header avrà le seguenti dimensioni
tutti i siti:
400 x 225 pxl

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.

look&feel del sito.
13
SKIN VIDEO Esempio Grafico clicca qui ELLE, ElleDecor
2 COLONNE (iPad)
400x225px
3 COLONNE
234px
400x225px
300px
14
SKIN VIDEO Esempio Grafico clicca qui MARIECLAIRE
15
SKIN VIDEO Esempio Grafico clicca qui COSMOPOLITAN
LOGO IN TRASPARENZA
400x225px
400x225px
300px
300px
16
SKIN VIDEO Esempio Grafico VeryCool
LOGO IN TRASPARENZA
400x225px
300px
17
SKIN VIDEO Esempio Grafico LetteraD
LOGO IN TRASPARENZA
400x225px
300px
18
SKIN VIDEO Esempio Grafico ShoppingDonna
400x225px
300px
19
SKIN VIDEO Esempio Grafico Gioia
400x225px
300px
20
6.3 Skin Page
La Skin Page consiste in un background cliccabile + banner a scelta tra Medium Rectangle e Half
Page di numero variabile:
ShoppingDonna

look&feel del sito.


BACKGROUND

Peso massimo:
100 kb

Tipo file:
gif o jpg
tutti i siti
tutti i siti
IMMAGINE DI
FONDO
CONTINUATIVA
1.600 x 600 pxl o 1.600 x 800 pxl
300 pxl
editoriale Sito
Shoppingdonna
MarieClaire
Cosmopolitan
VeryCool / LetteraD
a lato del sito
Shoppingdonna
responsive
MarieClaire
100 pxl
Cosmopolitan
100 pxl
VeryCool / LetteraD
108 pxl
IMMAGINE DI
FONDO
CONTINUATIVA
NEL SITO
responsive
responsive
1.000 pxl
1.000 pxl
983 pxl
MEDIUM RECTANGLE

Dimensioni : 300x250 pxl o 300x600 pxl


21
SKIN PAGE Esempio Grafico clicca qui ELLE, ElleDecor
3 COLONNE
2 COLONNE (iPad)
234px
300px
22
SKIN PAGE Esempio Grafico clicca qui MARIECLAIRE
23
SKIN PAGE Esempio Grafico clicca qui COSMOPOLITAN
LOGO IN TRASPARENZA
300px
300px
24
SKIN PAGE Esempio Grafico VeryCool
LOGO IN TRASPARENZA
300px
25
SKIN PAGE Esempio Grafico LetteraD
LOGO IN TRASPARENZA
300px
26
SKIN PAGE Esempio Grafico ShoppingDonna
300px
27
SKIN PAGE Esempio Grafico Gioia
300px
28
6.4 Page
6.5 Interstitial
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
ShoppingDonna

Dimensione:
1.000 x 600 pxl

File:
.swf, .gif o .jpg

Durata:
7 sec.

E’ necessario fornire la URL di destinazione

LEADERBOARD

Dimensioni
728x90pxl

Formato
.gif o .jpg o .swf

MEDIUM RECTANGLE

Dimensioni : 300x250 pxl o 300x600 pxl


Leaderboard 728x90
Medium
Rectangle
300x250
Per l’Esempio grafico clicca qui:
ELLE
MARIECLAIRE
COSMOPOLITAN
Per l’Esempio grafico clicca qui:
ELLE
MARIECLAIRE
COSMOPOLITAN
29
6.6 DEM

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:
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.
 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).

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
 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.

Non sono ammesse immagini con scritte o elementi lampeggianti all’interno della creatività
 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.
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  )

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").

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.
30
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
300x250px

Dimensioni

Formato
.gif o .jpg

DPi
72
altezza 300pxl
larghezza 250pxl
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
300x250px
ELLE.it/Ellenetwork
COLOR TITOLO:
#F20000
COLOR TESTO:
#000000
MARIECLAIRE.it
COLOR TITOLO:
COLOR TESTO:
#FF0000
#000000
COSMOPOLITAN.it
COLOR TITOLO:
COLOR TESTO:
#ed008b
#000000
300x250px
P.S.: nel caso di due immagini e due url specificare a quale immagine agganciare ogni url
31
6.8 Box Newsletter
Sito
Formato
Elle, Cosmopolitan,
MarieClaire, Riders
Medium
Rectangle
Medium
Rectangle
ShoppingDonna
Dimensioni
Peso
Massimo
300x250
25 Kb
300x300
25 Kb
Medium
Rectangle
300x250
Medium
Rectangle
300x250

Banner in formato .gif e .jpg (No Flash)

Non si accettano banner in modalità redirect.

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).
32
Medium Rectangle
300x250
Medium
Rectangle
300x250
32
6.9 Boxlink
Elle – ElleDecor – Gioia - ShoppingDonna
Elle, ElleDecor,
ShoppingDonna
formato HTML
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
Gioia
formato HTML
All’interno del sito, il cliente ha la possibilità di inserire un banner in formato html che rispecchi le




Dimensioni
Immagine 120x90 + testo 120 caratteri (comprensivi degli spazi)
Peso massimo 20 kb
File
.gif statica o .jpg
Url di destinazione
MarieClaire
formato HTML
Cosmopolitan
All’interno del sito , il cliente ha la possibilità di inserire un banner in formato html che rispecchi le




Dimensioni
Immagine 80x80 + testo 70 caratteri (comprensivi degli spazi)
Peso massimo 20 kb
File
.gif statica o .jpg
Url di destinazione
VeryCool - LetteraD
Cosmopolitan
formato HTML
All’interno del sito, il cliente ha la possibilità di inserire un banner che rispecchi le seguenti
caratteristiche:




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
VeryCool
LetteraD
formato HTML
33
Esempio di Background
6.10 Vertical Screen Video (Elle – MarieClaire – Cosmopolitan - Criticità Browser)
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
Tutti i Siti
1.213 x 950 pxl
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.
VIDEO da fornire

Peso massimo:
100 kb

Tipo file:
gif o jpg

Codice colore in formato esadecimale da impostare come sfondo della pagina.
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
34
Criticità Browser
Criticità Altri Dispositivi
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.
Per la versione mobile di Elle la skin non è prevista.
Resize in automatico, per visualizzare il video bisogna cliccare play (sui sistemi Apple la
gestione di qualsiasi azione è “accompagnata” dal touch).
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.
Compatibilità Browser PC/MEC
BROWSER PC
Mozilla Firefox (dalla versione 11)
Chrome (dalla versione 18)
Explorer 8
Explorer 9
iPhone
COMPATIBILITA’
TOTALE
COMPATIBILITA’
PARZIALE*
V
V
X
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
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.
V
*Il video e lo sfondo sono visualizzati ma non possono fare il resize, browser obsoleto.
BROWSER MaC
Mozilla Firefox (dalla versione 11)
Chrome (dalla versione 18)
Safari (dalla versione 5.1)
Explorer 8
Explorer 9
COMPATIBILITA’
TOTALE
COMPATIBILITA’
PARZIALE*
V
V
V
X
V
COMPATIBILITA’
Compatibilità
dispositivi APPLE E ANDROID
DISPOSITIVO
TOTALE
iPhone 4S - 5
iPhone 3G
IPad
Android phone 2.3.5
COMPATIBILITA’
PARZIALE*
V
X
V
V
* dispositivo obsoleto.
*Il video e lo sfondo sono visualizzati ma non possono fare il resize, browser obsoleto.
I browser e le versioni non comprese nelle liste di cui sopra, non sono testati.
I dispositivi non inclusi nella lista di cui sopra non sono testati.
Lista completa compatibilità HTML5/CSS3: http://www.findmebyip.com/litmus/
35
Vertical Screen Video Esempio Grafico clicca qui ELLE
36
Vertical Screen Video Esempio Grafico clicca qui MARIECLAIRE
37
Vertical Screen Video Esempio Grafico clicca qui COSMOPOLITAN
38
6.11 Redirect Video Speciali (Xvideo – Mvideo – Tweb – Tlux)
Tweb
Formato MPU con espansione al click e audio in ON una volta espanso.
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

Dimensioni di partenza:
300x250pxl

Dimensione espansione:
800x800pxl MAX


Formato
redirect .swf

Tipo di espansione :

Formato

800x800pxl MAX
redirect .swf
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 destra

Si ri-espande al click con Audio On

Si chiude con un pulsante di chiusura

Xvideo
CHIUSO
Tweb
ESPANSO
Xvideo
ESPANSO
Tweb
CHIUSO
39
MVideo REVERSE EXPANDING
Tlux Elle.it e Marieclaire.it
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
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


Dimensioni di partenza:
300x250pxl

Formato

800x800pxl MAX
redirect .swf

Si ri-espande a mouse over con Audio On

Si chiude in modalità mouse out
Tlux
MASTHEAD
Mvideo
ESPANSO
Mvideo
CHIUSO
Tlux
FULLBROWSER
40
6.12 Skin Page Riders
MAXI BANNER
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.
 Formato: gif o jpg
 Frequenza di visualizzazione:
1 volta per sessione
 Durata di visualizzazione:
10 sec.
BACKGROUND
E’ necessario fornire un’immagine di background con le seguenti dimensioni:
 Dimensioni:
955x500 pxl
Riders-online.it
1.266 x 1.000 pxl
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.
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.
LEADERBOARD
 Dimensioni :
728x90 pxl
 Formato:
gif o jpg o swf
Peso massimo:
90 kb
MEDIUM RECTANGLE
 Dimensioni : 300x250 pxl
Tipo file:
gif o jpg
 Formato:
Codice colore in formato esadecimale da impostare come sfondo della pagina.
gif o jpg o swf
NB: I banner in formato .swf devono seguire le specifiche del capitolo 5.2 a
pagina 3.
L’immagine di fondo deve essere continuativa, perciò non è necessario inserire bordi
41
SKIN PAGE Esempio Grafico Online clicca qui Riders-online.it
FASE 1 con Maxi Banner
FASE 2
42
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:




Dimensioni
Immagine 160x90
Peso massimo 20 kb
File
.gif o .jpg o .swf
Url di destinazione
Riders-online.it
43
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
File
Video formats:
500 Mb
.gif o .jpg o .swf
flv, .mp4

Length:
30 sec max (additional technical fee for ads > 30 sec)

Aspect ratio:
16:9 (4:3 not supported)

Codec:

Sound:
any Video Codecs format, excepted: ProRes 4444, HDV
720p60, Go2 Meeting 3 & 4, ER AAC LD, REDCODE
off

Url di destinazione
È accettata URL redirection (click command) o VAST redirect
44
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


Url di destinazione
45
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 :
 Peso massimo:
 Tipo file:
 Url di destinazione
300x250 pxl
80 kb
.gif o .jpg
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
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
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
Esempio Grafico Marieclaire Mobile
HEADER MOBILE

Dimensioni :
300x100 pxl

Peso :
Max 60 pxl

Formato:
gif o jpg
Marieclaire Mobile
MEDIUM RECTANGLE

Dimensioni : 300x250 pxl

Peso :

Formato: gif o jpg
Max 70 pxl
48

SKIN VIDEO Esempio Grafico Gioia

Transcript

Documenti analoghi

SAREBBE PREFERIBILE NON SUPERARE I 200KB PER UNA GIF

Scrivere un programma python che analizzi il contenuto testuale di

gif animate

Clicca qui per scaricare il PDF completo delle

MODULO D`ORDINE PUBBLICITA` SU FROSINONE24

MEDIAKIT 0 Le Strade del Vino copia

Scrivi con le immagini

Competenza digitale scuola dell`infanzia_12052016

Tutti i formati Video - Hi

MarieClaire.it - 27 Maggio 2014