Une amorce sur la publicité pour les concepteurs Web

De nombreux sites Web, dont celui-ci, comptent sur la publicité pour les revenus. Le placement des annonces a un impact significatif sur la conception du site Web et l'expérience utilisateur. L'intégration des annonces nécessite une attention particulière à la mise en page, à la présentation du contenu et à l'efficacité des annonces. Cet article propose des conseils et des stratégies pour incorporer de manière transparente les unités publicitaires dans les conceptions de sites Web. Nous explorerons les options de placement des annonces courantes et les techniques de style. Notez que certaines propriétés CSS utilisées peuvent ne pas être entièrement prises en charge par des navigateurs plus anciens; Envisagez d'utiliser @supports pour une amélioration progressive.

Stratégies de placement d'annonces numériques communes

De nombreuses options et tailles de placement d'annonces existent. Cependant, les placements et les tailles standard fournissent une base de référence pour les tarifs et les comparaisons métriques de l'industrie. Voici quelques exemples:

Une amorce sur la publicité pour les concepteurs Webs de barre de navigation

Placer les annonces au-dessus de la navigation principale est une stratégie très visible. L'emplacement supérieur de page permet des annonces pleine largeur et exploite une interaction utilisateur élevée. Cet espace est souvent utilisé pour d'autres contenus importants comme les alertes.

Bien que le simple fait de placer l'annonce au-dessus de la navigation est simple, envisagez d'utiliser position: sticky pour garder la navigation en haut même lorsque l'annonce défile hors de vue. Cela maintient la place de la navigation dans le flux de documents, contrairement à position: fixed , qui offre une expérience utilisateur moins fluide. Cependant, rendre la publicité collante au lieu de la navigation nécessite une attention particulière pour éviter une mauvaise expérience utilisateur.

Une amorce sur la publicité pour les concepteurs Webs en tête

Les annonces d'en-tête sont un autre placement courant, avec deux modèles répandus:

• Billboard: grandes publicités rectangulaires (généralement 970x250) servant d'appels à l'action principaux. Leur taille peut dicter la largeur de la zone de contenu principale.
• Cabilations: ADS larges et courtes (généralement Une amorce sur la publicité pour les concepteurs Web), partageant souvent de l'espace avec d'autres éléments. Ce sont extrêmement populaires.

Les classements sont beaucoup plus courants que les panneaux d'affichage. Même avec un conteneur de 970px (comme un panneau d'affichage), les classements laissent de la place pour d'autres éléments, comme un logo. Flexbox est idéal pour séparer le logo et la publicité. Une hauteur de conteneur fixe (égal ou supérieur à 90px) empêche le saut de contenu.

 .Header .Container {
  hauteur: 90px;
  Affichage: flex;
  Align-Items: Centre;
  justifier-contenu: espace-intermédiaire;
}

Une amorce sur la publicité pour les concepteurs Webs latérales

L'unité à mi-page 300x250 (rectangle moyen) est un format d'annonce le plus performant. Ses dimensions ont influencé la conception de la barre latérale. La grille CSS facilite ce placement:

Compte tenu de ce balisage:

<div>
  <main>Contenu principal</main>
  <aside>Barre latérale</aside>
</div>

Ce CSS crée une grille à deux colonnes, la seconde étant de 300px de large pour l'annonce:

 .wrapper {
  Affichage: grille;
  Grid-Template-Colonnes: Minmax (0, 1FR) 300px;
}

Pour une visibilité accrue, envisagez de rendre la barre latérale collante:

 .is-sticky {
  Position: collante;
  en haut: 0;
}

Cependant, cela a un impact sur la portée avec des barres latérales longues ou un contenu dynamique. Les solutions incluent la création de publicités clés collantes ou l'utilisation d'une bibliothèque JavaScript pour gérer le positionnement collant en fonction de la position de défilement.

S'attaquant aux problèmes d'espace potentiel à partir d'annonces ou de défaillances de script plus petites que prévu, considérez ce balisage:

<div class="wrapper">
  <main>Contenu principal</main>
  <aside class="aside">
    <div class="aside-content">Contenu de la barre latérale</div>
  </aside>
</div>

Et ce CSS:

 .wrapper {
  Affichage: grille;
  Grid-Template-Colonnes: Minmax (0, 1FR) 300px;
  Grid-Gap: 24px;
  Min-Height: 600px; / * Hauteur maximale de la demi-page AD * /
}

.aside {
  Affichage: flex;
  Flex-Direction: colonne;
  débordement: caché;
  Hauteur: 600px;
  Largeur: 300px;
}

.side-contenu {
  débordement-y: auto;
}

Cela gère les variations de la taille de l'annonce et fournit du contenu de secours.

Styliser les publicités numériques

Les publicités de style sont cruciales pour l'intégration et l'engagement des utilisateurs:

• Disposés flexibles: utilisez Flexbox et Grid pour l'adaptabilité aux changements de contenu.
• Style cohérent: Maintenez l'harmonie visuelle avec la conception du site Web.
• Des appels à l'action effacés: rendre les actions facilement identifiables.
• Langage précis: assurez-vous que les annonces reflètent avec précision leur contenu.
• Images haute résolution: utilisez des images haute résolution pour plus de clarté, en particulier dans les petits espaces publicitaires.

Pour les publicités personnalisées, le style est simple. Pour les annonces injectées dynamiquement, les pseudo-éléments ( :before :after ) et les sélecteurs d'attribut ( [attribute^=value] ) sont utiles. Les identifiants publicitaires uniques sont également utiles pour le style ciblé:

 [id ^ = "Prefix-"] {
  / * votre style * /
}

Manipulation de l'annonce réactive

Les plates-formes publicitaires gèrent souvent le dimensionnement réactif. Cependant, pour les annonces personnalisées ou lors du manque de support de plate-forme, la conception réactive est essentielle:

Flexbox, Grid et :nth-child

Réorganiser le placement des annonces à l'aide de la propriété order FlexBox et Grid. :nth-child sélectionne des éléments en fonction de leur commande:

<div class="items">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

.articles {
  Affichage: grille;
  / * ... * /
}

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

@media uniquement écran et (largeur min: 768px) {
  .item: nth-child (-n 3) {
    Ordre: -1;
  }
}

Cela réorganise les annonces en fonction de la taille de la fenêtre.

Gestion des annonces statiques

Pour les annonces inflexibles, utilisez un conteneur flexible et masquez le contenu débordant:

<div class="ad">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381889944210.png" class="lazy" alt="Une amorce sur la publicité pour les concepteurs Web">
</div>

.annonce {
  Affichage: flex;
  Justify-Content: Flex-end; / * Ajuster si nécessaire * /
  débordement: caché;
}

Gérer des images réactives

Utiliser le<picture></picture> élément et srcset pour les images réactives:

<picture>
  <source srcset="ad_Une amorce sur la publicité pour les concepteurs Web.jpg" media="(min-width: 768px)">
  <source srcset="ad_300x250.jpg" media="(min-width: 300px)">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381890181596.jpg" class="lazy" alt="Une amorce sur la publicité pour les concepteurs Web">
</source></source></picture>

Combinez avec des images haute résolution pour un affichage plus net:

<img src="/static/imghw/default1.png" data-src="ad_300x250_fallback.jpg" class="lazy" srcset="ad_300x250.jpg, ad_300x250@2x.jpg 2x" alt="Une amorce sur la publicité pour les concepteurs Web">

N'oubliez pas de définir la largeur appropriée et d'utiliser les requêtes multimédias pour différentes tailles.

La publicité d'affichage implique de nombreuses considérations. Ce guide fournit une base pour une intégration des annonces efficace tout en conservant une expérience utilisateur positive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!