Concevoir des e-mails adaptés aux mobiles

En raison de la hausse des utilisateurs de mobiles, il est plus important que jamais de ne pas oublier ces derniers lorsque vous créez vos e-mails. Vous trouverez ci-dessous quelques trucs et astuces que vous pouvez utiliser lorsque vous créez vos propres modèles de manière à garder une longueur d’avance dans le secteur des boîtes de réception mobiles et maintenir l’intérêt de vos abonnés.

Remarque : il n’est pas possible de modifier un e-mail juste pour mobile ou pour ordinateur de bureau. À la place, vous créez un e-mail dont le rendu sera différent dans les deux applications.

Les clients de messagerie lisent les messages de gauche à droite
Les éléments HTML s’empilent toujours de gauche à droite. Cela signifie que vos blocs de contenu s’empileront de gauche à droite. Si vous créez un e-mail contenant une image à gauche et que vous ajoutez par la suite un bloc de texte à droite de cette image, l’image apparaîtra au-dessus de ce texte sur mobile. De plus, il est toujours préférable de conserver un design simple et propre, en gardant toujours l’écran le plus petit à l’esprit.

Limitez la largeur de votre e-mail à 650 pixels
C’est la largeur qui fonctionne pour la plupart des clients de messagerie et des appareils mobiles. Si l’e-mail à une largeur supérieure à 650 pixels, il se peut que vous ayez à utiliser une barre de défilement horizontale pour que votre message s’affiche. Cela rend non seulement votre message difficile à lire, mais peut également vous coûter un désabonnement en raison de l’expérience peu conviviale que cela entraîne.

La largeur de l’image doit être comprise entre 400 et 650 pixels
Une image de 400 pixels de large est le minimum nécessaire pour que celle-ci s’affiche en pleine largeur sur un appareil mobile. Pour afficher la largeur de votre image, cliquez sur l’image dans l’outil de conception et affichez la taille dans l’onglet Options :

adjust_image_size.png

Pour la redimensionner, il suffit de l’ajuster dans l’onglet options, ou de redimensionner le fichier image réel et de charger l’image à sa place.

N’oubliez pas qu’il est toujours préférable de réduire l’échelle d’une grande image plutôt que d’augmenter celle d’une petite image.

Utiliser du texte Alt
Le texte ALT est un excellent outil à utiliser, car ce texte sera visible dans le cas où les images seraient bloquées sur le compte d’un abonné. Pour ajouter du texte ALT à votre image, cliquez sur l’image de votre campagne et ajoutez 1 à 2 mots dans le champ « Infos » de l’onglet options :

alt_text_2.png

Utiliser des blocs d’images au lieu d’insérer une image dans un bloc de texte
Il ne sera pas possible de cliquer sur des blocs de contenu textuel contenant une image et des liens incorporés à cette image dans Outlook 2007 ou Outlook 2013 (voir l’image ci-dessous). En outre, le texte peut ne pas s’agencer correctement autour de votre image lorsqu’il est visualisé sur mobile.

example_link.png

Utiliser le widget d’espacement pour créer un espace autour du contenu et des images
Utiliser une marge intérieure autour d’une image ou du contenu pour créer un espace blanc forcera votre contenu à devenir étroit lorsqu’il sera consulté sur certains appareils mobiles. Utilisez plutôt le widget d’espacement dans le concepteur glisser-déposer et paramétrez-le de manière à le masquer sur mobile si vous le souhaitez (plus d’informations ci-dessous).

spacer_widget.png

Tirer profit de la fonctionnalité « masquer sur mobile »
Cette fonctionnalité masquera les éléments non essentiels (c’est-à-dire en désordre) de votre e-mail lorsque vous les consulterez sur un appareil mobile. Cela permettra d’améliorer l’expérience de vos abonnés et de leur donner envie de continuer à ouvrir vos messages.

Pour masquer un élément sur mobile, cliquez simplement sur ce bloc, puis sur le rouage :

click_cog.png

Cliquer sur « Masquer sur appareils mobiles ».

hide_on_mobile.png

Lorsque vous passez votre souris sur cet élément dans le concepteur, ceci s’affiche :

hide_message.png

Expérience avec le texte de pré-entête
Démarquez-vous du reste des e-mails de la boîte de réception de vos abonnés et incitez-les à ouvrir le vôtre. Pour en savoir plus sur l’ajout d’un texte de pré-entête à votre e-mail, cliquez ici

Tester votre e-mail
Utilisez l’aperçu sur ordinateur de bureau et envoyez à vos collègues et à vous-mêmes un e-mail test pour l’afficher sur différents appareils mobiles. Vous pouvez également utiliser notre fonctionnalité d’aperçu de compatibilité pour tester votre e-mail sur plusieurs clients de messagerie.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 8 sur 20

Have more questions? Submit a request

Start free trial