El La conception réactive est aujourd'hui vitale en raison des différents formats auquel un utilisateur fait face depuis sa tablette, son mobile et même son ordinateur. Cette conception réactive dans le marketing par e-mail et les pages de destination est plus qu'importante pour la communication omnicanale avec nos clients.
Il faut donc prendre au sérieux les différents modèles avec différentes largeurs pour arriver avec le meilleur design possible ces newsletters ou cette page de destination où les futurs clients que nous voulons qu'ils convertissent à partir de nos publicités sur Google ou Facebook atterriront.
Conception réactive dans le marketing par e-mail
Le marketing par e-mail est l'un des moyens d'annoncer les offres de produits ou les nouveaux articles créés sur notre blog pour ainsi rétréci d'une manière plus profonde avec tous nos adeptes.
Que ces newsletters soient réactives signifie que ils sont parfaitement visibles depuis un mobile, une tablette ou un ordinateur. Il faut donc essayer de disposer des outils nécessaires pour que tous les éléments visuels soient suffisamment harmonieux pour une lecture aisée de la newsletter.
Newsletter IKEA
Réactif signifie que l'affichage d'une page sur différents appareils est toujours correct. Pour cela, nous avons des outils de e-mail marketing qui nous aident à tester la newsletter créée dans différents formats et ainsi modifier des valeurs telles que le padding ou la marge afin qu'elles soient parfaitement repositionnées au fur et à mesure que nous réduisons la largeur de notre navigateur.
Dans le la conception Web avec CSS "Media Queries" est utilisée pour concevoir un site Web selon le format. Jusqu'à 360px serait pour un mobile, et de 360px à 650px, nous pourrions apporter des modifications pour tous les utilisateurs qui voient notre site Web à partir d'une tablette.
Certains des principes de nos newsletters de marketing par e-mail sont:
- Une hiérarchie visuelle claire: un titre en H2 pour laisser le texte au format paragraphe.
- Deux sources différentes: un pour le titre et un pour le texte rendent notre newsletter plus lisible.
- El utilisation de la couleur pour différencier le titre, le texte et d'autres éléments: on peut progressivement passer d'un gris foncé à un plus clair.
- Un CTA (appel à l'action) clair et distinctif: si le logo de notre société est en rouge, le CTA pourrait dans cette couleur tandis que le reste dans une couleur complémentaire.
Nous vous donnons un exemple clair d'une grande responsive design dans une newsletter réalisée par Filmin et que vous pouvez voir dans l'image fournie. Typographie claire en blanc, et le texte en gris très clair qui nous permet de visualiser rapidement les différents espaces dans lesquels nous sommes invités à lire si nous le voulons. Le CTA n'est pas qu'il vient d'un autre monde, mais il aide avec cette icône de jeu et cela nous fait voir ce qui nous attend.
Espaces suffisants dans les marges, blanc comme couleur principale pour le texte et qui s'accorde parfaitement avec le logo De la marque; entouré de ce gris qui le fait ressortir. Une image accrocheuse qui définit le point pour une newsletter qui accroche dès le premier instant. Des espaces sont également laissés sur les côtés afin que toute la largeur de l'écran ne soit pas «mangée».
Sur la version de bureau maintient ces principes, même en laissant plus d'espace dans les textes et en laissant une grande marge de chaque côté:
Conception réactive sur une page de destination
Les les mêmes principes peuvent être utilisés dans la conception réactive d'une page de destination. Il est extrêmement important de prendre tout le temps du monde pour bien choisir le modèle et suivre certaines règles de conception:
- Simplicité visuelle: Nous parlons de garder des espaces vides pour mettre l'accent sur les CTA.
- Des images belles et attrayantes au lecteur, sans oublier la résolution et qu'ils semblent parfaits.
- L'importance de la couleur et que nous soulignons à nouveau.
Nous devons travailler sur le responsive design d'une landing page pour un mobile, une tablette et un ordinateur de bureau. Prendre la temps nécessaire pour essayer encore et encore à chaque changement on le voit dans ces trois formats, puisque nous pouvons nous faire confiance et oublier que ces changements apportés en CSS auront l'air horrible sur mobile.
Page de destination Hotjar
C'est un travail qui peut être fastidieux, mais il est essentiel que nous prenions le temps de tester chaque changement. Le utilisation des marges latérales et essayez, dans la mesure du possible, de ne pas manquer les règles dans les CTA ou les boutons d'action:
- Que la distance par rapport au texte et à la marge du bouton est progressive dans les trois formats. Ni il n'est petit ni grand et qu'il est à la même hauteur.
- La ratio dans la taille du bouton CTA avec le reste des éléments où il se trouve doit être fourni.
Un exemple clair de ceci est le travail effectué par Shopify sur votre page de destination sur le bureau et dans lequel vous pouvez voir dans la version mobile. Attention à l'utilisation des couleurs, des espaces blancs et des textes avec leurs tailles et typographies appropriées:
Une série de conseils à avoir une meilleure page de destination pour votre entreprise ou votre boutique en ligne et ces newsletters si importantes pour obtenir les mises à jour et ces promotions à vos utilisateurs.