Sofortantwort
Above the Fold einfach erklärt
Der sichtbare Webseitenbereich ohne Scrollen – entscheidend für den ersten Eindruck.
- Kurz gesagt
- Erster sichtbarer Bereich ohne Scrollen
- Typischer Einsatz
- Landing Pages, Marketing, News-Seiten
- Wichtig zu wissen
- Variiert je nach Gerät und Bildschirmgröße
Above the Fold im Überblick
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... │
└──────────────┘Technisch betrachtet
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 |
Schritt für Schritt
Wie der Einstieg einer Seite verständlich wird
Ankunft und Aufgabe verstehen
Kläre, aus welchem Kontext Menschen kommen und welche Frage oder Erwartung sie mitbringen. Die erste Ansicht sollte diese Aufgabe erkennen lassen, statt alle Informationen gleichzeitig unterbringen zu wollen.
Nutzen und nächste Orientierung zeigen
Formuliere früh, worum es geht, für wen es relevant ist und wie die Seite weiterhilft. Eine klare visuelle Hierarchie unterstützt den Einstieg, ohne Inhalte weiter unten unsichtbar oder unwichtig zu machen.
Zugänglichkeit und Ladeverhalten prüfen
Stelle sicher, dass zentrale Information auch bei kleiner Anzeige, langsamer Verbindung oder assistiver Nutzung erreichbar bleibt. Bewegte, große oder nachladende Elemente dürfen nicht Verständlichkeit und Bedienung verdrängen.
Wirkung im ganzen Weg bewerten
Beobachte nicht nur Scrolltiefe oder Klicks am Einstieg, sondern auch ob Menschen die passende Information finden und ihr Ziel erreichen. Ein guter erster Eindruck muss den weiteren Weg unterstützen.
Konkretes Beispiel
Eine Kampagnenseite beantwortet die erste Frage
Menschen landen über einen Fachbeitrag auf einer Seite zu einem neuen Angebot. Der bisherige Einstieg zeigt ein großes Bild, aber erklärt erst weit unten, welches Problem gelöst wird.
Unklare erste Ansicht
Der sichtbare Bereich enthält mehrere Botschaften und gleichwertige Buttons. Auf mobilen Geräten verdeckt das Bild den Nutzen, während unterschiedliche Quellen jeweils eine andere Erwartung mitbringen.
Orientierter Einstieg
Die Seite benennt Problem, Zielgruppe und ersten hilfreichen Schritt klar. Detailinformationen bleiben gut auffindbar, und das Team prüft den Weg mit unterschiedlichen Geräten und echten Nutzungssituationen.
Einordnung
Vorteile und Grenzen
Das spricht dafür
- Hilft, Erwartungen beim ersten Kontakt schnell und verständlich einzuordnen.
- Schärft Hierarchie und nächsten Schritt, ohne den restlichen Inhalt zu überladen.
- Macht Unterschiede zwischen Quellen, Geräten und Einstiegssituationen sichtbar.
Das solltest du beachten
- Der sichtbare Bereich ist je nach Gerät, Zoom und Assistenztechnik nicht einheitlich definiert.
- Ein Fokus auf schnelle Wirkung kann wichtige Informationen oder Zugänglichkeit verdrängen.
- Hohe Aufmerksamkeit am Einstieg beweist nicht, dass Menschen ihr eigentliches Ziel erreichen.
Vertiefung · für FortgeschritteneVom ersten Blick zur hilfreichen Orientierung
Sichtbarer Einstieg
- Landing Page
- Zielseite mit einem klaren Conversion-Ziel.
- Call-to-Action
- Aufforderung zur Handlung – Button, Link oder Text, der zur Conversion führt.
- Core Web Vitals
- Googles drei Kernmetriken für Ladezeit, visuelle Stabilität und Interaktivität.
- Accessibility
- Digitale Inhalte für alle nutzbar machen – unabhängig von Behinderungen oder Hilfsmitteln.
- User Journey
- Alle Schritte eines Nutzers von der ersten Berührung bis zur langfristigen Bindung.