网页设计师的展示广告入门

许多网站（包括此网站）都依赖广告作为重要的收入来源。这些广告位直接影响着我们每天构建和交互的界面。在灵活的环境中处理广告并构建包含广告的布局是一项挑战，同时还需要平衡展示我们内容的需求以及突出广告以确保其有效性的需求。

在这篇文章中，我将分享一些将广告单元集成到布局中的技巧和想法。我们将了解一些放置选项，在这些选项中，我们可能会考虑或通常期望在网页中放置广告，然后转向样式策略。

在此过程中，我可能会使用一些在旧版浏览器中不受完全支持的现代 CSS 属性。如果您希望以一种渐进增强的方式支持旧版浏览器，请查看 @supports。

常见的数字广告位置

我们可以在页面上放置广告的许多不同位置，以及我们可以使用的无限数量的尺寸和比例。也就是说，有一些标准的位置和尺寸被普遍使用，以帮助建立基线，用于设置定价并在整个行业中比较指标。我们将在这里介绍其中的一些，尽管您可以 查看有多少选项和变体在实际使用。

导航栏位置

网站主导航栏正上方的空间通常是放置广告的好位置。它之所以很棒，是因为在很多情况下，导航栏位于页面顶部，提供了一个突出的位置，既适合使用全宽布局，又有很多用户交互。这通常是为什么我们看到其他类型的重要的内容，如警报和通知，占据此空间的原因。

最简单的方法是在导航栏上方放置广告元素，然后就完成了。但是，如果我们希望在广告滚动出视野后将导航栏“固定”到页面顶部怎么办？

在这里，我们使用 position: sticky 来实现导航栏的这种效果。正如 MDN 所记录的那样，粘性元素是指

该元素根据文档的正常流进行定位，然后相对于其最近的滚动祖先（以及 包含块）进行偏移。

可能很想使用固定定位，但这样做会将导航栏从正常的文档流中移除。因此，它会固定到视口顶部并保持在那里，即使您滚动页面。这使得粘性定位成为一种更可行的方法，并提供更流畅的用户体验。

现在，我们可以反过来，将广告作为粘性元素而不是导航栏。这是您需要权衡的事情，因为在某些设计中，将导航栏隐藏在视野之外可能会导致糟糕的用户体验，更不用说持续的广告可能会干扰内容本身。换句话说，请谨慎操作。

页眉位置

在网站页眉中展示广告是另一个我们经常遇到广告的地方。页眉位置使用两种广泛使用的模式。在广告行业的行话中，它们被称为

• 广告牌：以主要号召性用语形式呈现的矩形广告，通常为 970⨉250。我们可以使用那里最宽的尺寸 970px 来设置网站主要内容区域的尺寸。
• 横幅广告：一种宽而短的广告，通常与其他元素共享空间。通常为 728⨉90。

广告牌广告位虽然很大，但很少使用（估计仅占 网站的 2%），但它们的费率较高。横幅广告是迄今为止使用最广泛的数字广告尺寸， 2019 年 SEMrush 的一项研究 指出 36% 的发布商使用横幅广告，57% 的广告客户购买横幅广告。

横幅广告的好处在于，即使我们使用与广告牌广告相同的 970px 容器宽度，我们仍然有足够的空间放置其他元素，例如徽标。我倾向于使用 flexbox 将网站徽标与广告分开。我还为容器设置了一个固定高度，该高度等于或大于 90px 的横幅广告高度。

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

侧边栏位置

页面中部 单元 广告（也称为中等矩形）尺寸为 300⨉250，是效果最佳的广告单元——确实是排名第一！

页面中部单元广告长期以来一直影响着网站侧边栏的设计。同样，您可以在 CSS-Tricks 上看到一个示例。

我们可以使用 CSS 网格实现相同的效果

假设这是我们布局的标记

<div class="wrapper">
  <main>Main content</main>
  <aside>Sidebar</aside>
</div>

我们可以将包装器设置为我们的网格容器并定义两列，第二列是我们广告单元的精确 300px 宽度

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

如果我们在侧边栏中没有显示太多广告并且想要吸引更多关注，我们可以尝试使用与导航栏位置相同的粘性技巧

<div class="wrapper">
  <main>Main content</main>
  <aside>
    <div class="is-sticky">Sidebar</div>
  </aside>
</div>

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

但您必须记住，如果侧边栏比视口长或使用动态侧边栏时，这会影响覆盖范围

我倾向于用两种方法解决此问题。第一种方法是保持简单，只使重要的广告具有粘性。它与 CSS-Tricks 侧边栏应用的原理相同，唯一的区别是 JavaScript 切换可见性

第二种方法是使用一个 JavaScript 库，其中包含滚动行为，可用于侦听用户何时到达侧边栏末尾，然后触发粘性定位

在侧边栏中使用广告时，还需要考虑其他因素。例如，假设我们得到的广告比预期的要小，或者提供广告的脚本由于某种原因而失败。这可能会导致可怕的空白区域，并且我们到目前为止查看的所有方法都无法处理这种情况。

以下是过去我解决此问题的方法。首先，我们的标记

<header class="header">
  <div class="container">

    <div class="header-content"> ... </div>
    
    <aside class="aside">
      <div class="aside-ad"> ... </div>
      <div class="aside-content"> ... </div>
    </aside>

  </div>
</header>

然后，我们为网格列设置正确的测量值

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

现在，让我们使侧边栏本身成为一个灵活的容器，其宽度和高度与我们期望广告的宽度和高度完全相同，但隐藏任何超出其范围的内容。

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

最后，我们可以设置 .aside-content 元素的样式，以便在我们需要显示小部件时能够垂直滚动。

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

现在，我们已经考虑了广告尺寸发生变化或我们需要回退内容的情况。

数字广告样式

现在我们已经了解了广告位置，让我们将注意力转向数字广告的样式。设置广告样式总是一个好主意，主要有两个原因

1. 设置广告样式可以帮助它们看起来像是网站的原生部分。
2. 设置广告样式可以使它们对用户更具吸引力。

以下是一些我们可以利用的技巧，以充分利用广告

• 使用灵活的布局，以便无论是否有广告，内容都能看起来不错。假设图像由于某种原因未加载或需要突然从网站中删除。与其重构大量标记，不如使用现代 CSS 布局技术（如 flexbox 和 grid），这些技术可以根据需要适应内容更改和重新排列内容。
• 使用与网站设计一致的样式。看起来像是属于某个网站的广告不仅赏心悦目，而且还能利用网站与其读者之间建立的信任关系。看起来格格不入的广告不仅有变成垃圾邮件的风险，也可能损害用户信任。
• 使用清晰的号召性用语。广告应该引发行动，并且该行动应该易于识别。使用过于夸张的图形或过多文本来混淆视听可能会对广告的整体效果产生负面影响。
• 使用准确的语言。既然我们谈到了内容，请确保广告兑现其承诺并为用户设定良好的期望。没有什么比点击某样东西却发现被兜售的是另一件东西更令人恼火的了。

• 使用高分辨率图像。许多广告依靠图像来吸引注意力并强调内容。当我们处理包含图像的广告时，特别是较小的广告位，最好使用高分辨率图像，以便它们清晰可见。常见的方法是将图像的大小设置为空间的两倍，以便在渲染时将其像素密度加倍。

当处理自定义广告时，您可以控制其实现方式，例如 CSS-Tricks 上的这些广告，更容易使它们适应特定的布局和设计。但是，在动态注入广告的情况下，例如使用脚本注入，可能无法将其包装在一个可用于样式化的 div 中；在这种情况下，使用 ::before 和 ::after 伪元素以及 [attribute^=value] 选择器等策略将是您的好帮手。

许多广告平台会为每个广告单元生成一个唯一的 ID，这非常棒。它们通常以相同的开头前缀开头，我们可以使用该前缀来定位我们的样式。

[id^="prefix-"] {
  /* your style */
}

处理响应式广告

提供脚本以注入广告的广告平台通常会通过捆绑自己的样式等来处理响应式大小调整。但是，在没有这种情况或我们完全控制广告的情况下，考虑它们在不同屏幕尺寸上的显示方式至关重要。正确的响应式处理可确保广告在任何屏幕尺寸下都具有清晰的号召性用语。

Flexbox、Grid 和 nth-child

我们可以做的一件事是重新排序广告的显示位置。同样，Flexbox 和 Grid 是可以依赖的很好的 CSS 技术，因为它们使用 order 属性，该属性可以更改广告的视觉位置，而不会影响实际源代码的顺序。

在这个示例中，我们将尝试重新排序项目，以便广告在“页面可见区域”中可见，这是一种花哨的说法，表示在用户需要开始滚动之前页面顶部某个位置。

这是我们的标记：

<div class="items">
  <div class="ad">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- and so on... -->
</div>

我们可以使用 :nth-child 根据公式中的源顺序选择一个或多个项目 公式

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


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


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

此选择器将定位前 n 个元素并将它们的顺序设置为负值。这允许广告根据视口的大小在项目之间穿插。

处理静态广告

并非所有广告都能完美地灵活… 或者甚至设计成那样。我们仍然可以添加一些响应式行为，以确保它们在任何给定屏幕尺寸下都能与布局一起使用。

例如，我们可以将广告放置在灵活的容器中，并隐藏溢出该容器的广告部分。

显然，类似这样的事情需要大量的设计策略。请注意，重要的广告内容如何与左侧齐平，而右侧则被简单地截断。

这是我们灵活容器的标记

<div class="ad">
  <img src="https://i.imgur.com/udEua3H.png" alt="728x90" />
</div>

根据广告的重要内容是在广告布局的左侧还是右侧，我们可以将容器内容与 flex-start、flex-end 或甚至 center 对齐，同时隐藏溢出的部分。

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

处理响应式图像

虽然广告并非总是由静态图像构成，但其中许多是。这使我们有机会使用 <picture> 标签，这使我们能够更灵活地告诉浏览器在特定视口大小下使用特定图像，以便尽可能好地填充空间。

<picture>
  <!-- Use the ad_728x90.jpg file at 768px and above  -->
  <source media="(min-width: 768px)" srcset="ad_728x90.jpg">
  <!-- The default file -->
  <img src="ad_300x250">
</picture>

我们之前简要介绍过，但使用图像的高分辨率版本可以创建更清晰的图像，尤其是在高 DPI 屏幕上。<picture> 元素可以帮助解决这个问题。它特别好，因为它允许我们为低分辨率屏幕提供更优化的图像，这些屏幕通常与较慢的互联网速度相关联。

您还可以使用 srcset 支持多个显示分辨率，这将允许浏览器选择合适的图像分辨率。

<img srcset="[email protected], [email protected] 2x" src="ad_300x250_fallback.jpg" />

我们甚至可以将两者结合起来。

<picture>
  <!-- ... -->
  <source media="(min-width: 768px)" srcset="ad_728x90.jpg, [email protected] 2x" />
  <!-- ... -->
  <img srcset="[email protected], [email protected] 2x" src="ad_300x250_fallback.jpg" />
</picture>

让我们确保为广告设置了正确的宽度。

.selector {
  width: 250px;
}

并且让我们使用媒体查询来处理不同的资源/大小 <picture>。

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


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

为了获得更大的灵活性，我们可以使图像相对于其父容器具有响应性。

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

在 srcset 的情况下，无需过多担心性能，因为浏览器只会下载特定分辨率所需的资源。

---

哇，在显示广告方面需要考虑很多因素！不同的类型、不同的尺寸、不同的变体、不同的布局、不同的格式、不同的视口尺寸……这绝不是对广告所有事物的全面指南。

但希望这能帮助您了解作为网站发布者创建有效广告的元素，特别是如果您正在考虑为自己的网站投放广告。我们这里介绍的内容肯定可以帮助您入门，并帮助您做出决策，以充分利用网站上的广告，同时保持良好的用户体验。