Landingpages für Scans: Tempo, Daumen, Sonne, Formular

Warum Mobile First bei QR-Codes zählt

Wer gerade Ihr Plakat gescannt hat, steht auf dem Gehweg, hält das Telefon in einer Hand und ist im Mobilfunknetz unterwegs. Trotzdem entstehen viele Landingpages noch zuerst für den Desktop und werden hinterher geschrumpft. Jede Regel weiter unten folgt aus diesem Bild, und am Ende kommen die drei Punkte dazu, die eine Seite für deutsche Scans zusätzlich braucht.

Grundlagen von Mobile First

Der mobile Kontext

Wer QR-Codes scannt, ist:

unterwegs
unter Zeitdruck
einhändig aktiv
wechselnden Lichtverhältnissen ausgesetzt
im Mobilfunknetz

Was daraus für die Gestaltung folgt

Schnelles Laden ist Pflicht
Bedienung mit dem Daumen
Text mit hohem Kontrast
Knappe Inhalte
Klare Handlungsaufforderungen

Ladezeit optimieren

Zielwerte

First Contentful Paint: < 1,5 s
Time to Interactive: < 3 s
Largest Contentful Paint: < 2,5 s
Cumulative Layout Shift: < 0,1

Techniken für Tempo

Bilder komprimieren

WebP-Format nutzen
Verzögertes Laden
Passende Abmessungen
Auslieferung über ein CDN

Code verschlanken

Ungenutztes CSS entfernen
JavaScript aufschieben
Kritisches CSS einbetten
Code aufteilen

Auf jeder Ebene zwischenspeichern

Browser-Cache
Service Worker
CDN-Cache
API-Cache

Layoutprinzipien

Gestaltung für das Sichtfeld

Mobiles Sichtfeld voll ausnutzen
Kein waagerechtes Scrollen
Angemessene Schriftgrößen
Abstände für die Fingerbedienung

Hierarchie der Inhalte

Klare Überschrift (was man bekommt)
Nutzenversprechen (warum es zählt)
Wichtigste Handlungsaufforderung (was zu tun ist)
Ergänzende Inhalte (falls nötig)

Weißraum

Ausreichende Ränder
Luft zum Atmen
Optische Trennung
Klare Schwerpunkte

Elemente für die Fingerbedienung

Schaltflächen

Berührungsflächen von mindestens 44x44 px
Genügend Abstand zwischen Schaltflächen
Deutliche optische Rückmeldung
Kontrastreiche Farben

Formularfelder

Große Eingabeflächen
Passende Tastaturtypen
Automatisches Ausfüllen erlauben
Eindeutige Beschriftungen

Navigation

Menüsymbol für umfangreiche Menüs
Untere Navigationsleiste bei Apps
Fixierte Kopfzeilen sparsam einsetzen
Einfacher Weg zurück

Inhaltsstrategie

Ohne Scrollen sichtbar

Diese Elemente müssen sofort zu sehen sein:

Klare Überschrift
Nutzenversprechen
Wichtigste Handlungsaufforderung
Erkennbare Marke

Textlänge

Kurzer, überfliegbarer Text
Aufzählungen statt Absätze
Schrittweise Enthüllung
Ausklappbare Abschnitte

Einsatz von Medien

Komprimierte Bilder
Automatisch startende Videos nur mit Bedacht
Ton standardmäßig aus
Vorschaubilder

Typografie

Schriftgrößen

Fließtext: mindestens 16 px
Überschriften: 24-32 px
Schaltflächen: 16-18 px
Bildunterschriften: mindestens 14 px

Lesbarkeit

Hohe Kontrastverhältnisse
Zeilenhöhe: 1,5-1,7
Zeilenlänge: 45-75 Zeichen
Serifenlose Schrift für Bildschirme

Hierarchie

Deutliche optische Unterschiede
Einheitliche Formatierung
Aussagekräftige Überschriften
Überfliegbare Struktur

Farbe und Kontrast

Standards der Barrierefreiheit

WCAG AA als Minimum (4,5:1)
WCAG AAA bevorzugt (7:1)
Für Farbfehlsichtige geeignet
Bei simuliertem Sonnenlicht prüfen

Markenkonsistenz

Markenfarben beibehalten
Für die Lesbarkeit nachjustieren
Dunkelmodus mitdenken
Einheitliches Erlebnis

Formulare optimieren

Weniger Felder

Nur die nötigsten Pflichtfelder
Angaben schrittweise erfragen
Anmeldung über soziale Konten
Automatisches Ausfüllen unterstützen

Eingabetypen

Passende Tastaturtypen
Datumsauswahl
Auswahlliste bei langen Listen
Auswahlfelder bei wenigen Optionen

Prüfung der Eingaben

Rückmeldung in Echtzeit
Verständliche Fehlermeldungen
Betroffene Felder hervorheben
Hinweistext, wo er hilft

Testprotokoll

Gerätetests

Echte Geräte zuerst
Mehrere Bildschirmgrößen
iOS und Android
Verschiedene Browser

Leistungstests

Google PageSpeed Insights
Lighthouse-Prüfungen
WebPageTest
Beobachtung echter Nutzer

Nutzertests

Erledigung der Aufgabe
Zeit bis zum Abschluss
Punkte, die Frust erzeugen
Sammeln von Rückmeldungen

Typische Fehler

Fehler 1: Desktop-Gestaltung verkleinert

Problem: Desktop-Layouts werden geschrumpft Lösung: zuerst mobil gestalten, dann für den Desktop erweitern

Fehler 2: Zu viel Inhalt

Problem: Überfrachtung mit Informationen Lösung: kompromisslos priorisieren, Inhalte schrittweise zeigen

Fehler 3: Langsames Laden

Problem: Nutzer verlassen langsame Seiten Lösung: Bilder optimieren, Code verschlanken, CDN nutzen

Fehler 4: Winzige Berührungsflächen

Problem: frustrierendes Antippen Lösung: mindestens 44 px, dazu genügend Abstand

Konversion optimieren

Gestaltung der Handlungsaufforderung

Nur eine Hauptaktion
Kontrastierende Farbe
Handlungsorientierter Text
Auffällige Platzierung

Vertrauenselemente

Sicherheitssiegel
Bewertungen
Markenlogo
Kontaktangaben

Dringlichkeit und Knappheit

Zeitlich befristete Angebote
Hinweise zur Verfügbarkeit
Countdown-Anzeigen
Soziale Bestätigung

Auswertung einrichten

Zentrale Kennzahlen

Absprungrate
Verweildauer
Scrolltiefe
Klickrate auf die Handlungsaufforderung
Konversionsrate

Technische Umsetzung

Google Analytics 4
Heatmaps
Sitzungsaufzeichnungen
A/B-Tests

Banner, Funkloch und eigene Schriften

Drei hiesige Bedingungen entscheiden mit, ob eine gescannte Seite trägt, und alle drei betreffen die ersten zwei Sekunden.

Das Einwilligungsbanner ist der erste Bildschirm. Nach § 25 TDDDG darf davor kein nicht notwendiges Skript laufen, also sehen Ihre Besucher die Abfrage, bevor sie den Inhalt sehen. Gestalten Sie sie deshalb als Teil der Seite und nicht als Hindernis: der versprochene Inhalt dahinter sichtbar, zwei gleich gut erreichbare Schaltflächen, kein Layoutsprung, wenn das Banner verschwindet. Und prüfen Sie, dass die Seite ohne Zustimmung vollständig funktioniert, denn ein Teil Ihrer Besucher wird ablehnen.

Das Netz ist nicht überall gut. Entlang von Landstraßen, in Altbauten mit dicken Mauern und in Tiefgaragen bricht die Verbindung ein, und ein Plakat hängt oft genau dort. Bauen Sie für die schlechte Verbindung: wenige Kilobyte für den ersten sichtbaren Bereich, Bilder erst beim Scrollen, keine Schriftdatei im Rendering-Pfad. Ein Code mit einer Adresse, die auch offline etwas Sinnvolles zeigt, ist besser als eine schöne Seite, die im Funkloch weiß bleibt.

Und die Schriften gehören auf Ihren Server. Das dynamische Nachladen von Webfonts aus einem fremden Netz hat in Deutschland eine Welle von Abmahnungen ausgelöst, weil dabei die IP-Adresse der Besucher ohne Einwilligung an Dritte übertragen wird. Selbst gehostete Schriftdateien lösen das Problem und machen die Seite schneller. Dieselbe Logik gilt für Karten, Videoeinbindungen und Schaltflächen sozialer Netze: erst nach Zustimmung, oder als Bild mit Link.

Testen Sie so, wie später genutzt wird

Nehmen Sie Ihre Landingpage mit nach draußen. Öffnen Sie sie auf dem eigenen Handy, im Mobilfunknetz, bei Tageslicht, mit einem Kaffee in der anderen Hand. Alles, was langsam oder unleserlich ist oder zwei Hände verlangt, kommt auf die Mängelliste. Lighthouse-Werte sind nützlich, aber den Gehwegtest führen Ihre Scannenden tatsächlich durch.