Spétechs Mobile. Octobre 2013

Transcription

1 Spétechs Mobile Octobre 2013

2 Appli ios Appli Android Site Mobile Les clicks URL

3 Appli ios Créa en dur HTML5

4 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling Vidéo

5 Créa en dur Banner Banner Une image rectangulaire animée ou statique en haut ou bas de page Orientation (optionnelle) Portrait Landscape Note : ce template gère l orientation et affiche une créa pour le portrait et une autre pour le paysage. iphone Portrait : 640x106 iphone Landscape : 960x106 ipad Portrait : 1536x180 ipad Landscape : 2048x180 JPG GIF PNG Son OFF par défaut Poids 50 Ko max

6 Créa en dur Interstitiel Interstitiel Une image plein écran qui apparaît tandis que la page Web charge Orientation (optionnelle) Portrait Landscape Note : ce template gère l orientation et affiche une créa pour le portrait et une autre pour le paysage. iphone Portrait : 640x960 ou 640x920 iphone Landscape : 960x640 ou 960x600 ipad Portrait : 1536x2048 ou 1536x2008 ipad Landscape : 2048x1536 ou 2048x1496 JPG GIF PNG Son OFF par défaut Poids 50 Ko max Pour voir un exemple, cliquez ici :

7 Créa en dur Interstitiel Vidéo Interstitiel Vidéo Une vidéo qui apparaît sur un fond tandis que la page web charge Orientation (optionnelle) Portrait Landscape 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. iphone Background Portrait : 640x690 ipad Background Portrait : 1536x2048 Vidéo : ratio 4:3 ou 16:9 Background + vidéo JPG, GIF statique ou PNG MP4, encodé en H.264 Son OFF par défaut Poids Background : 100 Ko max Vidéo : 500 Ko max Pour voir un exemple, cliquez ici :

8 Créa en dur Bouncing / Traveling image Bouncing / Traveling image 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. iphone écran non rétina : 200x200 iphone écran rétina : 400x400 ipad écran non rétina : 400x400 ipad écran rétina : 600x600 GIF fixe JPG PNG Poids 50 Ko max Pour voir un exemple, cliquez ici :

9 Créa en dur Bouncing / Traveling vidéo Bouncing / Traveling vidéo 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. Aspect ratio 4:3 ou 16:9 Vidéo MP4, encodé en H.264 Son Off par défaut Poids 500 Ko max Pour voir un exemple, cliquez ici :

10 Html5 Banner Interstitiel Interstitiel Vidéo

11 Html5 Banner Banner Une image rectangulaire animée ou statique en haut ou en bas de page Orientation (optionnelle) Portrait Landscape Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 100 Ko max

12 Html5 Interstitiel Interstitiel Une image plein écran qui apparaît tandis que la page Web charge Orientation (optionnelle) Portrait Landscape 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 Pour voir un exemple, cliquez ici :

13 Html5 Interstitiel Vidéo Interstitiel Vidéo Une vidéo qui apparaît sur un fond tandis que la page web charge Orientation (optionnelle) Portrait Landscape Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 200 Ko max Durée 5 secondes max Pour voir un exemple, cliquez ici :

14 Html5* *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» indiqué dans la documentation. Une seule redirection est acceptée (impossible d intégrer des redirections multiples). 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.

15 Appli Android Créa en dur HTML5

16 Créa en dur Banner Interstitiel Interstitiel Vidéo

17 Créa en dur Banner Banner Une image rectangulaire animée ou statique en haut ou en bas de page Orientation (optionnelle) Portrait Landscape Note : ce template gère l orientation et affiche une créa pour le portrait et une autre pour le paysage. Smartphone Portrait : 720x120 Smartphone Landscape : 1200x120 Tablette Portrait : 1536x256 Tablette Landscape : 2560x256 JPG GIF PNG Son OFF par défaut Poids Smartphone : 50 Ko max Tablette : 100 Ko max

18 Créa en dur Interstitiel Interstitiel Une image plein écran qui apparaît tandis que la page Web charge Orientation (optionnelle) Portrait Landscape Note : ce template gère l orientation et affiche une créa pour le portrait et une autre pour le paysage. Smartphone Portrait : 720x1280 Smartphone Landscape : 1280x720 Tablette Portrait : 2048x1536 Tablette Landscape : 1536x2048 JPG, GIF ou PNG Son OFF par défaut Poids Smartphone : 100 Ko max Tablette : 200 Ko max Pour voir un exemple, cliquez ici :

19 Créa en dur Interstitiel Vidéo Interstitiel Vidéo Une vidéo qui apparaît sur un fond tandis que la page web charge Orientation (optionnelle) Portrait Landscape 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. Smartphone Background Portrait : 720x1200 Tablette Background Portrait : 1536x2048 Tablette Background Landscape : 2048x1536 Vidéo : aspect ratio 16:9 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 Pour voir un exemple, cliquez ici :

20 Html5 Banner Interstitiel Interstitiel Vidéo

21 Html5 Banner Banner Une image rectangulaire animée ou statique en haut ou en bas de page Orientation optionnelle Portrait Landscape Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 100 Ko max

22 Html5 Interstitiel Interstitiel Une image plein écran qui apparaît tandis que la page Web charge Orientation (optionnelle) Portrait Landscape Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 200 Ko max Durée 5 secondes max Pour voir un exemple, cliquez ici :

23 Html5 Interstitiel Vidéo Interstitiel Vidéo Une vidéo qui apparaît sur un fond tandis que la page web charge Orientation (optionnelle) Portrait Landscape Autoresize dans le HTML5 HTML5, CSS, javascript (voir «onglet HTML5») Son OFF par défaut Poids 200 Ko max Durée 5 secondes max Pour voir un exemple, cliquez ici :

24 Html5* *L url d hébergement de la créa doit être envoyée ainsi que son clic commande associé. Dans le cas contraire, l hébergement vous sera facturé 1 du CPM. 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. Une seule redirection est acceptée (impossible d intégrer des redirections multiples). 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.

25 Site Mobile Créa en dur HTML5 WEB

26 WEB Créa en dur Banner Interstitiel

27 WEB Créa en dur Banner 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 Note : ce template gère l orientation portrait. La même créa peut être diffusée en portrait et en paysage (landscape). Petits écrans : 320x53 Grands écrans : 320x75 JPG, GIF ou PNG Poids 50 Ko max

28 WEB Créa en dur Interstitiel Interstitiel 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 Note : ce template gère l orientation et affiche une créa pour le portrait et une autre pour le paysage. Smartphone portrait : 320x416 ou 320x358 Smartphone landscape : 480x268 ou 480x208 ipad portrait : 768x1004 ou 768x946 ipad landscape : 1024x748 ou 1024x690 JPG, BMP ou PNG Son OFF par défaut Poids 100 Ko max

29 WEB Html5 Banner Interstitiel

30 WEB Html5 Banner 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 Note : ce template gère l orientation portrait. La même créa peut être diffusée en portrait et en paysage (landscape). Petits écrans : 320x53 Grands écrans : 320x75 HMTL5, sous réserve de test (voir slide «HTML5») Son OFF par défaut

31 WEB Html5 Interstitiel Interstitiel 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 Note : ce template gère l orientation et affiche une créa pour le portrait et une autre pour le paysage. Smartphone Portrait : 320x416 ou 320x358 Smartphone Landscape : 480x268 ou 480x208 ipad Portrait : 768x1004 ou 768x946 ipad Landscape : 1024x748 ou 1024x690 HTML5, sous réserve de test (voir slide «HTML5») Son OFF par défaut

32 WEB Html5* *L url d hébergement de la créa doit être envoyée ainsi que son clic commande associé. Dans le cas contraire, l hébergement vous sera facturé 1 du CPM. 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. Une seule redirection est acceptée (impossible d intégrer des redirections multiples). 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. 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.

33 Les clicks URL

34 Les clicks URL Click URL ios Click URL Android Click to web 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 OU Le clic renvoie l internaute vers l application de l annonceur. Click to maps maps:my_maps_url OU Après son clic, l internaute est invité à se rendre sur un plan/carte. Click to mail mailto:my_ _address L internaute est invité à envoyer un mail suite au clic. Click to youtube Le clic dirige l internaute vers la lecture d une vidéo.