Die folgenden Ausführungen sind für Sie relevant, sofern Sie über eine Webseite mit Responsive Design oder über eine mobile Webseite verfügen.

Unser Adventskalender kann auf allen Endgeräten ausgespielt werden, die über einen Webbrowser mit Internetzugang verfügen (PC, Smartphones und Tablets).

Damit sich der Adventskalender der Breite des jeweiligen Browser-Fensters anpasst, stellen wir Ihnen einen kurzen Code-Snippet zur Verfügung (eine sogenannte „Weiche“). Diese Weiche erkennt die Größe des Browser-Fensters, sodass der Adventskalender mit den richtigen Maßen geladen wird.

Auf folgender Webseite finden Sie ein Beispiel (verkleinern Sie z. B. Ihr Browser-Fenster oder rufen Sie die Webseite mit Ihrem Smartphone auf): https://contentbird-convert.com/produkt/adventskalender-responsiv.

Damit der Adventskalender mit den passenden Maßen geladen wird, legen Sie drei Versionen Ihres Adventskalenders mit unterschiedlichen Maßen an. Bei den Maßen richten Sie sich nach den Breakpoints Ihrer Responsive Webseite bzw. den Maßen Ihrer mobilen Webseite. Fragen Sie dazu am besten bei Ihrer Technik nach. Auch wir können Ihnen dabei ggf. weiterhelfen. Beachten Sie, dass sich die Breakpoints auf die Breite der gesamten Webseite beziehen. Je nachdem, wo Sie Ihren Adventskalender einfügen, müssen Sie für die Breite des Adventskalenders die Breite von Sidebars o.ä. abziehen.

Stellen Sie zunächst die größte Version des Adventskalenders so weit wie möglich fertig und kopieren Sie diese zweimal: Gehen Sie dazu in der linken Navigation auf „Content-Übersicht“ und klicken bei Ihrem Adventskalender auf das Kopieren-Symbol (drittes Symbol von rechts).

Je Kopie müssen Sie folgende Änderungen vornehmen: Ändern Sie die Maße des Adventskalenders und laden Sie das Hintergrundbild in der entsprechenden Größe hoch. Positionieren Sie die Türchen neu. Auch der Hover-Effekt muss neu eingestellt werden. Beachten Sie hier, dass die Hover-Grafik die gleichen Maße haben muss wie das angepasste Hintergrundbild.

Für eine optimale Darstellung der Inhalte auf allen Endgeräten sollten die Inhalte möglichst nicht über den Adventskalender hinausragen, d.h., sie sollten nicht breiter sein als der Hintergrund des Adventskalenders.

Folgende Formate passen sich automatisch der Bildschirmgröße an und können deshalb für beide Kopien vom ursprünglichen Adventskalender übernommen werden: Quiz, Quick-Check, Typ-Check und Umfrage. Alle anderen Inhalte müssen ggf. angepasst werden, und zwar dann, wenn diese im ursprünglichen Adventskalender breiter sind als die kleinste Kopie des Adventskalenders. Das betrifft die interaktiven Formate Slideshow, Finde-das-Paar, Schiebepuzzle, Erkenne-das-Bild und Kontaktformular sowie alle Bilder und HTML-Inhalte, die Sie im Adventskalender verwenden. Die Maße der Bilder ändern Sie in einem Bildbearbeitungsprogramm und tauschen die Bilder im contentbird Convert aus. Die Maße von HTML-Inhalten können Sie direkt in der Bearbeitung der Türchen einstellen.

Die interaktiven Formate Slideshow, Finde-das-Paar, Schiebepuzzle, Erkenne-das-Bild und Kontaktformular müssen Sie eventuell für die Kopien des Adventskalenders ebenfalls kopieren und hier die Maße anpassen. Sie können diese interaktiven Formate aber auch von vornherein so anlegen, dass diese nicht breiter sind als die kleinste Version Ihres Adventskalenders – Sie richten sich also schon bei der Erstellung nach dem kleinsten Adventskalender. Dann müssen Sie diese Formate nicht kopieren.

Allgemein sollten Sie bei den Formaten Finde-das-Paar, Schiebepuzzle und Erkenne-das-Bild darauf achten, dass diese eine gewisse Breite und Höhe brauchen, um gut gespielt werden können. Deshalb würden wir diese Formate für die Mobilvariante eher nicht empfehlen. Zumindest sollten Sie für die Mobilvarianten beim Finde-das-Paar z. B. die Anzahl der Karten zu reduzieren.