Catégories
Astuces et Design

Une introduction à la publicité display pour les concepteurs Web

De nombreux sites Web (celui-ci inclus) comptent sur la publicité comme source importante de revenus. Ces emplacements publicitaires ont un impact direct sur les interfaces avec lesquelles nous créons et interagissons chaque jour. Construire des mises en page avec des publicités est une danse de les manipuler dans des environnements fluides, et aussi d'équilibrer la nécessité de présenter notre contenu et de mettre en avant les publicités pour s'assurer qu'elles sont efficaces.

Dans cet article, je vais partager quelques conseils et idées pour intégrer des blocs d'annonces dans des mises en page. Nous examinerons certaines options de placement dans lesquelles nous pourrions envisager ou généralement espérer placer des publicités dans des pages Web, puis passer à des stratégies de style.

Je pourrais utiliser des propriétés CSS modernes en cours de route qui ne sont pas entièrement prises en charge dans les anciens navigateurs. Jetez un œil à @supports si vous souhaitez prendre en charge les anciens navigateurs de manière progressive et conviviale.

Emplacements publicitaires numériques courants

Il existe de très nombreux endroits différents où nous pouvons déposer des annonces sur une page et un nombre infini de tailles et de proportions que nous pourrions utiliser. Cela dit, il existe des emplacements et des tailles standard qui sont couramment utilisés pour aider à établir une base de référence qui peut être utilisée pour fixer les prix et comparer les statistiques à travers l'industrie. Nous en couvrirons quelques-unes ici, bien que vous puissiez voir combien d'options et de variantes existent à l'état sauvage.

Le placement de la barre de navigation

L'espace juste au-dessus de la navigation principale d'un site est souvent un excellent emplacement pour placer une publicité. C'est génial parce que – dans de nombreux cas – la navigation est en haut de la page, offrant un emplacement bien en vue qui se prête à la fois à une mise en page pleine largeur et à de nombreuses interactions avec les utilisateurs. C'est souvent pourquoi nous voyons d'autres types de contenu important, comme les alertes et les notifications, occuper cet espace.

Pour ce faire, la méthode la plus simple consiste simplement à placer l'élément d'annonce au-dessus de la navigation et à l'appeler un jour. Mais que se passe-t-il si nous voulons «coller» la navigation en haut de la page une fois que l'annonce défile hors de vue?

Ici, nous utilisons position: sticky pour obtenir cet effet sur la navigation. Comme documenté par MDN, un élément collant est l'endroit où:

L'élément est positionné selon le flux normal du document, puis décalé par rapport à son ancêtre de défilement le plus proche (et contenant le bloc).

Il peut être tentant d'utiliser à la place un positionnement fixe, mais cela supprime la navigation du flux de documents normal. Par conséquent, il se fixe en haut de la fenêtre et y reste pendant que vous faites défiler. Cela rend le sticky une méthode plus viable avec une expérience utilisateur plus fluide.

Un élément fixe reste littéralement en place tant qu'il reste en vue, tandis qu'un élément collant est capable de «coller» vers le haut lorsqu'il y arrive, puis de «décoller» au retour.

Maintenant, nous pourrions faire l'inverse où l'annonce est l'élément collant au lieu de la navigation. C'est quelque chose que vous devrez peser, car masquer la navigation de la vue pourrait être une mauvaise expérience utilisateur dans certaines conceptions, sans parler de la façon dont les publicités persistantes pourraient interférer avec le contenu lui-même. En d'autres termes, soyez prudent.

Le placement d'en-tête

L'affichage d'annonces dans l'en-tête du site est un autre endroit que nous rencontrons couramment dans les publicités. Il existe deux modèles largement utilisés utilisant le placement de l'en-tête. Dans le jargon de l'industrie publicitaire, ils sont appelés:

  • Panneau d'affichage: Une annonce rectangulaire présentée comme une incitation à l'action principale. Il s'agit généralement de 970⨉250. Nous pourrions utiliser la taille la plus large, 970 pixels, pour définir la taille de la zone de contenu principale d'un site.
  • Classement: Une annonce qui est large, courte et partage souvent de l'espace avec un autre élément. Ce sont généralement 728⨉90.

Le spot d'affichage, bien qu'il soit grand, est rarement utilisé (estimé à seulement 2% des sites), mais il affiche des taux plus élevés.Le classement est de loin la taille d'annonce numérique la plus utilisée, avec une étude SEMrush 2019 citant 36% des sites. éditeurs utilisant des classements et 57% des annonceurs les achetant.

La bonne chose à propos d'un leaderboard est que, même si nous utilisons la même largeur de conteneur de 970 px que la commande billboard ad, nous avons encore suffisamment de place pour un autre élément, tel qu'un logo. J'ai tendance à utiliser Flexbox pour séparer le logo du site de l'annonce. Je donne également au conteneur une hauteur fixe qui est égale ou supérieure à la hauteur du leaderboard 90px.

.header .container {
  /* Avoid content jumping */
  height: 90px;
  /* Flexibility */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Le placement de la barre latérale

le mi-page unité annonce (également appelée rectangle moyen) pèse entre 300 et 250 et est le bloc d'annonces le plus performant – littéralement n ° 1!

Étude de Google sur les taux de clics de 2018 (clics pour mille vues) comparés pour différents emplacements d'annonces. Google ne fournit plus ces statistiques. (Source: Smart Insights)

Les unités de milieu de page ont longtemps influencé la conception des barres latérales sur les sites. Encore une fois, vous pouvez voir un exemple ici sur CSS-Tricks.

Crack qui s'ouvre dans DevTools et vous verrez qu'il a une largeur de rendu d'exactement 300px.

Nous pouvons réaliser la même chose en utilisant la grille CSS:

Disons que c'est le balisage de notre mise en page:

 
Main content
 

Nous pouvons définir le wrapper comme conteneur de grille et définir deux colonnes, dont la seconde est la largeur exacte de 300 pixels de notre bloc d'annonces:

.wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}

Si nous n'affichons pas trop d'annonces dans la barre latérale et que nous voulons attirer davantage l'attention sur celles-ci, nous pouvons essayer d'utiliser la même technique collante que nous avons utilisée avec l'emplacement de navigation:

 
Main content
 
.is-sticky {
  position: sticky;
  top: 0;
}

Mais vous devez garder à l'esprit que cela affectera la portée si la barre latérale est plus longue que la fenêtre ou lorsque vous utilisez une barre latérale dynamique:

(Voir la démo)

Il y a deux façons de résoudre ce problème. La première consiste à rester simple et à ne coller que les annonces importantes. C'est le même concept appliqué à la barre latérale CSS-Tricks, la seule différence est que JavaScript bascule la visibilité:

La seconde consiste à utiliser une bibliothèque JavaScript qui inclut un comportement de défilement qui peut être utilisé pour écouter lorsque l'utilisateur atteint la fin de la barre latérale avant de déclencher le positionnement collant:

Il existe d'autres considérations lors de l'utilisation des annonces dans la barre latérale. Par exemple, supposons que l'annonce que nous obtenons soit plus petite que prévu ou que le script qui diffuse les annonces échoue pour une raison quelconque. Cela pourrait entraîner des espaces blancs redoutés et aucune des approches que nous avons examinées jusqu'à présent ne traiterait cela.

Où est passé le widget? Le bouton de désactivation est une simulation pour un bloqueur de publicités.

Voici comment j'ai abordé ce problème dans le passé. Tout d'abord, notre balisage:

...

Ensuite, nous définissons les bonnes mesures pour les colonnes de la grille:

.header .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-gap: 24px;
  min-height: 600px; /* Max height of the half-page ad */
}

Faisons maintenant de la barre latérale elle-même un conteneur flexible dont la largeur et la hauteur exactes correspondent à l'annonce, mais qui masquent tout contenu qui la déborde.

.aside {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 600px;
  width: 300px;
}

Enfin, nous pouvons styliser le .aside-content élément afin qu'il soit capable de défilement vertical dans le cas où nous aurions besoin d'afficher le widget:

.aside-content {
  overflow-y: auto;
}

Maintenant, nous avons comptabilisé des situations où la taille de l'annonce change sur nous ou lorsque nous avons besoin d'un contenu de secours.

Plus d'espace, quoi qu'il arrive avec notre annonce!

Styling Digital Ads

Maintenant que nous avons examiné les emplacements, tournons notre attention vers le style des annonces numériques. C'est toujours une bonne idée de styliser les annonces, en particulier pour deux raisons:

  1. Les annonces de style peuvent les aider à se sentir comme une partie native d'un site Web.
  2. Le style des annonces peut les rendre plus attrayantes pour les utilisateurs.

Voici quelques conseils que nous pouvons exploiter pour tirer le meilleur parti des annonces:

  • Utilisez une mise en page flexible pour que les choses soient belles avec ou sans publicité. Supposons qu'une image ne se charge pas pour une raison quelconque ou doit soudainement être supprimée du site. Plutôt que d'avoir à refactoriser un tas de balisage, il est idéal d'utiliser des techniques de mise en page CSS modernes, comme la flexbox et la grille, qui peuvent s'adapter aux changements de contenu et redistribuer le contenu, si nécessaire.
  • Utilisez un style cohérent avec la conception du site. Les annonces qui semblent appartenir à un site sont non seulement plus agréables à regarder, mais elles tirent parti de la confiance établie entre le site et ses lecteurs. Une annonce qui semble déplacée risque non seulement de paraître spammeuse, mais peut également compromettre la confiance des utilisateurs.
  • Utilisez un appel à l'action clair. Les annonces doivent provoquer une action et cette action doit être facile à identifier. Muddying les eaux avec des graphiques dominants ou trop de texte peut avoir un impact négatif sur les performances globales d'une annonce.
  • Utilisez un langage précis. Pendant que nous parlons de contenu, assurez-vous que l'annonce tient ses promesses et définit de bonnes attentes pour les utilisateurs. Il n'y a rien de plus ennuyeux que de s'attendre à obtenir une chose en cliquant sur quelque chose uniquement pour être vendu autre chose.
  • Utilisez des images haute résolution. De nombreuses annonces s'appuient sur des images pour attirer l'attention et mettre en valeur le contenu. Lorsque nous travaillons avec des annonces contenant des images, en particulier des emplacements d'annonces plus petits, il est judicieux d'utiliser des images haute résolution afin qu'elles soient claires. Pour ce faire, la méthode la plus courante consiste à créer une image deux fois plus grande que l'espace pour doubler sa densité de pixels lors du rendu.

Lorsque vous travaillez avec des annonces personnalisées où vous contrôlez la façon dont elles sont mises en œuvre, comme celles qui figurent ici sur CSS-Tricks, il est beaucoup plus facile de les adapter à une mise en page et à une conception spécifiques. Cependant, dans les cas où ils sont injectés dynamiquement, par exemple avec un script, il peut ne pas être possible de les encapsuler dans un div qui peut être utilisé pour le style; des tactiques comme utiliser :: avant et :: après les pseudo-éléments ainsi que (attribute^=value) les sélecteurs sont votre ami dans ces situations.

De nombreuses plateformes publicitaires génèrent un identifiant unique pour chaque bloc d'annonces, ce qui est formidable. Ils commencent souvent par le même préfixe que nous pouvons utiliser pour cibler nos styles:

(id^="prefix-") {
  /* your style */
}

Gestion des annonces réactives

Les plates-formes publicitaires qui fournissent un script pour injecter des annonces gèrent souvent un dimensionnement réactif en regroupant leurs propres styles et autres. Mais, lorsque ce n'est pas le cas, ou lorsque nous avons un contrôle total sur les annonces, il est crucial de prendre en compte leur affichage sur différentes tailles d'écran. Une gestion réactive appropriée garantit que les annonces ont un appel à l'action clair quelle que soit la taille de l'écran.

Flexbox, Grid et nth-child

Une chose que nous pouvons faire est de réorganiser où une annonce s'affiche. Encore une fois, la flexbox et la grille sont d'excellentes techniques CSS sur lesquelles s'appuyer car elles utilisent le order , qui peut modifier l'emplacement visuel de l'annonce sans affecter l'ordre du code source réel.

Dans cet exemple, nous essaierons de réorganiser nos articles afin que l'annonce soit visible "au-dessus du pli", ce qui est une façon élégante de dire quelque part en haut de la page avant que l'utilisateur ne commence à faire défiler.

Voici notre balisage:

 
...
 
...
 
...
 

On peut utiliser :nth-child pour sélectionner un ou plusieurs articles en fonction de leur ordre d'origine, selon une formule:

.items {
  display: grid;
  /* ... */
}


.item:nth-child(-n+2) {
  order: -1;
}


@media only screen and (min-width: 768px) {
  .article:nth-child(-n+3) {
    order: -1;
  }
}

Ce sélecteur ciblera les n premiers éléments et définira leur ordre sur une valeur négative. Cela permet à l'annonce de plonger entre les éléments en fonction de la taille de la fenêtre d'affichage:

Gestion des annonces statiques

Toutes les publicités ne peuvent pas être parfaitement flexibles… ni même conçues pour être ainsi. Nous pouvons toujours saupoudrer certains comportements réactifs pour nous assurer qu'ils fonctionnent toujours avec une mise en page à n'importe quelle taille d'écran donnée.

Par exemple, nous pouvons placer l'annonce dans un conteneur flexible et masquer les parties de l'annonce qui la débordent.

De toute évidence, il faut beaucoup de stratégie de conception pour quelque chose comme ça. Remarquez comment le contenu publicitaire important est aligné à gauche et à droite est simplement coupé.

Voici le balisage de notre conteneur flexible:

728x90

Selon que le contenu important de l'annonce se trouve à gauche ou à droite de la mise en page de l'annonce, nous pouvons justifier le contenu du conteneur soit pour flex-start, flex-end, ou même center, tout en masquant la partie débordante.

.ad {
  display: flex;
  justify-content: flex-end; /* depending on the side your important content live */
  overflow: hidden;
}

Gestion des images réactives

Bien que les annonces ne soient pas toujours créées à partir d'images statiques, beaucoup d'entre elles le sont. Cela nous donne l’occasion de tag à utiliser, ce qui nous donne plus de flexibilité pour dire au navigateur d'utiliser des images spécifiques à des tailles de fenêtre spécifiques afin de remplir l'espace aussi bien que possible.


  
  
  
  

Nous l'avons couvert un peu plus tôt, mais l'utilisation de versions haute résolution d'une image crée une image plus nette, en particulier sur un écran haute résolution. le l'élément peut aider à cela. C'est particulièrement agréable, car cela nous permet de diffuser une image plus optimisée pour les écrans basse résolution qui sont souvent associés à des vitesses Internet plus lentes.

Vous pouvez également utiliser srcset pour prendre en charge plusieurs résolutions d'affichage, ce qui permettra au navigateur de choisir la résolution d'image appropriée:

On peut même combiner les deux:


  
  
  
  

Assurons-nous de définir la bonne largeur pour l'annonce:

.selector {
  width: 250px;
}

Et utilisons les requêtes média pour pour gérer les différents actifs / tailles:

.selector {
  width: 300px;
  height: 250px;
}


@media (min-width: 768px) {
  .responsive-ad {
    width: 728px;
    height: 90px;
  }
}

Pour plus de flexibilité, nous pouvons rendre l'image responsive par rapport à son conteneur parent:

.selector img {
  display: block;
  width: 250px;
  height: auto;
}

Dans le cas de srcset, vous n'avez pas à vous soucier des performances, car le navigateur télécharge uniquement l'élément requis pour une résolution spécifique.


Ouf, il y a tellement de choses à considérer en matière d'affichage publicitaire! Différents types, différentes tailles, différentes variantes, différentes mises en page, différents formats, différentes tailles de fenêtres… et ce n'est en aucun cas un guide complet de la publicité tout-choses.

Mais j'espère que cela vous aidera à comprendre les éléments qui rendent les annonces efficaces en tant qu'éditeur de site, surtout si vous envisagez des annonces pour votre propre site. Ce que nous avons couvert ici devrait certainement vous aider à démarrer et vous aider à prendre des décisions pour tirer le meilleur parti des annonces sur un site tout en conservant une bonne expérience utilisateur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *