WiFi Kampagnen - Styleguide

Diese Richtlinie beschreibt, wie Splash Pages in OCMP für mobile Endgeräte und Desktop-Ansichten aufgebaut werden sollten. Beide Varianten haben unterschiedliche Seitenverhältnisse und unterschiedliche kritische Zonen. Deshalb sollten Layouts nicht aus nur einem Hintergrund abgeleitet werden, sondern immer passend für die jeweilige Ausspielung erstellt werden.

Unabhängig vom Format gilt: Wichtige Inhalte wie Logos, Headlines, Formulare, Call-to-Actions und rechtlich relevante Hinweise gehören nie an die Außenkanten. Browserleisten, Captive-Portal-Elemente, Notches oder Cropping können dort Inhalte verdecken oder abschneiden.

Mobile Variante

Für mobile Splash Pages sollte mit einem vertikalen Ausgangsformat gearbeitet werden. Bewährt hat sich ein Hintergrundbild in 1080 x 1920 px im Hochformat. Dieses Format ist die Grundlage für Smartphone-Darstellungen und sollte so aufgebaut sein, dass zentrale Inhalte auch bei Skalierung stabil sichtbar bleiben.

Wichtige Basiswerte Mobile

• Format: 1080 x 1920 px
• Ausrichtung: Portrait / Hochformat
• Verhältnis: 9:16
• Einsatz: skalierendes Hintergrundbild

Bei mobilen Geräten ist die Safe Area besonders wichtig, weil Statusleiste, Browser-UI, Notches und Footer-Bereiche je nach Gerät unterschiedlich viel Platz einnehmen. Zusätzlich kann es bei schmaleren oder breiteren Displays zu seitlichem Cropping kommen. Alle relevanten Inhalte sollten deshalb ausschließlich in der sicheren Fläche platziert werden.

Safe Area Mobile

• X: 100 px bis 980 px
• Y: 250 px bis 1550 px
• Sichere Breite: 880 px
• Sichere Höhe: 1300 px

Desktop Variante

Für Desktop-Splash-Pages sollte mit einem horizontalen Format gearbeitet werden. Das zugehörige Referenzformat ist 1920 x 1080 px. Hier steht deutlich mehr Breite zur Verfügung, gleichzeitig muss aber darauf geachtet werden, dass Inhalte auch auf kleineren Monitoren oder bei Browser-Skalierung nicht zu weit an den Rand rutschen.

Wichtige Basiswerte Desktop

• Format: 1920 x 1080 px
• Ausrichtung: Landscape / Querformat
• Verhältnis: 16:9
• Einsatz: skalierendes Hintergrundbild

Auch auf Desktop sollte die Gestaltung nicht rein flächenfüllend gedacht werden. Der inhaltliche Schwerpunkt gehört in einen ruhigen, zentralen Bereich. So bleibt das Layout belastbar, wenn Browserfenster nicht im Vollbild geöffnet sind oder einzelne UI-Elemente zusätzliche Fläche beanspruchen.

Safe Area Desktop

• X: 320 px bis 1620 px
• Y: 100 px bis 980 px
• Sichere Breite: 1300 px
• Sichere Höhe: 880 px

Gestaltungsempfehlungen

In der Praxis funktionieren Splash Pages am besten, wenn der visuelle Schwerpunkt klar zentriert ist. Das gilt sowohl für Mobile als auch für Desktop. Zentrale Platzierung sorgt für ein ruhiges Layout und reduziert das Risiko, dass Headlines, Logos oder Buttons in kritische Randbereiche geraten.

Hintergründe sollten so gewählt werden, dass an den Außenkanten keine unverzichtbaren Motivelemente liegen. Wenn ein Bild seitlich oder oben und unten leicht beschnitten wird, darf dadurch keine wichtige Aussage verloren gehen. Besonders robust sind ruhige Motive, weiche Verläufe oder leicht unscharfe Hintergründe, auf denen sich Vordergrundelemente sauber absetzen.

Auch bei Texten empfiehlt sich Zurückhaltung. Kurze, klar gegliederte Botschaften mit ausreichend Kontrast und eindeutiger Hierarchie funktionieren deutlich besser als sehr dichte oder kleinteilige Layouts.

Bewährte Gestaltung

• Inhalte bevorzugt mittig platzieren
• Abstand zu allen Rändern lassen
• große und klar lesbare Elemente verwenden
• Hintergründe ohne kritische Randdetails wählen
• Verläufe oder ruhige Flächen bevorzugen

Was vermieden werden sollte

Problematisch sind vor allem Layouts, die sich zu stark an festen Bildschirmkanten orientieren. Inhalte in Ecken, sehr weit oben oder direkt am unteren Rand geraten schnell in Konflikt mit Browser-Elementen, Cropping oder gerätespezifischen UI-Zonen. Das gilt in Mobile-Ansichten besonders stark, ist aber auch auf Desktop relevant.

Wenn ein Design nur auf einem Referenzgerät oder nur in einer Fenstergröße sauber funktioniert, ist es für diesen Einsatzzweck meist zu fragil. Splash Pages sollten immer so gedacht werden, dass sie auf einer breiten Gerätebasis funktionieren.

Nicht empfohlen

• Texte direkt am oberen oder unteren Rand
• wichtige Inhalte nah an linker oder rechter Kante
• Inhalte in Ecken
• pixelgenaue Ausrichtung für Einzelgeräte
• sehr kleine Schriftgrößen

Formatvorgaben

Für die Produktion empfiehlt sich ein klarer, reduzierter Aufbau der Bild- und Dateivorgaben. Hintergrundbilder sollten passend zur jeweiligen Variante in den vorgesehenen Formaten angelegt werden. Logos funktionieren in der Regel am besten als PNG mit Transparenz, damit sie flexibel auf unterschiedlichen Hintergründen einsetzbar bleiben. Gleichzeitig sollte die Dateigröße schlank gehalten werden, damit die Splash Page schnell lädt.

Empfehlungen für Bild- und Dateiformate

• Mobile Hintergrundbild: 1080 x 1920 px
• Desktop Hintergrundbild: 1920 x 1080 px
• Logo: PNG mit Transparenz
• Empfohlene Logo-Breite: 300 bis 500 px
• Dateigröße: möglichst unter 1 MB

Technischer Hinweis

Unterschiedliche Geräte arbeiten mit unterschiedlichen Pixeldichten, Fenstergrößen und Browser-Overlays. Ein Bild wird daher nicht immer in einer echten 1:1-Darstellung ausgegeben. Hinzu kommen dynamische Browserleisten, eingeblendete Portal-Elemente und unterschiedliche Seitenverhältnisse, die je nach Kontext Einfluss auf den sichtbaren Bereich haben.

Deshalb sind Safe Areas keine optionale Empfehlung, sondern die technische Grundlage für eine robuste Gestaltung. Wer diese Bereiche konsequent einhält und Mobile sowie Desktop getrennt denkt, reduziert Darstellungsprobleme deutlich.

Zusammenfassung

Für Splash Pages in OCMP sollten immer zwei Varianten berücksichtigt werden: eine mobile Version im Format 1080 x 1920 px und eine Desktop-Version im Format 1920 x 1080 px. In beiden Fällen sollten relevante Inhalte zentral und mit ausreichend Abstand zu allen Außenkanten platziert werden. Ein flexibles, ruhiges Layout ist in der Praxis am belastbarsten.