Mobile-First Validierungs-Loop fuer Listing-Outputs. Konkrete Checks auf iPhone-Viewports (320px, 375px, 414px), Thumbnail-Tests (150x150px), Text-Lesbarkeit und visuelle Hierarchie auf kleinen Screens. Genutzt von Listing-Briefer, Content Master, A+ Content Designer, Quality-Reviewer. 70%+ des Amazon-Traffics ist mobil — jedes Deliverable muss diese Checks bestehen.
70% des Amazon-Traffics kommt von Mobilgeraeten. Ein Listing das auf dem Desktop gut aussieht aber auf dem iPhone faellt, verliert die Mehrheit der Kaeufer. Dieser Skill definiert die konkreten Pruefschritte pro Agent.
| Viewport | Geraet | Wichtigkeit |
|---|---|---|
| 320px | iPhone SE (kleinster noch relevanter Screen) | Jeder Text MUSS hier lesbar sein |
| 375px | iPhone 12/13/14/15 (aktuelle Standard-Groesse) | Hauptoptimierungs-Ziel |
| 414px | iPhone Plus/Max | Komfort-Anzeige |
Regel: Wenn es auf 320px nicht funktioniert, funktioniert es nicht.
Das erste Bild erscheint in Suchergebnissen als 150x150px Thumbnail. Auf dem Desktop als 300px.
Pruefe fuer Slot 1:
Fehlerbilder:
Was sieht der Kaeufer ohne zu scrollen auf einem iPhone 12/13/14?
┌─────────────────────┐
│ Produktbild │ ← Slot 1
│ (Quadrat) │
│ │
├─────────────────────┤
│ Titel (2-3 Zeilen)│ ← ersten 70 Zeichen wichtig
│ Marke │
│ Sterne + Anzahl │
├─────────────────────┤
│ Preis prominent │
│ Prime-Hinweis │
└─────────────────────┘
← Hier wird gescrollt
Pruefe:
Mobile zeigt Bullets in reduzierter Schrift. Lange Bullets werden abgeschnitten.
Pro Bullet pruefen:
Formel fuer Mobile-optimierte Bullets:
[CAPS ANKER 2-3 WOERTER] — [Benefit in 10 Woertern]. [Mechanismus/Beleg in 15 Woertern]. [Optional: Szene oder Zahl]
Text-Overlays in Slots 2-7 muessen auf Mobile lesbar bleiben.
Mindestanforderungen:
| Element | Desktop | Mobile (min) |
|---|---|---|
| Hauptueberschriften | 60pt | 40pt |
| Benefit-Callouts | 40pt | 30pt |
| Kleingedrucktes | 24pt | Vermeiden — auf Mobile unlesbar |
| Zeilenabstand | 1.2 | 1.4 (mehr Luft) |
| Kontrast | WCAG AA | WCAG AAA (hoeher) |
Regel: Wenn Text im Bild unter 30pt (relativ zur Bildgroesse) ist, gehoert er nicht ins Bild sondern in den Bulletpoint.
Mobile verzeiht keine ueberladenen Bilder. Weniger ist mehr.
Pro Slot:
A+ Content Module haben eigene Mobile-Herausforderungen:
Nach Erstellung des Briefings fuer jeden Slot:
Ergaenze im Briefing pro Slot ein Feld:
**Mobile-Check:** [PASS / WARN / FAIL]
**Mobile-Anpassung:** [Was der Designer fuer Mobile beachten muss]
Nach Erstellung von Titel und Bullets:
Ergaenze:
**Mobile-Check Titel:** Erste 70 Zeichen: "[Auszug]" — [PASS/WARN]
**Mobile-Check Bullets:** BP1 [X chars], BP2 [X chars], ...
Nach Erstellung des A+ Briefings:
Als Pflicht-Dimension im Review (add zu den 7 Dimensionen):
Dimension 11: Mobile-First Compliance
Bevor ein Agent sein Output ausliefert:
## Mobile-First Self-Check
- [ ] Thumbnail-Test (Slot 1) bestanden
- [ ] First-Screen-Hierarchy plausibel
- [ ] Bullet-Lesbarkeit auf 320px gegeben
- [ ] Text-Overlays mind. 30pt
- [ ] Content-Density max. 5 Elemente pro Slot
- [ ] A+ Content mobile-skalierbar
- [ ] Keine Elemente am Bildrand
- [ ] Keine langen Schachtelsaetze in Bullets
**Ergebnis:** [PASS / WARN mit Anmerkungen / FAIL mit Fixes]
Wenn du FAIL hast: fix und erneut pruefen, BEVOR du das Issue als done markierst.