1920 × 800 px und 1080 × 1350 px
Desktop im Seitenverhältnis 12:5, Smartphone im Hochformat 4:5 (quadratisch 1080 × 1080 px ist ebenfalls möglich). JPG im RGB- oder sRGB-Farbraum. Text und Logo sollten nicht bis an die Motivkanten laufen.
Banner-Spezifikationen
Homepage Spotlight responsive denken und sicher gestalten.
Das Motiv wird auf Desktop, Tablet und Smartphone unterschiedlich gerahmt. Gute Banner planen deshalb sichtbare Pflichtbereiche und flexible Randbereiche von Anfang an mit.
Das hier gezeigte Bannerbeispiel zeigt ein nahezu optimales Setup: starke Bildwirkung, zentrale Botschaft, klare Lesbarkeit und genug Ruheflächen, damit die Bühne auf allen Viewports funktioniert.
Grundformat
Liefern Sie je ein Motiv für Desktop und Smartphone.
Desktop und Smartphone zeigen jeweils ihr eigenes Motiv, vollständig und ohne Beschnitt. Planen Sie die zentrale Aussage für beide Formate: Über dem unteren Bildbereich liegen Headline, Subline und Button.
Wichtige Inhalte zentral halten
Headline, Logo, Datum und Hauptmotiv gehören in den dauerhaft sichtbaren Bereich der Vorlage. Randbereiche funktionieren besser für Atmosphäre, Muster oder Bildverlängerung.
Oben Abstand lassen
Die Navbar kann den oberen Bereich überdecken. Dort sollten keine Pflichtinformationen, Gesichter, Logos oder feinen Typografieelemente liegen.
Nur Bild liefern, Text von uns setzen lassen
Alternativ können Sie nur ein starkes Bildmotiv liefern. Headline, Subline und Button-Text setzen wir dann in unserem Designsystem auf die Fläche. Das wirkt redaktioneller, bleibt responsiv kontrollierbar und passt besonders gut, wenn kein fertiges Anzeigenlayout vorliegt.
Vorlage
Die Hilfsdatei zeigt sichtbare und kritische Zonen.
Nutzen Sie die Vorlage als Orientierung beim Layout. Sie markiert Bereiche, die auf allen Geräten sichtbar bleiben, Zonen mit möglicher Navbar-Überdeckung und Flächen, die auf Tablet oder Smartphone aus dem sichtbaren Ausschnitt fallen können.
- Pflichtinformationen in den immer sichtbaren Bereich setzen
- oberen Sicherheitsabstand für die Navigation einhalten
- Randbereiche nur für Hintergrund, Stimmung oder Anschnitt verwenden
- Motiv zusätzlich in schmalen Viewports prüfen
Responsive Beispiele
So verändert sich dasselbe Motiv je nach Viewport.
Die Screenshots zeigen, warum ein Banner nicht nur als große Desktopgrafik gedacht werden darf. Das Motiv muss in mehreren Ausschnitten funktionieren.
Desktop breit
Breite Bühne mit starker Fernwirkung.
Der Desktop-Viewport zeigt die große Bildfläche am vollständigsten. Trotzdem sollte die Hauptbotschaft nicht zu nah an den oberen Rand rücken.
Desktop
Lesbarkeit vor Dekoration.
Schrift braucht Kontrast, ruhigen Hintergrund und genug Abstand zu Bildkanten.
Tablet XL
Der Ausschnitt wird enger.
Seitliche Informationen können Gewicht verlieren. Die zentrale Aussage muss ohne Randdetails verständlich bleiben.
Tablet
Obere Bereiche kritisch prüfen.
Die Navigation kann Inhalte überlagern. Pflichtinformationen gehören tiefer und zentraler.
iPhone XS
Mobile zeigt die Wahrheit.
Wenn Logo, Datum und Aussage hier klar bleiben, ist das Motiv robust.
iPhone 12
Keine Pflichtinfo an den Rand.
Sehr breite Layouts verlieren mobil schnell seitliche Inhalte.
iPhone 16 Pro
Ein Motiv, mehrere Ausschnitte.
Hintergrundflächen dürfen abgeschnitten werden. Die Kernaussage darf es nicht.
Design-Checkliste
Vor der Abgabe einmal gegenprüfen.
Diese Punkte verhindern die häufigsten Probleme bei responsiven Spotlight-Bannern.
Text groß und kurz halten
Headline, Datum und Ort müssen auch auf Smartphone-Screens lesbar bleiben. Lange Copy gehört nicht in das Banner.
Kontrast bewusst planen
Text braucht eine ruhige Fläche, Abdunklung oder klare Farbtrennung. Unruhige Bildstellen reduzieren die Lesbarkeit sofort.
Ränder als flexible Zone behandeln
Links, rechts und oben sollten nur Inhalte liegen, die ohne Bedeutungsverlust angeschnitten oder verdeckt werden können.
Motiv nicht überladen
Ein klares Key Visual, eine zentrale Aussage und ein Logo funktionieren besser als viele gleich wichtige Elemente.
Navbar-Zone freihalten
Im oberen Bereich keine Gesichter, Logos, Sponsorenzeilen, Datumstexte oder wichtige Bilddetails platzieren.
Mit Vorlage final prüfen
Die Hilfsdatei zeigt, welche Bereiche dauerhaft sichtbar sind und welche Bereiche auf mobilen Viewports verschwinden können.
Call-to-action einplanen
Ein klarer Handlungsimpuls erhöht die Wirkung deutlich. Nutzen Sie einen kurzen Button-Text wie Tickets sichern, Mehr erfahren, Jetzt anmelden oder Angebot ansehen.
Nur Bild nutzen
Wenn kein fertiges Bannerlayout vorliegt, liefern Sie nur das Bild. Wir ergänzen Headline, Subline und Call-to-action im passenden kulturgehtweiter-Look.
Abgabe
Banner fertig? Wir prüfen den responsive Fit.
Senden Sie das finale Motiv zusammen mit der Ziel-URL. Wir kontrollieren vor der Veröffentlichung, ob wichtige Inhalte auf Desktop, Tablet und Smartphone sichtbar bleiben.
War dieser Artikel hilfreich?