Comment créer une annonce interactive en 10 minutes
Avec la disparition de Flash, la responsabilité des annonces interactives a été transférée à HTML5. Ici, nous apprenons comment créer une publicité HTML5 interactive en 10 minutes seulement.
Aujourd'hui, nous aimerions montrer comment créer une bannière publicitaire HTML5 interactive.
C'était un projet que nous avons fait pour Carlsberg Il y a quelque temps, nous pensons que cela peut être utile pour les concepteurs et les programmeurs intéressés par le travail de conception frontale.
Carlsberg est une marque de bière mondiale de plusieurs milliards de dollars qui emploie plus de 40 000 personnes dans le monde. Outre la marque domestique Carlsberg, ils hébergent également d'autres marques telles que Tuborg, Somersby (cidre), Kronenbourg et Dali Beer (une marque à croissance rapide en Asie).
Qu'est-ce qu'une annonce interactive?
Faisons un rapide récapitulatif. Auparavant, nous avions des annonces textuelles, qui étaient essentiellement un texte court contenant un lien vers la page, le produit ou le service de l'annonceur.
Viennent ensuite les bannières statiques. Ce sont généralement des images statiques. Ils sont plus convaincants que les annonces textuelles, car les images valent mille mots. Les principaux formats sont disponibles en 300 × 250 pixels (boîte), 728 × 90 (largeur) ou 90 × 728 (gratte-ciel).
Ensuite, jeu de technologie Flash sur le navigateur de bureau. Flash était révolutionnaire car il permettait une vague de bannières animées et interactives. Les annonces animées captivent l'attention des utilisateurs, ce qui se traduit par des taux de clics (CTR) plus élevés. Les joueurs peuvent même jouer à un micro-jeu en tirant quelque chose ou en lançant une balle dans le cerceau.
En 2010, Apple a convaincu le monde des vertus du passage à HTML5 et, avec les géants comme Google, la technologie Flash a rapidement décliné.
Les entreprises de technologies publicitaires voient l’immense potentiel de croissance du mobile et ont donc commencé à mettre en œuvre HTML5 dans un nouveau bloc d’annonces inter-plateformes. Cette unité s'appelle la publicité interactive HTML5, prise en charge par les nouvelles normes industrielles telles que MRAID, MRAID2, etc.
En résumé, une publicité HTML5 interactive est une publicité qui fonctionne désormais sur les smartphones, les tablettes et les navigateurs de bureau.
Alors, de quoi parle cette pub Carlsberg?
Voici un lien vers la vidéo , montrant l'annonce interactive en cours d'exécution sur un iPhone:
L'objectif de cette publicité interactive est de sensibiliser le public au tournoi mondial de rugby à sept, un événement annuel de rugby qui se déroule à Hong Kong. Les meilleures des meilleures équipes du monde entier s'affrontent chaque année pour remporter le premier prix. Carlsberg est l'un des principaux sponsors.
L'expérience publicitaire est simple. Les utilisateurs voient une bouteille de bière brillante Carlsberg. Un message demande à l'utilisateur d'appuyer sur la bouteille brillante.
En tapant dessus, une courte animation met en scène un joueur de rugby portant un seau froid et glacé de bières Carlsberg.
Un slogan de marque amusant apparaît: "Are you beer ready"?
Les utilisateurs peuvent ensuite appuyer sur le lien "Trouvez-nous sur Facebook" pour visiter la page de l'annonceur pour plus d'informations.
Retour à notre programmation régulière
Une annonce HTML5 interactive se compose de 5 éléments principaux:
- index.html (point d'entrée principal)
- main.js (le javascript qui contient la logique)
- main.css (la feuille de style CSS)
- actifs (actifs visuels)
- le lien sortant (où l'annonce doit amener les utilisateurs)
Commençons la construction de l'annonce ...
Partie 1: index.html
Le fichier index.html est constitué de déclarations HTML standard.
Voir le stylo Carlsberg Interactive Ad Demo - index.html par Ben Chong ( @marketjs ) sur CodePen .
Ce qui compte ici, c'est la fenêtre de méta et la liaison à main.css et main.js
Comme vous pouvez le voir, c'est assez simple. Rien d'extraordinaire.
Partie 2: main.js (La viande et les os)
Main.js est un fichier Javascript qui gère toutes les interactions avec l'annonce.
Voir le stylo Carlsberg Interactive Ad Demo - main.js par Ben Chong ( @marketjs ) sur CodePen .
En haut, nous insérons l'intégralité du JS minifié de jQuery. Notez que vous pouvez utiliser la dernière version de jQuery à partir de http://jquery.com/
jQuery sera utile pour la plupart des techniques de manipulation DOM que nous utilisons.
Ensuite, nous créons une fonction de précharge basée sur une image simple.
Nous préchargent une série d’actifs graphiques liés à l’annonce.
Maintenant, à la logique. Lorsque l'annonce se charge, vous remarquerez que nous créons 2 divs, appelés scene1 et scene2 .
scene1 contient la div de la bouteille rougeoyante. Quand on clique dessus, il passe à scene2, via la fonction gotoScene2
scene2 elle-même contient le div tagline, qui redirige vers la page Facebook de Carlsberg, lorsqu'il est tapé.
C'est fondamentalement ça. Une logique très simple est nécessaire.
Partie 3: main.css (La feuille de style)
Le fichier main.css contient tous les styles liés à CSS.
Voir le stylo Carlsberg Interactive Ad Demo - main.css par Ben Chong ( @marketjs ) sur CodePen .
Dans cet exemple, nous avons fait certaines des animations sympas que vous voyez via CSS
Par exemple, la bouteille de bière rougeoyante utilise la valeur de clignotement de la propriété -webkit-animation
Nous ajoutons également quelques algorithmes standard que les utilisateurs ont tendance à aimer, tels que bounceIn et bounceOut
Partie 4: Actifs visuels
Les annonces interactives nécessitent des visuels amusants liés à la marque. Par conséquent, il est conseillé de travailler avec un concepteur sur des publicités HTML5 interactives.
Dans notre cas, nous avons utilisé: Le fond vert blanc; La bouteille; L'arrière-plan avec l'homme de rugby tenant un seau de glace froid de bières; L'appel à l'action graphique.
Partie 5: Appel à l'action (CTA)
Ce sont les parties les plus importantes de toute annonce interactive. L'appel à l'action doit être conçu de manière à ce que les utilisateurs souhaitent cliquer pour en savoir plus.
Il doit s'agir d'un message convaincant lié à la curiosité de l'utilisateur.
Résumé
Nous espérons que cet article est utile pour la communauté. Comme vous pouvez le voir, cette annonce interactive est très facile à construire et ne prend pas plus de 10 minutes pour vous assembler.
Cliquez ici pour télécharger les fichiers de projet et le code source.