Ein Leitfaden zur Display-Werbung für Webdesigner

Viele Websites (auch diese) verlassen sich auf Werbung als wichtige Einnahmequelle. Diese Anzeigenplatzierungen wirken sich direkt auf die Benutzeroberflächen aus, die wir täglich erstellen und mit denen wir interagieren. Das Erstellen von Layouts mit Anzeigen ist ein Tanz, der den Umgang mit ihnen in fließenden Umgebungen erfordert und auch die Notwendigkeit ausbalanciert, unsere Inhalte zu präsentieren und die Anzeigen hervorzuheben, um sicherzustellen, dass sie effektiv sind.

In diesem Beitrag werde ich einige Tipps und Ideen für die Integration von Anzeigeneinheiten in Layouts teilen. Wir werden uns einige Platzierungsoptionen ansehen, bei denen wir Anzeigen auf Webseiten platzieren könnten oder typischerweise erwarten, und uns dann den Styling-Strategien zuwenden.

Ich verwende möglicherweise einige moderne CSS-Eigenschaften, die in älteren Browsern noch nicht vollständig unterstützt werden. Schauen Sie sich @supports an, wenn Sie alte Browser auf eine Weise unterstützen möchten, die progressive Verbesserung unterstützt.

Gängige digitale Anzeigenplatzierungen

Es gibt viele, viele verschiedene Orte, an denen wir Anzeigen auf einer Seite platzieren können, und eine unendliche Anzahl von Größen und Proportionen, die wir verwenden könnten. Dennoch gibt es Standardplatzierungen und -größen, die üblicherweise verwendet werden, um eine Basis zu schaffen, die für die Preisgestaltung und den Vergleich von Metriken in der Branche verwendet werden kann. Wir werden hier einige davon behandeln, obwohl Sie sehen können, wie viele Optionen und Variationen es gibt.

Die Platzierung in der Navigationsleiste

Der Bereich direkt über der Hauptnavigation einer Website ist oft eine großartige Platzierung für eine Anzeige. Das ist großartig, weil die Navigation in vielen Fällen ganz oben auf der Seite ist und somit eine prominente Stelle bietet, die sich sowohl für die Nutzung eines Vollbildlayouts als auch für viel Benutzerinteraktion eignet. Deshalb sehen wir oft andere wichtige Inhalte wie Warnungen und Benachrichtigungen in diesem Bereich.

Der einfachste Weg, dies zu tun, ist, das Anzeigenelement einfach über der Navigation zu platzieren und es dabei zu belassen. Aber was, wenn wir die Navigation oben auf der Seite „kleben“ wollen, sobald die Anzeige aus dem Blickfeld gescrollt ist?

Hier verwenden wir `position: sticky`, um diesen Effekt bei der Navigation zu erzielen. Wie von MDN dokumentiert, ist ein „sticky“ Element:

Das Element wird gemäß dem normalen Dokumentenfluss positioniert und dann relativ zu seinem nächsten scrollenden Vorfahren (und Containing Block) versetzt.

Es mag verlockend sein, stattdessen `position: fixed` zu verwenden, aber das entfernt die Navigation aus dem normalen Dokumentenfluss. Infolgedessen wird sie am oberen Bildschirmrand fixiert und bleibt dort, während Sie scrollen. Das macht `sticky` zu einer praktikableren Methode mit einer reibungsloseren Benutzererfahrung.

Jetzt könnten wir das Gegenteil tun, indem die Anzeige das „sticky“ Element statt der Navigation ist. Das ist etwas, das Sie abwägen müssen, da das Ausblenden der Navigation aus der Ansicht bei bestimmten Designs eine schlechte UX sein kann, ganz zu schweigen davon, wie persistente Anzeigen mit dem Inhalt selbst kollidieren könnten. Mit anderen Worten, gehen Sie vorsichtig vor.

Die Platzierung im Header

Das Anzeigen von Werbung im Website-Header ist ein weiterer Ort, an dem wir häufig auf Anzeigen stoßen. Es gibt zwei weit verbreitete Muster, die die Header-Platzierung nutzen. Im Jargon der Werbebranche werden sie als bezeichnet:

• Billboard: Eine rechteckige Anzeige, die als Haupt-Call-to-Action präsentiert wird. Diese sind typischerweise 970x250. Wir könnten die breiteste Größe verwenden, 970 Pixel, um die Größe des Hauptinhaltsbereichs einer Website festzulegen.
• Leaderboard: Eine Anzeige, die breit und kurz ist und oft Platz mit einem anderen Element teilt. Diese sind typischerweise 728x90.

Der Billboard-Spot wird trotz seiner Größe selten genutzt (geschätzt nur 2% der Websites), aber sie erzielen höhere Raten. Das Leaderboard ist bei weitem die am weitesten verbreitete digitale Anzeigengröße, mit einer SEMrush-Studie von 2019, die 36% der Publisher angibt, die Leaderboards nutzen, und 57% der Werbetreibenden, die sie kaufen.

Das Schöne an einem Leaderboard ist, dass wir, selbst wenn wir denselben 970-Pixel-Container verwenden, den auch die Billboard-Anzeige nutzt, immer noch genug Platz für ein weiteres Element wie ein Logo haben. Ich verwende oft Flexbox, um das Website-Logo von der Anzeige zu trennen. Ich gebe dem Container auch eine feste Höhe, die der 90-Pixel-Leaderboard-Höhe entspricht oder größer ist.

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

Die Platzierung in der Seitenleiste

Die Mid Page Unit Anzeige (auch bekannt als Medium Rectangle) ist 300x250 groß und die am besten performende Anzeigeneinheit – buchstäblich die Nummer 1!

Mid Page Units beeinflussen seit langem das Design von Seitenleisten auf Websites. Auch hier sehen Sie ein Beispiel direkt auf CSS-Tricks.

Dasselbe können wir mit CSS Grid erreichen.

Nehmen wir an, dies ist der Markup unseres Layouts.

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

Wir können den Wrapper als unser Grid-Container festlegen und zwei Spalten definieren, von denen die zweite die exakte Breite von 300 Pixeln unserer Anzeigeneinheit hat.

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

Wenn wir nicht zu viele Anzeigen in der Seitenleiste anzeigen und mehr Aufmerksamkeit auf sie lenken wollen, können wir die gleiche Sticky-Technik verwenden, die wir auch bei der Platzierung der Navigation angewendet haben.

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

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

Sie müssen jedoch bedenken, dass dies die Reichweite beeinträchtigt, wenn die Seitenleiste länger als der Viewport ist oder wenn Sie eine dynamische Seitenleiste verwenden.

Es gibt zwei Wege, wie ich dieses Problem löse. Der erste ist, es einfach zu halten und nur wichtige Anzeigen „sticky“ zu machen. Es ist das gleiche Konzept, das auf die CSS-Tricks-Seitenleiste angewendet wird, der einzige Unterschied ist, dass JavaScript die Sichtbarkeit umschaltet.

Der zweite Weg ist die Verwendung einer JavaScript-Bibliothek, die ein Scroll-Verhalten beinhaltet, das verwendet werden kann, um zu erkennen, wenn der Benutzer das Ende der Seitenleiste erreicht, bevor das „sticky“ Positioning ausgelöst wird.

Es gibt noch andere Überlegungen bei der Arbeit mit Anzeigen in der Seitenleiste. Nehmen wir zum Beispiel an, die Anzeige, die wir erhalten, ist kleiner als erwartet oder das Skript, das die Anzeigen liefert, schlägt aus irgendeinem Grund fehl. Dies könnte zu unerwünschtem Weißraum führen und keiner der bisher betrachteten Ansätze würde damit umgehen können.

Hier ist, wie ich dieses Problem in der Vergangenheit gelöst habe. Zuerst unser Markup.

<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>

Dann legen wir die richtigen Maße für die Grid-Spalten fest.

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

Machen wir nun die Seitenleiste selbst zu einem flexiblen Container, der die exakte Breite und Höhe hat, die wir von der Anzeige erwarten, aber jeglichen überlaufenden Inhalt ausblendet.

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

Schließlich können wir das Element `.aside-content` so stylen, dass es vertikal scrollen kann, falls wir das Widget anzeigen müssen.

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

Jetzt haben wir Situationen berücksichtigt, in denen sich die Größe der Anzeige ändert oder wir Fallback-Inhalte benötigen.

Styling digitaler Anzeigen

Nachdem wir uns mit den Platzierungen befasst haben, wenden wir uns nun dem Styling digitaler Anzeigen zu. Es ist immer eine gute Idee, Anzeigen zu stylen, insbesondere aus zwei Gründen:

1. Das Styling von Anzeigen kann dazu beitragen, dass sie sich wie ein natürlicher Teil einer Website anfühlen.
2. Das Styling von Anzeigen kann sie für Benutzer attraktiver machen.

Hier sind einige Tipps, die wir nutzen können, um das Beste aus Anzeigen herauszuholen:

• Verwenden Sie ein flexibles Layout, damit Dinge mit oder ohne Anzeigen gut aussehen. Angenommen, ein Bild lädt aus irgendeinem Grund nicht oder muss plötzlich von der Website entfernt werden. Anstatt eine Menge Markup umstrukturieren zu müssen, ist es ideal, moderne CSS-Layout-Techniken wie Flexbox und Grid zu verwenden, die sich an Inhaltsänderungen anpassen und Inhalte nach Bedarf neu anordnen können.
• Verwenden Sie ein Design, das mit dem Website-Design konsistent ist. Anzeigen, die so aussehen, als ob sie auf eine Website gehören, sind nicht nur angenehmer für das Auge, sondern nutzen auch das Vertrauen, das zwischen der Website und ihren Lesern aufgebaut wurde. Eine Anzeige, die sich fehl am Platz anfühlt, birgt nicht nur die Gefahr, spammy auszusehen, sondern kann auch das Vertrauen der Benutzer beeinträchtigen.
• Verwenden Sie einen klaren Call-to-Action. Anzeigen sollten zum Handeln anregen und diese Aktion sollte leicht erkennbar sein. Das Vermischen der Gewässer mit aufdringlicher Grafik oder zu viel Text kann die Gesamtleistung einer Anzeige negativ beeinflussen.
• Verwenden Sie eine präzise Sprache. Solange wir beim Thema Inhalt sind, stellen Sie sicher, dass die Anzeige ihre Versprechen einhält und gute Erwartungen für die Benutzer setzt. Es gibt nichts Ärgerlicheres, als zu erwarten, etwas zu bekommen, wenn man auf etwas klickt, nur um dann etwas anderes verkauft zu bekommen.
• Verwenden Sie hochauflösende Bilder. Viele Anzeigen verlassen sich auf Bilder, um Aufmerksamkeit zu erregen und Inhalte hervorzuheben. Wenn wir mit Anzeigen arbeiten, die Bilder enthalten, insbesondere in kleineren Anzeigenplatzierungen, ist es eine gute Idee, hochauflösende Bilder zu verwenden, damit sie kristallklar sind. Die übliche Methode dafür ist, ein Bild doppelt so groß wie der Platz zu machen, um seine Pixeldichte bei der Darstellung zu verdoppeln.

Wenn Sie mit benutzerdefinierten Anzeigen arbeiten, bei denen Sie die Implementierung kontrollieren können, wie z. B. die hier auf CSS-Tricks, ist es viel einfacher, sie an ein bestimmtes Layout und Design anzupassen. In Fällen, in denen sie dynamisch injiziert werden, z. B. mit einem Skript, ist es möglicherweise nicht möglich, sie in ein `div` zu verpacken, das für das Styling verwendet werden kann. Taktiken wie die Verwendung von ::before- und ::after-Pseudo-Elementen sowie `[attribute^=value]`-Selektoren sind in diesen Situationen hilfreich.

Viele Werbeplattformen generieren eine eindeutige ID für jede Anzeigeneinheit, was großartig ist. Sie beginnen oft mit demselben Präfix, das wir zur Zielgruppenansprache unserer Stile verwenden können.

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

Umgang mit responsiven Anzeigen

Anzeigenplattformen, die ein Skript zur Injektion von Anzeigen bereitstellen, kümmern sich oft um responsives Sizing, indem sie ihre eigenen Stile und dergleichen bündeln. Aber wenn das nicht der Fall ist oder wenn wir die volle Kontrolle über die Anzeigen haben, ist die Berücksichtigung, wie sie auf verschiedenen Bildschirmgrößen angezeigt werden, entscheidend. Eine ordnungsgemäße responsiv-konforme Handhabung stellt sicher, dass Anzeigen auf jeder Bildschirmgröße einen klaren Call-to-Action haben.

Flexbox, Grid und nth-child

Eine Sache, die wir tun können, ist die Neuordnung der Anzeige. Wiederum sind Flexbox und Grid großartige CSS-Techniken, auf die man sich verlassen kann, da sie die `order`-Eigenschaft verwenden, die die visuelle Platzierung der Anzeige ändern kann, ohne die Reihenfolge des tatsächlichen Quellcodes zu beeinflussen.

In diesem Beispiel versuchen wir, unsere Elemente neu anzuordnen, damit die Anzeige „above the fold“ sichtbar ist, was ein schicker Ausdruck dafür ist, dass sie irgendwo oben auf der Seite erscheint, bevor der Benutzer zu scrollen beginnt.

Hier ist unser Markup: 

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

Wir können `:nth-child` verwenden, um ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge nach einer Formel auszuwählen.

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


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


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

Dieser Selektor zielt auf die ersten n Elemente ab und setzt ihre Reihenfolge auf einen negativen Wert. Dadurch kann die Anzeige je nach Größe des Viewports zwischen den Elementen „tauchen“.

Umgang mit statischen Anzeigen

Nicht alle Anzeigen können perfekt flexibel sein ... oder sind sogar so konzipiert. Wir können trotzdem etwas responsives Verhalten einstreuen, um sicherzustellen, dass sie auf jeder Bildschirmgröße mit einem Layout funktionieren.

Zum Beispiel können wir die Anzeige in einem flexiblen Container platzieren und die Teile der Anzeige ausblenden, die ihn überlaufen.

Offensichtlich ist für so etwas eine Menge Designstrategie erforderlich. Beachten Sie, wie der wichtige Anzeigeninhalt bündig links abschließt und der rechte einfach abgeschnitten ist.

Hier ist das Markup für unseren flexiblen Container.

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

Je nachdem, ob der wichtige Anzeigeninhalt links oder rechts vom Anzeigenlayout liegt, können wir den Containerinhalt entweder auf `flex-start`, `flex-end` oder sogar `center` ausrichten und den überlaufenden Teil ausblenden.

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

Umgang mit responsiven Bildern

Obwohl Anzeigen nicht immer aus statischen Bildern bestehen, sind viele von ihnen das. Das gibt uns die Möglichkeit, das  <picture>-Tag zu nutzen, was uns mehr Flexibilität gibt, dem Browser mitzuteilen, spezifische Bilder bei spezifischen Viewport-Größen zu verwenden, um den Raum so gut wie möglich auszufüllen.

<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>

Wir haben es bereits kurz erwähnt, aber die Verwendung von hochauflösenden Versionen eines Bildes erzeugt ein schärferes Bild, insbesondere auf hochauflösenden Bildschirmen. Das ``-Element kann dabei helfen. Es ist besonders praktisch, da es uns ermöglicht, für Bildschirme mit niedriger Auflösung, die oft mit langsameren Internetgeschwindigkeiten verbunden sind, ein optimierteres Bild zu liefern.

Eine weitere Möglichkeit besteht darin, `srcset` zur Unterstützung mehrerer Bildschirmauflösungen zu verwenden, wodurch der Browser die geeignete Bildauflösung auswählen kann.

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

Wir können sogar beides kombinieren.

<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>

Stellen wir sicher, dass wir die richtige Breite für die Anzeige einstellen.

.selector {
  width: 250px;
}

Und verwenden wir Media Queries für ``, um die verschiedenen Assets/Größen zu handhaben.

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


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

Für mehr Flexibilität können wir das Bild responsiv in Bezug auf seinen übergeordneten Container machen.

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

Im Fall von `srcset` müssen wir uns nicht viel um die Leistung kümmern, da der Browser nur das benötigte Asset für eine bestimmte Auflösung herunterlädt.

---

Puh, es gibt so viel zu bedenken, wenn es um Display-Werbung geht! Verschiedene Arten, verschiedene Größen, verschiedene Variationen, verschiedene Layouts, verschiedene Formate, verschiedene Viewport-Größen... und dies ist keineswegs ein umfassender Leitfaden für alle werberelevanten Themen.

Aber hoffentlich hilft dies Ihnen, die Elemente zu verstehen, die für effektive Anzeigen als Website-Publisher wichtig sind, insbesondere wenn Sie Anzeigen für Ihre eigene Website in Betracht ziehen. Was wir hier behandelt haben, sollte Sie sicherlich in Gang bringen und Ihnen helfen, Entscheidungen zu treffen, um das Beste aus Anzeigen auf einer Website herauszuholen und gleichzeitig eine gute Benutzererfahrung zu gewährleisten.