Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014
Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact commercial habituel Deadline de 24h pour les éléments d une campagne «classique» Deadline de 48h pour les éléments d une campagne «complexe» (beaucoup de créas) ou HTML5 (le temps de faire les tests et les allers-retours)
Appli ios Appli Android Site Mobile Web Mobile Les clicks URL
Appli ios Créa en dur HTML5
Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling Vidéo Créa en dur
Banner Une image rectangulaire animée ou statique en haut ou bas de page Orientation (optionnelle) Portrait Landscape JPG GIF PNG Taille écran iphone iphone Portrait : 640x106 iphone Landscape : 960x106 Taille écran ipad ipad Portrait : 1536x180 ipad Landscape : 2048x180 Son OFF par défaut Poids 50 Ko max Créa en dur - Banner
Interstitiel Une image plein écran qui apparaît tandis que l application charge Orientation (optionnelle) Portrait Landscape JPG GIF PNG Son OFF par défaut Poids 50 Ko max Taille écran iphone iphone 4 Portrait : 640x960 iphone 4 Landscape : 960x640 iphone 5 Portrait : 640x1136 iphone 5 Landscape : 1136x640 Taille écran ipad ipad Portrait : 1536x2048 ipad Landscape : 2048x1536 iphone 4 iphone 5 ipad Créa en dur Interstitiel
Interstitiel Vidéo Démo, cliquez ici : Une vidéo qui apparaît sur un fond tandis que l appli charge Orientation (optionnelle) Portrait Landscape Background + vidéo JPG, GIF statique ou PNG MP4, encodé en H.264 Taille écran iphone iphone 4 Background Portrait : 640x960 iphone 5 Background Portrait : 640x1136 Taille écran ipad ipad Background Portrait : 1536x2048 Taille vidéo Vidéo : ratio 4:3 ou 16:9 iphone 4 iphone 5 Son OFF par défaut Poids Background : 100 Ko max Vidéo : 500 Ko max Les vidéos peuvent avoir une durée de 20 s si elles respectent le poids max (500 Ko). Note : Le calque vidéo est automatiquement adapté à la largeur de l écran. La hauteur est ajustée en gardant l aspect ratio de l image. En mode paysage, la vidéo sera élargie pour s adapter à la hauteur de l écran. ipad Si une image de fond est téléchargée, elle sera affichée en mode portrait seulement. Créa en dur Interstitiel Vidéo
Bouncing / Traveling image Démo, cliquez ici : Bouncing : c est une image fixe qui rebondit aléatoirement sur les bords de l écran en fonction de la position du mobile. Traveling : C est une image fixe qui se déplace de façon prédéfinie à travers l écran. GIF fixe JPG PNG Poids 20 Ko max Taille écran iphone iphone écran non rétina : 200x200 iphone écran rétina : 400x400 Taille écran ipad ipad écran non rétina : 400x400 ipad écran rétina : 600x600 Créa en dur Bouncing / Traveling image
Bouncing / Traveling vidéo Démo, cliquez ici : Bouncing : C est une vidéo qui rebondit aléatoirement sur les bords de l écran en fonction de la position du mobile. Traveling : C est une vidéo qui se déplace de façon prédéfinie à travers l écran. Taille Aspect ratio 4:3 ou 16:9 Vidéo MP4, encodé en H.264 Son Off par défaut Poids 500 Ko max Créa en dur Bouncing / Traveling vidéo
Banner Interstitiel Interstitiel Vidéo Html5
Banner Une image rectangulaire animée ou statique en haut ou en bas de page Orientation (optionnelle) Portrait Landscape Taille Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 100 Ko max Html5 - Banner
Interstitiel Une image plein écran qui apparaît tandis que l appli charge Orientation (optionnelle) Portrait Landscape Taille Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML 5») Son OFF par défaut Poids 200 Ko max Durée 5 secondes max Html5 - Interstitiel
Interstitiel Vidéo Une vidéo qui apparaît sur un fond tandis que l appli charge Orientation (optionnelle) Portrait Landscape Taille Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 200 Ko max Durée 5 secondes max Html5 Interstitiel Vidéo
*L url d hébergement de la créa doit être envoyée ainsi que son clic commande associé. CONTRAINTES TECHNIQUES Url de redirection : 150 caractères max! Attention, certaines applications ne reconnaissent pas les URLs traquées, ce qui rend la redirection avec l Appstore impossible. Bien respecter le paramètre post-click URL avec href=«sas:click» comme indiqué dans la documentation : http://help.smartadserver.com/ios/v4.0/#index.htm. Une seule redirection est acceptée (impossible d intégrer des redirections multiples). Mettre une taille relative (en pourcentage) et non une taille fixe (en pixel). La créa doit être capable de s adapter (format) à l ensemble des écrans iphone. La créa doit être capable de s orienter en portrait et paysage par elle-même. Nous ne pouvons pas diffuser des créas du type Adobe EDGE, HYPE, etc Nous acceptons des créas développées seulement en langage HTML-CSS3. ELEMENTS A ENVOYER Soit nous hébergeons le tout : envoyer un fichier ZIP avec la créa index.html + les autres fichiers associés. Les tailles sont les mêmes que les créas classiques. Soit vous hébergez le tout : on ne doit recevoir qu une URL qui va récupérer la créa animée hébergée. Html5*
Appli Android Créa en dur HTML5
Banner Interstitiel Interstitiel Vidéo Créa en dur
Banner Une image rectangulaire animée ou statique en haut ou en bas de page Orientation (optionnelle) Portrait Landscape JPG GIF PNG Son OFF par défaut Taille écran Smartphone Android Smartphone Portrait : 720x120 Smartphone Landscape : 1200x120 Taille écran Tablette Android Tablette Portrait : 1536x256 Tablette Landscape : 2560x256 Poids Smartphone : 50 Ko max Tablette : 100 Ko max Créa en dur - Banner
Interstitiel Une image plein écran qui apparaît tandis que l appli charge Orientation (optionnelle) Portrait Landscape JPG, GIF ou PNG Son OFF par défaut Taille écran Smartphone Android Smartphone Portrait : 720x1280 Smartphone Landscape : 1280x720 Taille écran Tablette Android Tablette Portrait : 1536x2048 Tablette Landscape : 2048x1536 Poids Smartphone : 100 Ko max Tablette : 200 Ko max Créa en dur - Interstitiel
Interstitiel Vidéo Démo, cliquez ici : Une vidéo qui apparaît sur un fond tandis que l appli charge Orientation (optionnelle) Portrait Landscape Background + vidéo JPG, GIF statique ou PNG MP4, encodé en H.264 Son OFF par défaut Poids Smartphone Background : 100 Ko max Tablette Background : 200 Ko max Vidéo : 500 Ko max Les vidéos peuvent avoir une durée de 20 secondes si elles respectent le poids max (500 Ko). Taille Smartphone Background Portrait : 720x1200 Tablette Background Portrait : 1536x2048 Tablette Background Landscape : 2048x1536 Vidéo : aspect ratio 16:9 Note : Le calque vidéo est automatiquement adapté à la largeur de l écran. La hauteur est ajustée en gardant l aspect ratio de l image. En mode paysage, la vidéo sera élargie pour s adapter à la hauteur de l écran. Si une image de fond est téléchargée, elle sera affichée en mode portrait seulement. Créa en dur Interstitiel Vidéo
Banner Interstitiel Interstitiel Vidéo Html5
Banner Une image rectangulaire animée ou statique en haut ou en bas de page Orientation optionnelle Portrait Landscape Taille Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 100 Ko max Html5 - Banner
Interstitiel Une image plein écran qui apparaît tandis que l appli charge Orientation (optionnelle) Portrait Landscape Taille Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 200 Ko max Durée 5 secondes max Html5 - Interstitiel
Interstitiel Vidéo Une vidéo qui apparaît sur un fond tandis que l appli charge Orientation (optionnelle) Portrait Landscape Taille Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 200 Ko max Durée 5 secondes max Html5 Interstitiel Vidéo
*L url d hébergement de la créa doit être envoyée ainsi que son clic commande associé. CONTRAINTES TECHNIQUES Url de redirection : 150 caractères max! Attention, certaines applications ne reconnaissent pas les URLs traquées, ce qui rend la redirection avec le Play Store impossible. Contrairement à la partie iphone, pour remonter les clics dans les terminaux Android, nous avons besoin d une balise <a href=" "></a> pour toute la création comme indiqué dans la documentation : http://help.smartadserver.com/ios/v4.0/#index.htm. Une seule redirection est acceptée (impossible d intégrer des redirections multiples). Mettre une taille relative (en pourcentage) et non une taille fixe (en pixel). La créa doit être capable de s adapter (format) à l ensemble des écrans Android. La créa doit être capable de s orienter en portrait et paysage par elle-même. Nous ne pouvons pas diffuser des créas du type Adobe EDGE, HYPE, etc Nous acceptons des créas développées seulement en langage HTML-CSS3. ELEMENTS A ENVOYER Soit nous hébergeons le tout : envoyer un fichier ZIP avec la créa index.html + les autres fichiers associés. Les tailles sont les mêmes que les créas classiques. Soit vous hébergez le tout : on ne doit recevoir qu une URL qui va récupérer la créa animée hébergée. Html5*
WEB Site Mobile Créa en dur HTML5
Banner Interstitiel Catfish Flip Banner Expand Banner Reveal Spin Cube WEB Créa en dur
Banner Une image rectangulaire statique en haut (top), au milieu (middle) ou en bas (bottom) de l écran Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Mango Internet Explorer Orientation Portrait JPG, GIF ou PNG Taille écran Smartphone 320x50 Taille écran Tablette 768x90 Poids Smartphone : 30 Ko max Tablette : 50 Ko max WEB Créa en dur Banner
Interstitiel Démo, cliquez ici : Une image plein écran qui apparaît tandis que la page Web charge Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Mango Internet Explorer Orientation Portrait Landscape JPG, BMP ou PNG Son OFF par défaut Taille écran Smartphone Smartphone portrait : 320x480 Smartphone landscape : 480x320 Taille écran Tablette Tablette portrait : 768x1024 Tablette landscape : 1024x768 Poids Smartphone : 35 Ko max Tablette : 100 Ko max WEB Créa en dur Interstitiel
Catfish Démo, cliquez ici : Une bannière statique ou animée placée en haut ou en bas Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Mango Internet Explorer Taille 320x50 Poids 30 Ko max Orientation Portrait JPG, BMP ou PNG WEB Créa en dur Catfish
Flip Banner Démo, cliquez ici : Une bannière qui tourne horizontalement ou verticalement pour montrer les deux côtés de la bannière Taille écran Smartphone 320x100 La créa doit être coupée en 2 fois 320x50 Navigateur supporté ios Safari Orientation Portrait JPG, BMP ou PNG Poids écran Smartphone 30 Ko max WEB Créa en dur Flip Banner
Expand Banner Démo, cliquez ici : Une bannière expand qui couvre le contenu lorsqu elle est déployée Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Mango Internet Explorer Orientation Portrait Taille écran Smartphone 320x358 1 fichier de création avec deux parties : - une partie inférieure toujours visible (320x53) - une partie supérieure qui s étend et qui couvre le contenu (320x305) Poids écran Smartphone 30 Ko max JPG, BMP ou PNG WEB Créa en dur Expand Banner
Reveal Démo, cliquez ici : Une bannière qui pousse le contenu vers le bas Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Mango Internet Explorer Orientation Portrait Taille écran Smartphone 320x358 1 fichier de création avec deux parties : - une partie inférieure toujours visible (320x53) - une partie supérieure qui s étend et qui couvre le contenu (320x305) Poids écran Smartphone 30 Ko max JPG, BMP ou PNG WEB Créa en dur Reveal
Spin Cube Démo, cliquez ici : Un cube animé 3D qui dispose de 6 photos ou vidéos différentes Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Taille 300x300 Poids 4 Mo max Orientation Portrait PNG, JPG, GIF, MP4 WEB Créa en dur Spin Cube
Banner Interstitiel Catfish Flip Banner Expand Banner Reveal Spin Cube WEB Html5
Banner Une image rectangulaire animée ou statique en haut (top), au milieu (middle) ou en bas (bottom) de l écran Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Mango Internet Explorer Orientation Portrait HMTL5, sous réserve de test (voir slide «HTML5») Taille écran Smartphone 320x50 Taille écran Tablette 768x90 Poids Smartphone : 30 Ko max Tablette : 50 Ko max Son OFF par défaut WEB Html5 Banner
Interstitiel Démo, cliquez ici : Une image plein écran qui apparaît tandis que la page Web charge Navigateurs supportés ios Safari Android Browsers Firefox, Chrome Mango Internet Explorer Orientation Portrait Landscape HTML5, sous réserve de test (voir slide «HTML5») Son OFF par défaut Taille écran Smartphone Smartphone Portrait : 320x480 Smartphone Landscape : 480x320 Taille écran Tablette Tablette Portrait : 768x1024 Tablette Landscape : 1024x768 Poids Smartphone : 35 Ko max Tablette : 100 Ko max WEB Html5 Interstitiel
Catfish Démo, cliquez ici : Une bannière statique ou animée placée en haut ou en bas Navigateurs supportés ios Safari Android browsers Firefox, Chrome Mango Internet explorer Taille 320x50 Poids 50 Ko max Orientation Portrait JPG, BMP ou PNG WEB Html5 Catfish
Flip Banner Démo, cliquez ici : Une bannière qui tourne horizontalement ou verticalement pour montrer les deux côtés de la bannière Taille 320x100 La créa doit être coupée en 2 fois 320x50 Navigateur supporté ios Safari Orientation Portrait JPG, BMP ou PNG Poids 50 Ko max WEB Html5 Flip Banner
Expand Banner Démo, cliquez ici : Une bannière expand qui couvre le contenu lorsqu elle est déployée Navigateurs supportés ios Safari Android browsers Firefox, Chrome Orientation Portrait Taille 320x358 1 fichier de création avec deux parties : - une partie inférieure toujours visible (320x53) - une partie supérieure qui s étend et qui couvre le contenu (320x305) Poids 50 Ko max JPG, BMP ou PNG WEB Html5 Expand Banner
Reveal Démo, cliquez ici : Une bannière qui pousse le contenu vers le bas Navigateurs supportés ios Safari Android browsers Firefox, Chrome Mango Internet explorer Orientation Portrait Taille 320x358 1 fichier de création avec deux parties : - une partie inférieure toujours visible (320x53) - une partie supérieure qui s étend et qui couvre le contenu (320x305) Poids 50 Ko max JPG, BMP ou PNG WEB Html5 Reveal
Spin Cube Démo, cliquez ici : Un cube animé 3D qui dispose de 6 photos ou vidéos différentes Navigateurs supportés ios Safari Android browsers Firefox, Chrome Taille 300x300 Poids 4 Mo max Orientation Portrait PNG, JPG, GIF, MP4 WEB Html5 Spin Cube
*L url d hébergement de la créa doit être envoyée ainsi que son clic commande associé. Url de redirection : 150 caractères max! Attention, certaines applications ne reconnaissent pas les URLs traquées, ce qui rend la redirection avec l Appstore/le Play Store impossible. Pour remonter les clics dans les terminaux Android, nous avons besoin d une balise <a href=" "></a> pour toute la création comme indiqué dans la documentation : http://help.smartadserver.com/ios/v4.0/#index.htm. Une seule redirection est acceptée (impossible d intégrer des redirections multiples). Mettre une taille relative (en pourcentage) et non une taille fixe (en pixel). La créa doit être capable de s adapter (format) à l ensemble des écrans iphone & Android. La créa doit être capable de s orienter en portrait et paysage par elle-même. Nous ne pouvons pas diffuser des créas du type Adobe EDGE, HYPE, etc Nous acceptons des créas développées seulement en langage HTML-CSS3. Soit nous hébergeons le tout : envoyer un fichier ZIP avec la créa index.html + les autres fichiers associés. Les tailles sont les mêmes que les créas classiques. Soit vous hébergez le tout : on ne doit recevoir qu une URL qui va récupérer la créa animée hébergée. Attention : Pour les formats ipad, il faut que le HTML5 gère le format portrait et landscape. Pour Android, le HTML5 doit gérer les dimensions en fonction de la taille d écran du Mobile. WEB Html5*
Web Mobile
Le Web Mobile est adservé sur AppNexus. Ce sont les mêmes formats IAB que pour le display mais consultables sur smartphone ou tablette. Les formats sont les mêmes que pour le web mais il faut garder en tête que ce sera diffusé sur des plus petits écrans dans le cas des smartphones, L idéal est de faire des créa pas trop chargées et avec peu d écriture. Le script agence n est pas possible. Créa Taille Poids MegaBanner 728x90 40Ko Gif, Jpeg, Html5 Pavé 300x250 40Ko Gif, Jpeg, Html5 Interstitiel 550x350 40Ko Gif, Jpeg, Html5 Dans le html5, pour l'interstitiel : - les clics seront comptés grâce à la macro ${CLICK_URL}. - impossible de faire plusieurs redirections. - le bouton «fermer» est géré de notre côté. - gestion du resize de la créa à faire dans le html5 pour l interstitiel (selon résolution et portrait/paysage). Web Mobile
Exemples de créas non optimisées pour le Web Mobile (trop d écritures, pas lisibles) Web Mobile
Exemples de créas optimisées pour le Web Mobile Web Mobile
Les clicks URL
Click URL ios Click URL Android Click to web http://www.mysite.com Lorsqu il clique sur la bannière, l internaute est dirigé vers le site web de l annonceur. Click to call tel:my_phone_number Le clic de l internaute entraine un appel téléphonique. Click to SMS tel:my_sms_number En cliquant, l internaute est invité à envoyer un sms. Click to app http://itunes.apple.com/ OU https://play.google.com/store Le clic renvoie l internaute vers l application de l annonceur. Click to maps maps:my_maps_url OU http://maps.google.com/ Après son clic, l internaute est invité à se rendre sur un plan/carte. Click to mail mailto:my_email_address L internaute est invité à envoyer un mail suite au clic. Click to youtube http://www.youtube.com Le clic dirige l internaute vers la lecture d une vidéo. Les clicks URL
CONTACT m obviousfr@hi-media.com