Comment créer des widgets réactifs : 6 conseils avec des exemples
Les widgets réactifs deviennent de plus en plus essentiels. Étant donné que presque 58 % du trafic web provient d'appareils mobiles, il est important que tous les éléments de votre site web, y compris les popups, s'adaptent facilement à différents écrans. Dans cet article, nous partagerons des conseils sur la façon de créer des widgets qui ressemblent parfaitement sur les écrans de bureau et mobiles. De plus, nous analyserons différents widgets adaptés aux mobiles sur des sites web réels et démontrerons à quel point il est facile d'en créer des similaires dans notre éditeur.
Qu'est-ce qu'un Widget Réactif
Les widgets ou popups réactifs sont des éléments web qui ajustent automatiquement leur mise en page et leur taille pour s'adapter à différents écrans. Cela garantit une expérience utilisateur transparente sur divers appareils, y compris les ordinateurs de bureau, les tablettes et les téléphones mobiles. Une autre option est la conception de widgets adaptatifs, qui consiste à créer plusieurs versions d'un pop-up, chacune optimisée pour un écran spécifique. Bien que cela donne un contrôle plus précis sur la conception pour chaque type d'appareil, cela signifie également la gestion et la maintenance de ces différentes versions.
Dans Claspo, vous pouvez utiliser les deux approches. Avec des éléments réactifs, vous pouvez rapidement et facilement créer des versions web et mobile d'un widget simultanément. En utilisant des éléments adaptatifs, vous pouvez apporter des ajustements à chaque version séparément si nécessaire.
Créer des Widgets Réactifs : 6 Conseils avec des Exemples
Notre vaste bibliothèque contient plus de 700 modèles, tous optimisés pour les affichages mobiles. Vous pouvez facilement remplacer les images, changer les styles de texte, ajouter des arrière-plans et plus encore pour que tout fonctionne parfaitement. De plus, créer un widget réactif entièrement nouveau est simple, car nous fournissons tous les outils nécessaires.
1. Utilisez des Colonnes pour Créer des Widgets Réactifs
Notre éditeur dispose du composant des colonnes, que vous pouvez utiliser pour vous assurer que votre formulaire d'abonnement est esthétique sur mobile. Regardons de plus près ses fonctionnalités.
Placement Automatique du Contenu de Haut en Bas
Il place automatiquement tous les éléments du widget verticalement. En effet, les utilisateurs consultent le contenu sur les appareils mobiles de haut en bas. Vous pouvez donc être sûr que votre widget sera affiché correctement sur un petit écran.
Cependant, si nécessaire, vous pouvez désactiver cette option lorsque les colonnes sont petites. Par exemple, nous avons placé une petite icône dans une colonne et un court texte dans l'autre. Pour un aspect plus compact du widget mobile, il vaut mieux les disposer horizontalement plutôt que verticalement.
Ajuster la Longueur des Widgets Réactifs
Si une image prend beaucoup de place dans la version bureau, le système réduit sa taille à 150px dans la version mobile. Cela est possible parce que les colonnes ont des proportions d'affichage spéciales qui sont recalculées lors du passage à la version mobile. L'optimisation se concentre sur l'image, vous n'avez donc pas à vous inquiéter de la disparition de champs importants dans la version mobile.
De plus, vous pouvez facilement masquer n'importe quelle colonne dans la version mobile et la conserver dans la version bureau.
2. Créez des Widgets Responsifs et Propres
Les widgets mobiles doivent être de taille appropriée pour garantir qu'ils ne bloquent pas l'accès des utilisateurs au contenu principal. Ceci est spécifiquement mentionné dans les exigences de Google pour les popups. Pour réduire la taille d'un widget responsive, vous pouvez minimiser son composant visuel. Dans l'éditeur Claspo, masquer les images est simple. Il suffit de passer en mode d'édition mobile et de cliquer sur le bouton correspondant. Cela gardera l'image dans le widget de bureau mais la supprimera de la version pour les écrans plus petits.
Dans Claspo, par défaut, lors de l'édition d'un formulaire de connexion, toutes les polices sont automatiquement modifiées sur les modèles d'état d'abonnement : Succès, Déjà Abonné, Erreur. La taille de la police est synchronisée dans les deux versions. Cependant, vous pouvez la réduire séparément en mode mobile pour rendre le texte plus petit et plus organique sur un petit écran. Dans les paramètres, cliquez sur la liste déroulante à côté de 'Style de texte' et sélectionnez 'Supprimer le style d'un élément.'
Pour la version mobile, nous recommandons d'utiliser des polices de 2 à 4 points plus petites que celles utilisées sur le bureau. Cependant, vous ne devriez pas réduire le texte principal à moins de 14-16 points ni les notes de bas de page et les astuces à moins de 10-12 points.
Veuillez noter que la suppression du style de texte nécessitera également de changer la taille de la police dans des modèles supplémentaires si vous créez un formulaire d'abonnement.
Vous pouvez simultanément modifier les paramètres pour les versions bureau et mobile d'un widget responsive. Le système synchronise des paramètres tels que l'arrière-plan, le contour, l'ombre et les coins arrondis. Par exemple, vous pouvez modifier l'apparence des champs de courriel et des noms d'abonnés en arrondissant les coins et en ajoutant un arrière-plan. La même chose se produit instantanément dans la version mobile.
3. Utilisez le Lanceur pour Exécuter un Widget Responsive
Si vous devez ajouter un grand formulaire d'abonnement ou un autre widget réactif de taille importante, vous pouvez utiliser le lanceur. Cet élément prend un minimum d'espace à l'écran tout en restant visible. Découvrez comment cette approche est utilisée sur le site web de U.S. Art Supply.
Dans Claspo, tous les modèles d'abonnement à la newsletter ont des lanceurs qui peuvent être rapidement personnalisés. Tout aussi facilement, vous pouvez en créer un à partir de zéro et l'attacher à une popup spécifique. Choisissez une animation d'entrée pour faire apparaître l'élément à gauche, à droite, en bas ou en haut. Si vous voulez rendre le lanceur plus visible, réglez-le sur l'animation en boucle. Cela aidera à le mettre en valeur s'il y a un bouton de chat à côté, etc.
4. Considérez les Alternatives au Lanceur
Le lanceur est un élément très pratique, mais certains utilisateurs peuvent le trouver intrusif car il ne peut pas être fermé. Si vous craignez une telle réaction de la part de vos visiteurs, essayez de créer un petit widget réactif à la place, qui ouvrira une autre popup pleine taille lorsqu'ils cliqueront dessus. Voyez comment cela se présente sur le site Handicraft:
Visuellement, la seule différence par rapport à un lanceur sera la présence d'un bouton de fermeture.
Pour définir une règle pour qu'il appelle une autre popup, ouvrez l'option ‘Action au clic’ dans les paramètres et attachez le widget prêt à l'emploi.
Vous pouvez également configurer une barre flottante de manière similaire. Par exemple, la société Makers Market a créé un widget laconique avec un seul bouton qui active un formulaire d'abonnement pleine taille.
Dans notre éditeur, vous pouvez créer un widget réactif similaire et le personnaliser en changeant la couleur du bouton CTA, en ajoutant un arrière-plan qui correspond au design de votre site, etc.
5. Exécutez des Widgets Réactifs avec des Éléments de Conversion
Vous pouvez ajouter des composants spéciaux aux widgets réactifs pour capter l’attention des utilisateurs et encourager la conversion. Par exemple, Wine.com offre aux nouveaux visiteurs un code promotionnel pour leur premier achat :
Et devinez quoi ? Dans l'éditeur Claspo, vous pouvez ajouter un code promo intégré dans le widget que l'utilisateur peut facilement copier et se précipiter pour faire des achats chez vous. Par exemple, utilisez cette approche dans les popups de sortie pour retenir les visiteurs sur le point de partir. Voici à quoi cela ressemble sur l'un de nos modèles de widgets réactifs :
Vous pouvez également encourager les utilisateurs à s'abonner à votre newsletter en leur offrant une réduction immédiate sur leurs achats. Pour cela, ajoutez le composant de code promo intégré au modèle Success. Cela augmentera les chances que le visiteur se convertisse en acheteur et, en même temps, augmentera votre base de contacts.
Un compte à rebours peut renforcer l'effet FOMO de votre réduction. La marque Fragrance Outlet l'utilise dans un pop-up de sortie intentionnelle.
Le composant compte à rebours relatif de Claspo commence à décompter lorsque le widget apparaît devant l'utilisateur spécifique. En plus de l'intention de sortie, il peut être ajouté à tout widget promotionnel réactif pour augmenter l'urgence. La caractéristique unique du compte à rebours relatif est qu'il adapte la période de temps pour chaque visiteur. Cela vous permet de gérer une 'promotion éternelle' et d'attirer un plus grand public sans susciter des soupçons de malhonnêteté. Le temps de décision d'une personne expire, mais d'autres visiteurs pourront profiter de l'offre avant que le compte à rebours n'atteigne zéro pour eux.
6. Évitez les erreurs de placement des widgets réactifs
Parfois, le placement des widgets réactifs peut poser problème lorsqu'un pop-up ou un lanceur chevauche d'autres contenus sur un écran mobile. Par exemple, dans la version mobile du blog Ten Thousand Villages, les utilisateurs ont peu de chances d'atteindre la page produit car le bouton de chat bloque le bouton CTA.
De même, la marque Jubilee risque de perdre des abonnés potentiels en raison de la petite distance entre le bouton 'envoyer un email' et le bouton de chat. Lorsque vous appuyez sur l'écran avec votre pouce droit, il est facile de manquer le bouton 'envoyer un email'.
Pour éviter de tels problèmes avec un lanceur, vous pouvez facilement ajuster son placement. Il suffit de le placer du côté opposé de l'écran par rapport aux autres éléments importants du site. De plus, vous pouvez définir une distance personnalisée entre le lanceur et les bords de l'écran si nécessaire.
Si vous souhaitez ajouter plusieurs widgets à votre site pour différentes fins, il est important d'éviter l'erreur de les exécuter simultanément, comme cela s'est produit sur le site Burke Decor :
Claspo vous protège des écrans encombrés avec ses fonctionnalités intelligentes — l'intervalle de silence et la protection contre le chevauchement.
Définissez l'intervalle de silence pour créer un tampon entre les affichages de widgets. L'intervalle par défaut de 3 minutes assure une expérience de navigation fluide, mais vous pouvez facilement le personnaliser en fonction de la durée moyenne de visite de votre site ou des temps de séjour spécifiques de vos pages.
De plus, Claspo vous décharge en empêchant automatiquement le chevauchement des widgets, même lorsque vous avez des règles d'affichage dupliquées. Cela signifie que vous pouvez vous concentrer sur la création de contenu engageant sans vous inquiéter de la gestion de configurations de popups complexes.
Améliorer l'UX avec des Widgets Responsives
Les widgets responsives sont des éléments clés du site web pour une expérience utilisateur positive. Ils garantissent que votre contenu reste accessible et engageant, quelle que soit la taille de l'écran. Claspo simplifie le processus en offrant des modèles préconstruits optimisés pour mobiles et des outils d'édition intuitifs.
Avant de publier, testez vos popups prêts sur le site. Notre plateforme facilite cette tâche. De cette façon, vous verrez leur emplacement réel et pourrez rapidement apporter les ajustements nécessaires.
Après les avoir lancés, commencez le test A/B. Cela peut également être fait directement dans Claspo. Testez progressivement tous les éléments essentiels : design, CTA, texte, et plus encore. Cela vous aidera à mieux comprendre votre audience et à augmenter les conversions. Le meilleur, c'est que vous obtiendrez toutes les fonctionnalités décrites dans cet article, incluant les tests, avec notre plan gratuit à vie. Alors, inscrivez-vous et créez des widgets responsives sans tracas.
