Wie man Responsive Widgets erstellt: 6 Tipps mit Beispielen

Responsive Widgets werden immer wichtiger. Angesichts der Tatsache, dass fast 58% des Webverkehrs von mobilen Geräten stammen, ist es wichtig, dass alle Elemente Ihrer Website, einschließlich Popups, sich leicht an verschiedene Displays anpassen. In diesem Artikel teilen wir Tipps, wie Sie Widgets erstellen können, die sowohl auf Desktop- als auch auf Mobilbildschirmen perfekt aussehen. Außerdem analysieren wir verschiedene mobilfreundliche Widgets auf tatsächlichen Websites und zeigen, wie einfach es ist, ähnliche Widgets in unserem Editor zu erstellen.

Was ist ein Responsive Widget?

Responsive Widgets oder Popups sind Webelemente, die ihre Layouts und Größen automatisch an verschiedene Bildschirme anpassen. Dies sorgt für ein nahtloses Benutzererlebnis auf verschiedenen Geräten, einschließlich Desktops, Tablets und Mobiltelefonen. Eine weitere Option ist das adaptive Widget-Design, bei dem mehrere Versionen eines Popups erstellt werden, die jeweils für einen bestimmten Bildschirm optimiert sind. Während dies eine feinere Kontrolle über das Design für jeden Gerätetyp ermöglicht, bedeutet es auch die Verwaltung und Wartung dieser verschiedenen Versionen.

In Claspo können Sie beide Ansätze verwenden. Mit responsiven Elementen können Sie schnell und einfach gleichzeitig Web- und Mobilversionen eines Widgets erstellen. Bei Verwendung adaptiver Elemente können Sie, falls erforderlich, Anpassungen an jeder Version separat vornehmen.

Erstellen von Responsive Widgets: 6 Tipps mit Beispielen

Unsere umfangreiche Bibliothek enthält über 700 Vorlagen, die alle für mobile Displays optimiert sind. Sie können Bilder leicht austauschen, Textstile ändern, Hintergründe hinzufügen und mehr, um sicherzustellen, dass alles perfekt funktioniert. Darüber hinaus ist das Erstellen eines völlig neuen responsiven Widgets einfach, da wir alle notwendigen Werkzeuge bereitstellen.

1. Verwenden Sie Spalten, um ein Responsive Widget zu erstellen

Unser Editor verfügt über die Spaltenkomponente, die Sie verwenden können, um sicherzustellen, dass Ihr Abonnementformular auf Mobilgeräten gut aussieht. Schauen wir uns seine Funktionen genauer an.

Automatische Top-Down-Inhaltsplatzierung

Es platziert automatisch alle Widget-Elemente vertikal. Dies liegt daran, dass Benutzer Inhalte auf mobilen Geräten von oben nach unten betrachten. So können Sie sicher sein, dass Ihr Widget auf einem kleinen Bildschirm korrekt angezeigt wird.

Wenn nötig, können Sie diese Option jedoch deaktivieren, wenn die Spalten klein sind. Zum Beispiel haben wir ein kleines Symbol in eine Spalte und einen kurzen Text in die andere eingefügt. Für einen kompakteren Look des mobilen Widgets ist es besser, sie horizontal anzuordnen als vertikal.

Anpassen der Länge von Responsive Widgets

Wenn ein Bild in der Desktop-Version viel Platz einnimmt, verkleinert das System seine Größe in der mobilen Version auf 150px. Dies ist möglich, weil die Spalten spezielle Anzeigeproportionen haben, die beim Wechsel zur mobilen Version neu berechnet werden. Die Optimierung konzentriert sich auf das Bild, sodass Sie sich keine Sorgen machen müssen, dass wichtige Felder in der mobilen Version verschwinden.

Darüber hinaus können Sie jede Spalte in der mobilen Version problemlos ausblenden und in der Desktop-Version beibehalten.

2. Machen Sie saubere Responsive Widgets

Mobile Widgets sollten angemessen dimensioniert sein, um sicherzustellen, dass sie die Benutzer nicht daran hindern, auf den Hauptinhalt zuzugreifen. Dies wird ausdrücklich in den Google-Richtlinien für Popups angegeben. Um die Größe eines responsiven Widgets zu reduzieren, können Sie seine visuellen Komponenten minimieren. Im Claspo-Editor ist das Ausblenden von Bildern einfach. Wechseln Sie einfach in den mobilen Bearbeitungsmodus und klicken Sie auf die entsprechende Schaltfläche. Dies behält das Bild im Desktop-Widget bei, entfernt es jedoch aus der Version für kleinere Displays.

Im Claspo-Editor werden standardmäßig beim Bearbeiten eines Anmeldeformulars alle Schriftarten automatisch in den Abonnementstatusvorlagen geändert: Erfolg, Bereits Abonniert, Fehler. Die Schriftgröße wird in beiden Versionen synchronisiert. Sie können sie jedoch separat im mobilen Modus reduzieren, um den Text kleiner zu machen und organischer auf einem kleinen Bildschirm aussehen zu lassen. In den Einstellungen klicken Sie auf die Dropdown-Liste neben 'Textstil' und wählen 'Stil von einem Element entfernen'.

Für die mobile Version empfehlen wir, Schriftarten zu verwenden, die 2-4 Punkte kleiner sind als die auf dem Desktop verwendeten. Sie sollten jedoch den Haupttext nicht kleiner als 14-16 Punkte oder Fußnoten und Tipps nicht kleiner als 10-12 Punkte machen.

Bitte beachten Sie, dass das Entfernen des Textstils auch das Ändern der Schriftgröße in zusätzlichen Vorlagen erfordert, wenn Sie ein Anmeldeformular erstellen.

Sie können die Einstellungen sowohl für die Desktop- als auch für die mobile Version eines responsiven Widgets gleichzeitig ändern. Das System synchronisiert Einstellungen wie Hintergrund, Umrandung, Schatten und abgerundete Ecken. Beispielsweise können Sie das Aussehen der Felder für E-Mail und Abonnentenname ändern, indem Sie die Ecken abrunden und einen Hintergrund hinzufügen. Dasselbe passiert sofort in der mobilen Version.

3. Verwenden Sie den Launcher, um ein Responsive Widget auszuführen

Wenn Sie ein großes Anmeldeformular oder ein anderes großes responsives Widget hinzufügen müssen, können Sie den Launcher verwenden. Dieses Element nimmt nur minimalen Platz auf dem Bildschirm ein und ist dennoch auffällig. Schauen Sie sich an, wie dieser Ansatz auf der Website von U.S. Art Supply verwendet wird.

In Claspo haben alle Newsletter-Anmeldevorlagen Launchers, die schnell angepasst werden können. Ebenso einfach können Sie einen von Grund auf neu erstellen und an ein bestimmtes Popup anhängen. Wählen Sie eine Einstieg-Animation, um das Element links, rechts, unten oder oben aufpoppen zu lassen. Wenn Sie den Launcher auffälliger machen möchten, setzen Sie ihn auf Loop-Animation. Dies wird helfen, ihn hervorzuheben, wenn sich beispielsweise eine Chat-Schaltfläche daneben befindet.

4. Berücksichtigen Sie Alternativen zum Launcher

Der Launcher ist ein sehr praktisches Element, aber einige Benutzer könnten ihn als aufdringlich empfinden, da er nicht geschlossen werden kann. Wenn Sie eine solche Reaktion von Ihren Website-Besuchern befürchten, versuchen Sie, stattdessen ein kleines responsives Widget zu erstellen, das ein weiteres Popup in voller Größe öffnet, wenn sie darauf klicken. So sieht es auf der Handicraft-Website aus:

Visuell wird der einzige Unterschied zum Launcher das Vorhandensein einer Schließen-Schaltfläche sein.

Um eine Regel zu erstellen, damit ein anderes Popup aufgerufen wird, öffnen Sie die Option 'Aktion bei Klick' in den Einstellungen und fügen das fertige Widget an.

Sie können auch eine schwebende Leiste auf ähnliche Weise einrichten. Zum Beispiel hat das Unternehmen Makers Market ein lakonisches Widget mit einer einzigen Schaltfläche erstellt, das ein Anmeldeformular in voller Größe aktiviert.

In unserem Editor können Sie ein ähnliches responsives Widget erstellen und anpassen, indem Sie die Farbe der CTA-Schaltfläche ändern, einen Hintergrund hinzufügen, der zum Design Ihrer Website passt, usw.

5. Führen Sie Responsive Widgets mit konvertierenden Elementen aus

Sie können spezielle Komponenten zu responsiven Widgets hinzufügen, um die Aufmerksamkeit der Benutzer zu erregen und Konversionen zu fördern. Beispielsweise bietet Wine.com neuen Besuchern einen Promo-Code für ihren ersten Einkauf an:

Und wissen Sie was? Im Claspo-Editor können Sie einen Promo-Code in das Widget einbetten, den der Benutzer leicht kopieren und sofort Einkäufe bei Ihnen tätigen kann. Verwenden Sie diesen Ansatz beispielsweise in Exit-Intent-Popups, um Besucher zu fangen, die kurz davor sind, die Seite zu verlassen. So sieht es in einer unserer responsiven Widget-Vorlagen aus:

Probieren Sie diese Vorlage aus

Sie können Benutzer auch dazu ermutigen, sich für Ihren Newsletter anzumelden, indem Sie ihnen einen sofortigen Rabatt auf ihre Einkäufe anbieten. Fügen Sie dazu die eingebettete Promo-Code-Komponente zur Erfolgs-Vorlage hinzu. Dies erhöht die Chancen, dass der Besucher zu einem Käufer konvertiert, und gleichzeitig Ihre Kontaktbasis erweitert.

Ein Countdown-Timer kann den FOMO-Effekt Ihres Rabatts verstärken. Die Marke Fragrance Outlet verwendet ihn in einem Exit-Intent-Popup.

Claspo's relativer Timer startet den Countdown, wenn das Widget vor dem spezifischen Benutzer erscheint. Neben Exit-Intent kann er zu jedem Werbe-Responsive-Widget hinzugefügt werden, um die Dringlichkeit zu erhöhen. Das einzigartige Merkmal des relativen Timers ist die Anpassung des Zeitraums für jeden Besucher. Dies ermöglicht es Ihnen, eine "ewige Promotion" durchzuführen und ein größeres Publikum anzuziehen, ohne Verdacht auf Unehrlichkeit zu erregen. Die Entscheidungszeit einer Person läuft ab, aber andere Besucher können das Angebot nutzen, bevor der Timer für sie auf null geht.

Probieren Sie diese Vorlage aus

6. Vermeiden Sie Platzierungsfehler bei Responsive Widgets

Manchmal kann die Platzierung von responsiven Widgets problematisch sein, wenn ein Popup oder Launcher andere Inhalte auf einem mobilen Bildschirm überlappt. Beispielsweise haben Benutzer auf der mobilen Version des Ten Thousand Villages-Blogs nur geringe Chancen, die Produktseite zu erreichen, da die Chat-Schaltfläche die CTA-Schaltfläche blockiert.

Ähnlich riskiert die Marke Jubilee, potenzielle Abonnenten zu verlieren, aufgrund des geringen Abstands zwischen der 'E-Mail senden'-Schaltfläche und der Chat-Schaltfläche. Wenn man mit dem rechten Daumen auf den Bildschirm drückt, ist es leicht, die 'E-Mail senden'-Schaltfläche zu verfehlen.

Um solche Probleme mit einem Launcher zu verhindern, können Sie dessen Platzierung einfach anpassen. Platzieren Sie ihn einfach auf der gegenüberliegenden Seite des Bildschirms von anderen wichtigen Site-Elementen. Zusätzlich können Sie, falls erforderlich, einen benutzerdefinierten Abstand vom Launcher zu den Bildschirmrändern einstellen.

Wenn Sie mehrere Widgets für verschiedene Zwecke auf Ihrer Website hinzufügen möchten, ist es wichtig, den Fehler zu vermeiden, sie gleichzeitig auszuführen, wie es auf der Burke Decor-Website geschehen ist:

Claspo schützt Sie vor unordentlichen Bildschirmen mit seinen intelligenten Funktionen – Stille-Intervall und Überlappungsschutz.

Setzen Sie das Stille-Intervall, um einen Puffer zwischen Widget-Anzeigen zu erstellen. Das standardmäßige 3-Minuten-Intervall sorgt für ein reibungsloses Browsing-Erlebnis, kann jedoch leicht basierend auf der durchschnittlichen Besuchszeit Ihrer Website oder den spezifischen Verweildauern auf Seiten angepasst werden.

Darüber hinaus nimmt Claspo den Druck von Ihnen, indem es automatisch Widget-Überlappungen verhindert, selbst wenn Sie doppelte Anzeigeregeln haben. Das bedeutet, dass Sie sich auf die Erstellung ansprechender Inhalte konzentrieren können, ohne sich Gedanken über die Verwaltung komplexer Popup-Konfigurationen machen zu müssen.

Verbesserung der Benutzererfahrung mit Responsive Widgets

Responsive Widgets sind Schlüsselelemente einer positiven Benutzererfahrung auf Websites. Sie sorgen dafür, dass Ihre Inhalte unabhängig von der Bildschirmgröße zugänglich und ansprechend bleiben. Claspo vereinfacht den Prozess, indem es vorgefertigte, mobil-optimierte Vorlagen und intuitive Bearbeitungswerkzeuge anbietet.

Testen Sie Ihre fertigen Popups vor der Veröffentlichung auf der Website. Unsere Plattform macht es einfach, dies zu tun. So sehen Sie deren tatsächliche Platzierung und können schnell die notwendigen Anpassungen vornehmen.

Nach dem Start beginnen Sie mit dem A/B-Testing. Dies kann ebenfalls direkt in Claspo erfolgen. Testen Sie schrittweise alle wesentlichen Elemente: Design, CTA, Text und mehr. Dies wird Ihnen helfen, Ihre Zielgruppe besser zu verstehen und die Konversionsraten zu erhöhen. Das Beste daran ist, dass Sie alle in diesem Artikel beschriebenen Funktionen, einschließlich des Testens, mit unserem lebenslangen kostenlosen Plan erhalten. Melden Sie sich also an und erstellen Sie responsive Widgets ohne Aufwand.