Publicité display avec HTML5 – Comment créer des annonces réactives

Dans cet article, nous expliquons pourquoi les bannières publicitaires réactives HTML5 sont indispensables pour tous les annonceurs numériques. Des designers aux spécialistes du numérique, des agences aux équipes internes, la publicité display HTML5 est désormais le format de bannière par défaut.

En particulier, avec un nombre toujours plus grand d'appareils et de plates-formes à prendre en charge, il est crucial de pouvoir s'adapter aux comportements des téléspectateurs. Si votre bannière publicitaire n'est pas compatible, ne peut pas répondre aux changements de taille d'écran ou ne fonctionne pas sur mobile, vous avez des problèmes. La publicité display responsive HTML5 offre la flexibilité et la technologie dont vous avez besoin pour que votre marque prospère en ligne.

Plus précisément, HTML5 offre aux spécialistes du marketing numérique la possibilité de :

• Évoluez rapidement vers de nombreux formats et tailles
• Posséder le contrôle ultime sur la conception
• Créez facilement des variantes d'annonces et des traductions
• Produire en masse des bannières rich media
• Exploitez la croissance de la vidéo et de l'affichage mobile
• Mettre à jour dynamiquement les bannières avec des flux de données
• Collaborez efficacement entre les équipes, en interne

Oui, la création d'annonces graphiques réactives n'a jamais été aussi importante, d'autant plus qu'aujourd'hui, votre belle annonce graphique est plus susceptible que jamais d'être vue sur mobile. Selon les recherches de Bannerflow à partir de 2020, les publicités display mobiles dépassent légèrement les ordinateurs de bureau. Aujourd'hui, près des deux tiers des vues d'annonces display le sont sur des appareils mobiles en Europe. De plus, avec les utilisateurs mobiles qui passent plus de quatre heures sur leur smartphone chaque jour, c'est un engagement qu'un annonceur numérique ne peut se permettre d'ignorer. L'ancien monde des bannières statiques, gifs et flash est révolu depuis longtemps - ou du moins il devrait l'être.

Pourquoi devrais-je créer une publicité display HTML5 ?

Vous avez besoin de plus de raisons pour produire de la publicité display HTML5 ? Pour commencer, notre jeu consiste à convertir et il est compétitif. Tout le monde cherche désespérément à attirer l'attention - échouez à captiver et c'est game over. HTML5 offre des possibilités de conception inégalées grâce au rich media et à toute une gamme de formats publicitaires. Si vous ne suivez pas les meilleures pratiques en matière de conception de bannières, vous pouvez parier qu'un concurrent le fera. En plus de cela, la publicité display ne cesse de gagner en portée, en particulier dans le cadre du programmatique.

Prenons, par exemple, ce qui se passe au Royaume-Uni. En 2020, les annonceurs britanniques ont dépensé 6,79 milliards de livres sterling en publicité programmatique, selon un rapport eMarketer. Les dépenses publicitaires display programmatiques représentent désormais 92 % de toutes les dépenses publicitaires display numériques au Royaume-Uni, malgré l'impact de la pandémie de Covid-19. Et cette proportion devrait atteindre 94,5 % d'ici 2022 et représenter 9,01 milliards de livres sterling ! Produire de meilleures annonces - via HTML5 - pour tirer le meilleur parti de cette croissance doit être une priorité.

De plus, les entreprises adoptant désormais la pensée «mobile d'abord» dans l'ensemble de leur marketing numérique, s'assurer que votre site Web, vos pages de destination et vos bannières sont réactifs est une exigence minimale. HTML5 vous permet de créer des bannières prêtes pour les mobiles, réactives et riches en fonctionnalités. Plutôt que de concevoir une campagne statique pour ordinateur, puis de mettre à l'échelle chaque bannière individuellement, vous pouvez à la place mettre à l'échelle avec HTML5 !

La publicité est depuis longtemps devenue mobile et HTML5 est le moyen de créer les bannières dont vous avez besoin.

Quel est le problème avec HTML5 ?

Avant que HTML5 ne soit universellement adopté, exécuter une campagne publicitaire sur différents appareils était un travail difficile. Créer manuellement des bannières pour tous les différents écrans sur lesquels la bannière publicitaire pouvait apparaître était une tâche ardue. HTML5 est le moyen optimal de créer des bannières publicitaires, tout comme pour les sites Web réactifs.

HTML5 est la dernière mise à jour du langage de balisage hypertexte. C'est le langage standard utilisé pour décrire le contenu et la conception des pages Web, y compris celles qui sont réactives. HTML5 est important dans la publicité en ligne, car il offre la possibilité de diffuser des bannières publicitaires sur tous les appareils.

Il offre aux éditeurs et aux annonceurs les moyens de créer des campagnes publicitaires adaptables, grâce à des bannières qui s'adaptent à toutes les plateformes. Contrairement à, disons, en utilisant Flash (oh, comme c'est pittoresque), cela signifie que vous n'avez pas à créer des centaines de versions de la même annonce. La réduction du nombre de versions d'annonces réduira également le risque d'erreurs et augmentera la production de vos bannières.

Dans une bannière publicitaire HTML5, le texte, les images, la vidéo et JavaScript sont ajustables de la même manière que n'importe quelle page Web - ils sont modifiables. Les bannières publicitaires HTML5 seront également optimisées de manière dynamique, de sorte que l'annonce sera parfaite partout. De plus, les bannières publicitaires HTML5 fonctionnent parfaitement sur les appareils mobiles ! Sans perte de fonctionnalité non plus, ce qui signifie qu'il est facile d'atteindre un public plus large.

Il existe deux façons de créer des bannières HTML5

Essentiellement, il existe aujourd'hui deux façons différentes de créer des bannières publicitaires en ligne.

Tout d'abord, vous pouvez coder vous-même manuellement les bannières publicitaires pour les rendre réactives. Et oui, il existe de nombreux tutoriels et modèles en ligne vous montrant comment procéder. Cependant, le processus est lent et signifie que vous devez posséder une connaissance décente de HTML5 et CSS. De plus, bien sûr, vous devez aussi avoir le flair d'un designer ! Une combinaison rare.

Alternativement, vous pouvez utiliser une plate-forme de gestion créative telle que Bannerflow, qui propose un créateur d'annonces conçu pour l'automatisation de la production créative. Ceux-ci aident à prendre en charge le codage pour vous - rendant toutes vos bannières réactives en un clic. De plus, comme nous le découvrirons, ils offrent de nombreuses façons intégrées de tirer parti de HTML5. Celles-ci peuvent aller du développement de superbes bannières vidéo à des bannières dynamiques incluant des flux de données.

La réalité est que les plates-formes de gestion créative réduisent le temps nécessaire pour créer et mettre à l'échelle une campagne, tout en plaçant fermement l'accent de la production de bannières HTML5 sur la conception.

Création de publicité display responsive HTML5

La création de bannières publicitaires responsives HTML5 est relativement simple. Pourtant, comme toutes les bannières numériques, il existe des règles et des bonnes pratiques à suivre. Lors de la création d'une publicité display HTML5, il convient de prendre en compte :

Vérifiez la taille de vos bannières HTML5

Lors de la création d'une mise en page réactive HTML5, il est nécessaire que les éléments aient des largeurs variables similaires à la convention que les bannières publicitaires doivent suivre. Vous pouvez également utiliser la hauteur de votre choix, mais cela ne signifie pas que votre annonce restera à cette hauteur. La meilleure pratique lors de la création de bannières réactives consiste à utiliser les mêmes hauteurs que les tailles de bannières traditionnelles. Il en est ainsi pour maintenir la compatibilité avec les éditeurs et les réseaux publicitaires.

Concevez (ou modifiez) toujours des bannières HTML5 pour les tailles spécifiques proposées par les réseaux publicitaires et les éditeurs. Par exemple, voici une liste des tailles proposées par Google Ad Manager. Si vous basez vos bannières publicitaires sur ces tailles, vous pouvez être sûr que la plupart des appareils afficheront correctement votre création publicitaire lors de sa publication.

Images, conception de bannières et HTML5

Lorsque vous créez des bannières réactives HTML5, votre contrôle de la conception et des images est inégalé. Les cadres pour les messages et les animations sont faciles à contrôler. Mais ne soyez pas gourmand ! Votre bannière ne sera probablement visible par le spectateur que pendant 5 à 15 secondes – alors profitez au maximum de ce temps et concentrez-vous sur vos choix de conception.

Et c'est là que les choses deviennent intéressantes ! Lorsque vous utilisez certaines plates-formes de gestion des créations, telles que Bannerflow, les images utilisées dans votre bannière HTML5 sont automatiquement ajustées et compressées. Cela signifie que la taille et le poids de l'image de votre bannière sont ajustés pour s'adapter aux réseaux publicitaires.

Cependant, même avec toute cette technologie incroyable, cela vaut la peine d'essayer de conserver une image à une taille maximale de 4000 × 4000 (largeur et hauteur) en pixels. De plus, il est toujours préférable de modifier les fichiers bruts super volumineux s'ils dépassent 4000 × 4000 pour obtenir de meilleurs résultats. En fait, il est préférable d'essayer de toujours utiliser les images les plus petites possible. Cela aidera à réduire davantage le poids d'une bannière. Plus l'image est petite, mieux c'est (mais sans réduire la qualité bien sûr !).

Il vaut également la peine de sélectionner le meilleur format d'image, pour le type d'image que vous utilisez dans votre bannière. Par exemple, un JPEG doit toujours être utilisé pour un arrière-plan. Alors que si c'est transparent ou un objet, utilisez un PNG. Pour les types de logo et les objets dessinés (à l'exception des photos) SVG - petite taille de fichier mais bonne pour conserver la netteté lorsqu'elle est développée. Une combinaison de types de fichiers image donnera souvent de meilleurs résultats.

Mais rappelez-vous, il y a certaines choses qui vont de soi ! Par exemple, assurez-vous que votre image principale est entièrement mise au point. Alors qu'un design épuré et simpliste fonctionne toujours mieux.

Mise à l'échelle, gestion des versions et traduction

Même lors de la création de bannières réactives HTML5 qui s'optimisent automatiquement, vous devez créer autant de versions que possible, pour toucher autant de personnes que possible. Plus il y a de tailles de bannières, mieux c'est. Selon le type de média, plus vous avez de bannières, plus vous avez de chances de remporter une enchère programmatique.

La meilleure pratique évidente consiste à utiliser une plate-forme de gestion des créations et un créateur d'annonces efficaces et rapides lorsqu'il s'agit de mettre à l'échelle et de créer plusieurs versions de bannières HTML5. Mieux encore, il est beaucoup plus facile de travailler sur plusieurs marchés si vous pouvez dupliquer, traduire et créer des variantes de votre publicité display.

Il est également facile de changer de contenu dans les bannières HTML5. De plus, la possibilité de dupliquer et d'étendre les campagnes en quelques secondes signifie qu'il est beaucoup plus facile de planifier différentes variantes pour différents jours. En clair, les bannières réactives HTML5 sont idéales pour une utilisation dans les services d'automatisation, comme la programmation.

Bannières rich media

Sans HTML5, il n'y aurait pas de bannières rich media. Il serait impossible de créer des bannières qui interagissent avec les téléspectateurs, qui soient réactives et fonctionnent sur plusieurs appareils. Les publicités rich media suscitent des niveaux d'engagement plus élevés et sont bonnes pour votre marque. Des formulaires d'inscription aux barres de recherche en passant par les jeux intégrés, HTML5 permet aux spécialistes du marketing numérique d'engager les téléspectateurs de différentes manières.

Mais soyez prudent avec la façon dont vous utilisez les bannières rich media. Leur efficacité dépend beaucoup du format de bannière que vous choisissez d'utiliser. N'essayez pas d'ajouter trop d'informations ou de le rendre trop complexe. L'interaction ne doit pas comporter plus d'une ou deux étapes ; essayez de vous concentrer sur une chose et de la rendre rapide et facile pour le spectateur.

Par exemple, un formulaire en ligne doit contenir le minimum d'interactions requises - plus, il commence dans la bannière et se termine sur la page de destination. La clé d'une bonne campagne de bannières rich media HTML5 est qu'elle doit être sérieuse dans son exécution et intuitive dans sa conception.

Aujourd'hui, vous pouvez utiliser des fonctionnalités telles que la possibilité de payer directement un produit présenté dans une bannière. Ou comme on le voit dans l'annonce graphique au-dessus des chatbots - avec les bannières rich media, les futures applications sont infinies !

Publicité display vidéo et HTML5

Dans la publicité display, l'utilisation de la vidéo ne cesse de croître. Rien qu'en Europe, l'affichage vidéo en ligne se multiplie trois fois et demie plus vite que l'affichage non vidéo. L'utilisation d'une vidéo dans votre annonce graphique HTML5 vous aide à paraître plus authentique et à vous connecter avec les spectateurs, ce qui contribue à son tour à la conversion. HTML5 facilite également la création de bannières utilisant la vidéo à produire en masse.

Grâce à l'utilisation de bannières HTML5, vous disposez de nombreuses options en ce qui concerne l'utilisation de la vidéo. À la base, une vidéo peut être utilisée comme arrière-plan pour une bannière. Ou plus créatif, cela peut faire partie de l'animation de la bannière. Par exemple, une bande-annonce qui se termine par un cadre d'appel à l'action (CTA).

La production d'annonces graphiques vidéo est facile

Quelques conseils importants lors de l'utilisation de la vidéo sont de toujours s'assurer que votre logo est visible dans la bannière vidéo HTML5. Commencez par votre message principal et assurez-vous que la vidéo se répète. Essayez également d'avoir un maximum de 1 à 3 étapes dans la vidéo : attirez l'attention des téléspectateurs, approfondissez l'engagement et terminez toujours par un CTA. Réglez toujours vos vidéos sur "silencieux" et activez les sous-titres (si nécessaire).

HTML5, combiné à une bonne plate-forme de gestion des créations, devrait également signifier qu'aucun codage n'est requis. Cela signifie que de nombreuses idées peuvent devenir réalité sans qu'il soit nécessaire de faire quoi que ce soit dans le backend de la bannière.

De plus, les gens regardent de plus en plus de bannières vidéo sur leurs téléphones portables. Il est donc facile de s'assurer que vous disposez d'une annonce display vidéo HTML5 réactive et prête pour les mobiles.

De plus, si vous avez la possibilité d'exporter vos bannières vidéo HTML5 au format mp4, vous pouvez télécharger ces annonces vidéo sur les réseaux sociaux. Un moyen simple pour les équipes internes de créer des publicités vidéo, de réutiliser les éléments HTML5 et d'étendre la portée de leurs campagnes numériques. Voici comment le créateur d'annonces de Bannerflow, Creative Studio, rend tout si simple :

Création de bannières publicitaires mobiles HTML5 réactives

Lors de la création d'annonces display responsive HTML5 pour mobile, il s'agit avant tout d'utiliser le bon format. Plutôt que de réduire une bannière de bureau à une taille mobile, concevez votre annonce spécifiquement pour mobile. Dans certains cercles, compte tenu de la popularité et de l'engagement du mobile, concevoir toutes les campagnes en priorité sur le mobile est considéré comme la voie à suivre.

Il convient de rappeler que les proportions des bannières HTML5 s'adapteront à n'importe quel écran. Cependant, il est toujours préférable de concevoir vos bannières en tenant compte des formats mobiles sélectionnés.

Un aspect de la conception de bannières mobiles à prendre en compte est de s'assurer que toutes les copies sont lisibles. Oui, cela inclut la taille de la police, mais avez-vous également réfléchi à votre message ? Vous devrez peut-être ajouter plus de cadres à votre bannière mobile HTML5 pour exprimer le même message qu'une bannière de bureau. Encore une fois, cela dépend du format que vous utilisez, mais essayez d'éviter d'en serrer plus que nécessaire dans une seule image.

De plus, supprimez de gros volumes de texte et concentrez-vous sur l'impact de vos images. De plus, compte tenu de la taille de l'écran, votre annonce doit être attrayante et non intrusive. La publicité numérique est devenue mobile il y a très longtemps - allez là où se trouvent vos consommateurs et produisez pour eux de superbes bannières réactives HTML5.

Créations dynamiques

Sans HTML5, vous ne pouvez pas créer et maintenir des bannières publicitaires dynamiques et convaincantes alimentées par les données. Limitez-vous à produire uniquement les bannières les plus élémentaires et vous vous retrouverez limité à un seul message. Alors qu'un concurrent peut potentiellement en livrer 2000. Oui, vraiment : via des mises à jour cohérentes des flux de données et l'automatisation. Une bannière responsive HTML5 peut livrer 2000 messages dans le temps qu'il faut pour en produire un de manière statique.

Comme mentionné, la beauté de HTML5 est qu'il vous offre un contrôle complet. Il en va de même pour une bannière connectée à un flux de données – mais plus encore : vous avez la possibilité de mettre à jour la bannière en temps réel.

Personnalisez vos annonces display responsives

Prenons l'exemple d'une campagne de bannières HTML5 affichant les articles les plus populaires dans une boutique en ligne. Lorsqu'un article est épuisé, cela se reflète automatiquement dans la liste des produits affichée dans la bannière dynamique. C'est formidable pour les téléspectateurs et les entreprises de commerce électronique !

La même idée peut être utilisée par les sociétés d'iGaming. Par exemple, les cotes peuvent être modifiées dynamiquement - dans une bannière - pendant un match. Il existe de nombreux types de campagnes personnalisées que vous pouvez utiliser avec les créations dynamiques HTML5.

De plus, il est recommandé de mettre à jour un flux de produits en temps réel. Après tout, vous devez réfléchir de manière critique au format dans lequel les données s'affichent. Il est essentiel de s'assurer que les données que vous utilisez dans votre bannière sont compréhensibles pour les téléspectateurs. cela peut aller des dates et des prix aux cotes. Cela peut également varier selon les marchés et les langues. Par exemple, la façon dont les Américains écrivent les dates est différente de la façon dont les Suédois écrivent les dates. Ou les différentes façons dont les Britanniques et les Suédois comprennent les cotes des paris.

Un dernier conseil : un bon créateur d'annonces tel que Creative Studio, ou une plateforme de gestion de création facilitera la mise en place de filtres et d'options de tri lors de la manipulation d'un flux de données.

Prochaines étapes : créer vos meilleures bannières publicitaires réactives !

J'espère que vous avez maintenant réalisé que la création de bannières publicitaires réactives HTML5 est la meilleure option pour vos besoins en matière de publicité numérique. Avec autant de flexibilité et de visibilité sur plusieurs écrans et plates-formes, il n'y a tout simplement pas de meilleure technologie pour les bannières. De meilleures publicités, de meilleures conceptions, de meilleures mesures - tout est possible.

Enfin, avec des plateformes de gestion créative vous offrant la possibilité de produire des campagnes pour tous les principaux réseaux publicitaires - ainsi que les réseaux sociaux - en utiliser une est un moyen simple d'améliorer la productivité de votre équipe interne. Prendre des jours (voire des semaines !) pour dupliquer et étendre manuellement les campagnes n'est plus une option.

À l'ère des marchés multiples, de l'optimisation en direct et de la transparence, l'adoption de HTML5 aide les spécialistes du marketing à atteindre les performances publicitaires dont ils ont besoin.

Si vous souhaitez savoir comment une plate-forme comme Bannerflow peut aider à produire de superbes publicités, contactez-nous.