Comment concevoir des e-mails pour une approche mobile first

Nous menons le bon combat, qui est la bataille sans fin du flux constant d'e-mails. Peu importe où nous allons ou quel appareil nous avons avec nous, les e-mails peuvent nous trouver n'importe où. Il y a de fortes chances que vous receviez dix autres e-mails après avoir lu cet article. Et en tant que designers, nous sommes des deux côtés de la boîte de réception : nous recevons constamment des e-mails, mais nous sommes également responsables de la conception et de la création des conceptions d'e-mails.

Peu importe qui vous ciblez avec votre e-mail, l'objectif est de fournir la meilleure expérience utilisateur lors de l'envoi d'e-mails aux abonnés, clients et prospects. Et comme la majorité des e-mails sont ouverts sur des appareils mobiles, nous devons concevoir des e-mails adaptés à tout appareil sur lequel ils peuvent être ouverts.

Nous sommes devenus tellement habitués à la conception Web réactive et aux applications mobiles de premier ordre que nous tenons souvent pour acquis que nous pouvons simplement prendre n'importe quel appareil et concevoir une expérience sur mesure. Avec le courrier électronique, les choses ne sont pas aussi claires et sèches. En termes de technologie, il est à des années-lumière de la conception Web moderne. Nous devons concevoir avec des attributs HTML, des mises en page basées sur des tableaux et des styles en ligne, qui ne sont pas garantis de se comporter de la même manière dans chaque client de messagerie.

Concevoir des e-mails pour tous les appareils, quelles sont mes options ?

Avant d'aller dépoussiérer votre collection de CD-ROM, rappelez-vous qu'il y a de l'espoir pour concevoir un e-mail "réactif" réussi, même avec les limitations. La création d'un e-mail vraiment réactif est certainement une option, mais il est important de prendre en compte ces trois approches lors de la création d'un mobile first design réussi :

• Conception évolutive
• Conception fluide
• Conception réactive

Pour choisir l'approche la mieux adaptée à vos besoins, il est important de comprendre les différences et les limites entre ces trois formes de conception. Prendre une décision nécessite de connaître votre public et les appareils et clients de messagerie qu'ils utilisent. Étant donné que tous les clients de messagerie n'offrent pas le même support CSS, cela vous aidera à déterminer quelle approche servira le mieux vos utilisateurs.

Conception évolutive

Les mises en page évolutives des e-mails sont polyvalentes car elles sont lisibles et cliquables sur toutes les tailles d'écran. C'est une excellente option si votre public a tendance à ouvrir ses e-mails sur une variété d'appareils : mobile, tablette et ordinateur de bureau.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

Cette option est généralement la plus facile à mettre en œuvre car elle n'utilise pas de requêtes multimédias et il n'y a pas de largeur de table à ajuster. L'un des avantages est qu'il n'y a pas une énorme courbe d'apprentissage lors de la conception de ce type d'e-mail. Dans la plupart des cas, le mobile est l'appareil le plus courant pour lire les e-mails, ce qui permet de s'assurer que les considérations mobiles sont prises en compte en premier. Des boutons plus grands, un texte facile à lire et des appels à l'action clairs donnent la priorité au mobile pour répondre aux besoins d'une taille d'écran plus petite.

La conception évolutive des e-mails peut être limitée dans le fait qu'il doit s'agir d'une seule colonne pour bien fonctionner sur tous les appareils. La raison en est que si la conception comportait plusieurs colonnes, celles-ci deviendraient très petites sur les appareils mobiles, ce qui affecterait la lisibilité. Cependant, si vous faites défiler votre boîte de réception, vous verrez beaucoup de mises en page à une seule colonne car elles sont très courantes.

Le contenu est la clé de tout e-mail, donc la taille du texte doit être à une taille qui fonctionne bien pour les mobiles et également sur les écrans plus grands. Avec la plupart des clients de messagerie, l'intégralité de l'e-mail remplira l'écran afin que l'utilisateur n'ait pas à faire défiler verticalement. Cependant, il est toujours recommandé de placer les informations clés et l'appel à l'action dans le coin supérieur gauche de l'e-mail, au cas où l'e-mail ne remplirait pas l'écran comme prévu.

Conception fluide

Vous connaissez peut-être les mises en page « liquides » de la conception Web. Les composants de conception ont des largeurs en pourcentage et s'adaptent à la résolution de l'écran de l'utilisateur, en conservant ces mêmes largeurs. La conception fluide des e-mails utilise cette même idée.

Cette option de messagerie comble le fossé entre une option évolutive et une option véritablement responsable. Il faut faire plus de conception en amont qu'avec l'option évolutive. La raison en est que le dimensionnement basé sur le pourcentage permet d'adapter la largeur des tableaux et des images à la taille de l'écran sur lequel l'e-mail est affiché. Les tableaux ne modifient pas la mise en page à différentes tailles, mais le contenu coule et remplit l'espace. C'est une excellente option pour les e-mails contenant beaucoup de texte, car il y a moins de contrôle sur la façon dont la copie et les images sont liées les unes aux autres. C'est toujours une bonne idée de garder la mise en page simple, de préférence une mise en page à table unique pour garder la lisibilité de l'e-mail comme première priorité.

Rappelez-vous comment nous avons dit que cela comblait le fossé entre le fixe et le réactif ? La raison en est que la taille doit être limitée pour les écrans plus grands. Si l'e-mail devient trop large, les lignes de texte deviennent beaucoup trop longues visuellement et nous voulons nous assurer que nos lecteurs peuvent facilement lire notre e-mail. Envelopper le contenu de votre e-mail dans un tableau conteneur de largeur fixe aidera à l'apparence sur des tailles d'écran plus grandes. Ensuite, une requête multimédia utile ciblera les tailles d'écran plus petites.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

Exemple de requête multimédia pour les appareils mobiles :

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

E-mail réactif

Prenons ce que nous savons des e-mails évolutifs et fluides et ajoutons quelques règles supplémentaires. Responsive vous permet d'avoir plus de contrôle sur ce qui est présenté à différents points d'arrêt avec les requêtes média CSS. Avec cette option, les mises en page peuvent être modifiées et d'autres éléments peuvent également être personnalisés avec des styles conditionnels pour des points d'arrêt spécifiques.

Voici un exemple de requête multimédia pour une mise en page réactive :

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

Comme les autres options, vous n'êtes pas limité à une colonne ou à des conceptions simples. Les e-mails peuvent être plus complexes, avec moins de restrictions sur la mise en page et la quantité d'images. Par exemple, les conceptions d'e-mails peuvent comporter plusieurs colonnes sur des appareils plus grands, mais une seule colonne sur mobile. La taille du texte, les images et presque tout le reste peuvent être optimisés pour une expérience optimale.

Avant de créer des conceptions complexes avec plusieurs requêtes multimédias, il est important de parler de certains des compromis. Les requêtes multimédias ne fonctionnent pas dans tous les clients de messagerie. En fait, le support est assez limité. Selon la liste de prise en charge des requêtes multimédia Litmus, l'application Android Outlook.com, le client natif Android 4.x et iOS (iPhone/iPad) les prennent actuellement en charge. Ceux-ci peuvent être utilisés au maximum de leur potentiel si la majorité de vos téléspectateurs sont des utilisateurs de mobiles et de tablettes.

Autres considérations de conception

Avant de commencer à créer la conception de votre e-mail, il est important d'examiner les analyses pour déterminer quels sont les clients de messagerie et les appareils de vos utilisateurs. Il est recommandé de vérifier cela fréquemment et de laisser votre approche de conception évoluer au fur et à mesure que les choses changent. Même avec des limitations, le courrier électronique évolue, il est donc important de se tenir au courant de ce qui est actuellement pris en charge.

Voici quelques excellentes ressources pour une lecture plus approfondie :

• CSS spécifique aux mobiles
• L'avenir du courrier électronique
• E-mails iPhone et Android

La bonne nouvelle est qu'une approche mobile first est possible avec les limitations actuelles des e-mails. Même si la conception n'est pas la forme la plus vraie de "réactif", avec seulement quelques pourcentages spécifiés et quelques requêtes médiatiques, vous créerez une conception d'e-mail qui ne manquera pas d'impressionner, quel que soit l'appareil. Dans la plupart des cas, la majorité des utilisateurs consultent leurs e-mails sur des appareils mobiles. Adopter une première approche mobile devient donc une base solide pour la conception de votre e-mail.