Marketing Digital
Landing Page
Eine speziell gestaltete Webseite mit einem klaren Ziel – Besucher zu einer bestimmten Aktion zu bewegen, sei es Kauf, Anmeldung oder Download.
Einfach erklärt
Above the Fold ist der Teil einer Webseite, den Nutzer sofort sehen – ohne zu scrollen. Hier entscheidet sich in Sekunden, ob jemand bleibt oder geht.
Desktop vs. Mobile:
Desktop-Viewport:
┌────────────────────────────────┐
│ │ ← Above the Fold
│ Logo Navigation │ (je nach Viewport)
│ │
│ Headline │
│ Subheadline │
│ [CTA Button] │
│ │
├────────────────────────────────┤ ← Fold Line
│ │
│ Below the Fold │
│ (erfordert Scrollen) │
│ │
└────────────────────────────────┘
Mobile-Viewport:
┌──────────────┐
│ Logo ☰ │ ← Above the Fold
│ │ (je nach Gerät)
│ Headline │
│ │
│ [CTA] │
├──────────────┤ ← Fold Line
│ │
│ Below... │
└──────────────┘Technischer Deep Dive
Was gehört Above the Fold?
| Element | Priorität | Warum |
|---|---|---|
| Logo | Hoch | Branding, Vertrauen |
| Headline | Kritisch | Value Proposition |
| CTA | Kritisch | Conversion-Ziel |
| Hero Image/Video | Mittel | Emotionale Wirkung |
| Navigation | Mittel | Orientierung |
| Social Proof | Optional | Vertrauen |
Viewport-Größen testen
// Aktuelle Viewport-Größe ermitteln
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;
console.log(`Viewport: ${viewportWidth}×${viewportHeight}`);
// Typische Breakpoints
const breakpoints = {
mobile: 375,
tablet: 768,
desktop: 1024,
large: 1440
};Scroll-Tiefe messen
// Wie viel Prozent der Seite wurden gesehen?
function trackScrollDepth() {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight;
const winHeight = window.innerHeight;
const scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;
// Analytics Event
if (scrollPercent >= 25 && !tracked25) {
gtag('event', 'scroll', { depth: '25%' });
tracked25 = true;
}
// ... 50%, 75%, 100%
}
window.addEventListener('scroll', trackScrollDepth);Performance optimieren
<!-- Kritische Ressourcen priorisieren -->
<head>
<!-- Above-the-fold CSS inline -->
<style>
.hero { ... }
.headline { ... }
.cta { ... }
</style>
<!-- Rest async laden -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
</head>
<!-- Hero-Bild priorisieren -->
<img src="hero.webp"
fetchpriority="high"
loading="eager"
alt="Hero">
<!-- Below-the-fold lazy laden -->
<img src="feature.webp"
loading="lazy"
alt="Feature">Best Practices
| Do | Don’t |
|---|---|
| Klare Headline | Zu viel Text |
| Ein primärer CTA | Mehrere konkurrierende CTAs |
| Schnell ladende Bilder | Große, unoptimierte Bilder |
| Mobile-first Design | Desktop-only denken |
| Whitespace nutzen | Überladen |