Questions-réponses du webinaire sur l'e-mail réactif 101 : Notions de base sur HTML et CSS

Alors que les ouvertures sur mobile continuent d'augmenter (elles ont augmenté de plus de 500 % au cours des quatre dernières années !), il en va de même des discussions sur les stratégies de messagerie mobile comme le responsive design. Dans notre webinaire Responsive Email 101 : HTML and CSS Basics, nous avons examiné le paysage de la messagerie mobile, les fondements de la création d'e-mails réactifs et pourquoi ces techniques sont cruciales pour améliorer l'expérience de l'abonné. Nous avons également couvert le support client de messagerie et montré comment coder un e-mail réactif à partir de zéro.

Vous n'avez pas pu le faire ? Ne t'inquiète pas. On a tout enregistré ! De plus, nous avons même rendu les diapositives disponibles.

Obtenez les diapositives + enregistrement →

Nous avons eu une salle comble pour le webinaire, alors même si nous avons essayé de répondre à autant de questions que possible pendant la partie questions-réponses, nous n'avons pas pu toutes les aborder. Ci-dessous, nous avons rassemblé certaines des questions les plus fréquemment posées.

DÉMARRER AVEC LA CONCEPTION RÉACTIVE

Pensez-vous que la hausse des ouvertures mobiles a atteint sa saturation, ou pensez-vous qu'elle va continuer à augmenter ?

Bien que nous ayons assisté à un énorme bond des ouvertures sur mobile au cours des quatre dernières années (plus de 500 %), nous avons déjà vu sa croissance commencer à s'aplatir un peu. Cependant, nous pensons que les ouvertures mobiles continueront à augmenter lentement avec la prolifération de plus d'appareils mobiles.

Quelle est la différence entre une conception fluide, adaptative et réactive ?

La conception fluide consiste en des largeurs relatives sans requêtes multimédias. La conception adaptative consiste en des largeurs fixes ou relatives au niveau de plusieurs fenêtres/points d'arrêt. La conception réactive consiste en des largeurs relatives au niveau de plusieurs fenêtres/points d'arrêt. Voici quelques excellentes ressources pour vous aider à mieux comprendre les différences entre eux :

• Évolutif, fluide ou réactif ? Comprendre les approches de messagerie mobile
• Fixe contre fluide contre adaptatif contre réactif
• Quelle mise en page ? Statique, liquide, adaptatif ou réactif ?
• Liquidapsif

Quelle approche offre la meilleure assistance client de messagerie : fluide, adaptative ou réactive ?

Du point de vue du support pur, les e-mails fluides ont le meilleur support. La conception adaptative et réactive nécessitent l'utilisation de requêtes multimédias, qui ont une prise en charge limitée.

Cependant, cela ne signifie pas que la conception fluide est la meilleure approche pour les e-mails. La conception fluide est un bon compromis pour créer une version mobile d'un e-mail, mais conserve la conception pleine largeur de l'e-mail en son cœur. Cela dépend vraiment de votre public spécifique, où ils ouvrent leurs e-mails, et de votre stratégie de conception pour optimiser les expériences de vos abonnés.

Qu'est-ce qu'une requête média ?

Une requête média (@media) est une instruction conditionnelle qui déclenche un ensemble de CSS pour un ensemble spécifique de règles. Vous pouvez en savoir plus sur les requêtes médiatiques et les e-mails avec les ressources suivantes :

• Le guide pratique de la conception d'e-mails réactifs
• Comprendre les requêtes multimédias dans les e-mails HTML

Existe-t-il des données sur l'effet du responsive design sur les e-mails ?

Tu paries! Nous avons récemment réalisé un rapport avec MailChimp sur l'effet de la conception réactive et des tests d'e-mail sur les clics. Nous avons constaté que la conception réactive entraîne une augmentation de 15 % du nombre de clics pour les utilisateurs mobiles.

Avec un support mixte et autant de solutions de contournement, passer à un design réactif semble écrasant. Comment puis-je commencer?

Avec un support aussi limité de la part des clients de messagerie actuels, la conception d'e-mails réactifs peut être difficile à mettre en œuvre. Notre première recommandation est de vous renseigner autant que possible sur la conception d'e-mails réactifs avant de vous lancer. Nous vous recommandons de consulter les ressources de MailChimp, Campaign Monitor et Litmus pour vous guider.

Si vous n'êtes pas à l'aise de plonger directement dans le développement réel d'e-mails réactifs, envisagez d'utiliser de simples éditeurs d'e-mails par glisser-déposer pour créer vos e-mails. Des produits tels que StampReady, Canvas et MailChimp vous simplifieront la tâche de codage des e-mails.

Si vous êtes à l'aise pour plonger dans le code, consultez Litmus Builder, un éditeur de code spécialement conçu pour la conception d'e-mails. Essayez de mettre en œuvre des techniques de messagerie réactives de base pour commencer. Cela offrira une excellente expérience aux utilisateurs qui ouvrent leur courrier électronique dans des clients prenant en charge la conception réactive (principalement les appareils Apple).

Assurez-vous également de prévisualiser vos e-mails avant de les envoyer ! Vous pouvez vous envoyer des e-mails à l'aide de PutsMail ou voir à quoi ressemble votre e-mail dans plus de 40 clients de messagerie différents avec Litmus.

Si vous avez des questions ou rencontrez des problèmes de codage avec la conception d'e-mails réactifs, rendez-vous simplement sur la communauté Litmus pour obtenir de l'aide.

Recommandez-vous des frameworks réactifs ?

Oui! Nous vous recommandons de consulter le framework réactif Ink de ZURB (attention : ce framework nécessite une solution de contournement pour s'afficher correctement dans Outlook 2007-2013). Si vous aimez Sass, Faust Gertz a créé une version Sass de Ink et Alex Ilhan a un framework de messagerie Sass appelé Zenith. De plus, Dan Denney de Code School a un flux de travail de courrier électronique impressionnant appelé Emayll et Brian Graves a une incroyable collection de modèles de courrier électronique réactifs.

OPTIMISER POUR LES CLIENTS QUI NE PRENENT PAS EN CHARGE LES REQUÊTES MÉDIA

Si un client ne prend pas en charge la conception réactive, qu'est-ce qui s'affichera dans ce client ?

Chaque client de messagerie rend les e-mails différemment, en particulier lorsqu'il s'agit d'applications de messagerie mobile. Essentiellement, s'ils ne prennent pas en charge la conception réactive, il reviendra à une version de l'e-mail pleine largeur. Parfois, il s'agira d'une version pleine largeur « agrandie », parfois d'une version agrandie « agrandie », et parfois un client comme Gmail peut automatiquement augmenter la taille des polices pour créer une version « mobile » de l'e-mail.

La meilleure chose à faire est de toujours prévisualiser votre e-mail avant de l'envoyer. Vous pouvez vous envoyer des e-mails à l'aide de PutsMail ou voir à quoi ressemble votre e-mail dans plus de 40 clients de messagerie différents avec Litmus.

Quelle est la meilleure façon d'aborder la conception réactive pour les clients qui ne la prennent pas en charge, comme l'application Gmail pour Android ? Quel type de « sauvegarde » devrions-nous avoir en place ?

Nous vous recommandons de commencer par adapter vos e-mails aux mobiles. Cela signifie avoir une quantité minimale de contenu d'e-mail et une conception pour un cas d'utilisation mobile, comme des polices et des boutons de plus grande taille. Une conception à une colonne prête à l'emploi facilite également le rendu de votre e-mail pour l'application Gmail.

Pour ceux qui sont à l'aise avec les techniques de codage avancées, le meilleur moyen de développer vos e-mails et de tenir compte du manque de support réactif dans l'application Gmail est l'"approche de codage hybride". Il utilise essentiellement une approche mobile d'abord et agrandit l'e-mail jusqu'à une largeur de bureau à l'aide de quelques hacks spécifiques aux e-mails. Vous pouvez en savoir plus sur la mise en œuvre de l'approche de codage hybride ici :

• L'approche de codage hybride
• Codage hybride Redux-élever la barre
• Leçons durement gagnées en conception d'e-mails réactifs

CODES QUESTIONS

Pouvez-vous mettre vos requêtes multimédias dans un document CSS séparé et créer un lien vers ce document dans la tête ?

Il n'est pas recommandé d'utiliser des feuilles de style liées (balise <link>) pour les e-mails en raison de la prise en charge limitée du client de messagerie. Tous les styles doivent être intégrés dans l'<head> d'un e-mail.

Quels sont les points d'arrêt les plus courants pour la conception d'e-mails réactifs ? Combien de points d'arrêt est idéal ?

Le plus grand nombre d'ouvertures se produisant sur les iPhones, il est important que vos e-mails commencent à implémenter des points d'arrêt à un minimum de 414 pixels, ce qui correspond à la largeur du nouvel iPhone 6 Plus.

Il n'y a pas de nombre « idéal » de points d'arrêt pour une conception donnée. Tout dépend de votre conception individuelle et de l'optimisation de l'expérience pour vos abonnés. Il est idéal de tenir compte d'au moins un point d'arrêt pour rendre votre e-mail réactif.

Recommandez-vous d'utiliser des tables ou des divs ?

La conception d'e-mails nécessite absolument l'utilisation d'une disposition et d'une structure basées sur des tableaux. La raison en est le manque de prise en charge des <div> par les clients de messagerie, comme les clients de bureau Outlook, en ce qui concerne la structure et la fondation réelles du HTML. Certains clients de messagerie prennent en charge les <div> et peuvent être extrêmement puissants à utiliser pour certains hacks et solutions de contournement, en particulier pour les e-mails réactifs.

Pouvez-vous modifier les attributs align="left" ou align="right" dans une table à l'aide de requêtes multimédias ? Ou, est-ce uniquement pour des changements de style ?

Vous ne pouvez pas techniquement modifier l'attribut align HTML dans CSS, mais il existe d'autres solutions de contournement. Vous pouvez envelopper chaque table individuelle dans un <div> vide et utiliser la propriété float ou la propriété display pour échanger les tables. ActionRocket a un excellent article de blog sur l'utilisation de cette technique avancée.

Avec les e-mails réactifs, comment se passe la prise en charge des images d'arrière-plan ? Quelles sont les dimensions idéales pour enregistrer les images d'arrière-plan si je veux qu'elles soient en pleine largeur ?

Les images d'arrière-plan sont très bien prises en charge pour les clients de messagerie mobile. Il n'y a pas de dimensions « idéales » pour enregistrer les images d'arrière-plan. Vous devriez toujours essayer d'avoir des fichiers de taille relativement petite afin que vos abonnés puissent télécharger votre e-mail rapidement. Vous pouvez utiliser la fonction de vérification d'image dans Litmus pour tester la vitesse de téléchargement de vos images.

Les styles doivent-ils être intégrés pour qu'ils fonctionnent avec de nombreux clients de messagerie ?

Oui. Plusieurs clients de messagerie suppriment tous les styles CSS dans l'<head> des e-mails, notamment Gmail, faisant de l'incorporation des styles CSS une nécessité pour les e-mails.

Est-il préférable d'utiliser des pixels ou des ems pour la taille de la police dans les e-mails ?

Il est préférable d'utiliser des pixels pour définir les tailles de police dans les e-mails, car de nombreux clients de messagerie ne prennent pas en charge les ems.

Est-il possible de remplacer des images à l'aide de media queries ?

Il est possible de remplacer les images d'arrière-plan à l'aide de requêtes multimédias, mais pas d'images en ligne ( balises <img>).

Quelle est la meilleure façon d'optimiser les images afin qu'elles s'affichent avec netteté sur les écrans Retina ?

Pour la rétine, vous souhaitez généralement que l'image soit deux fois plus grande que son affichage final. Par exemple, une image 100×100 devrait en fait être 200×200, mais réduite à 100×100 en utilisant des attributs HTML ou un style CSS. En règle générale, cette technique ne doit être utilisée que pour des images plus petites qui doivent être nettes, et non pour des images volumineuses telles que des photos. Il y a quelques discussions intéressantes sur la communauté Litmus à propos de la conception pour la rétine :

• Concevoir pour la rétine
• Images avec textes d'appel à l'action et affichage Retina

Affiche : aucun ; ou afficher : bloc ; travailler dans un e-mail réactif ?

Il ne s'agit pas de savoir si la propriété display fonctionne dans les e-mails réactifs, mais si elle est prise en charge par les clients de messagerie. Comme la plupart des CSS, il est pris en charge par certains et pas par d'autres. Il n'est notamment pas pris en charge par Gmail.

Existe-t-il un équivalent client de messagerie de « l'élément d'inspection » d'un navigateur Web ? Il serait utile de dépanner mes conceptions réactives.

Il n'y a pas d'équivalent exact de « l'élément d'inspection » d'un navigateur Web. Cependant, la fonction de test interactif de Litmus est extrêmement utile. De plus, Litmus Builder dispose d'une fonctionnalité de test et de re-test en un clic pour rendre l'itération sur les e-mails très rapide.

Sinon, nous vous recommandons de simplement dépanner dans un navigateur WebKit (Chrome ou Safari). Étant donné que la majorité des ouvertures mobiles se produisent sur WebKit, qui prend en charge CSS, le développement et le dépannage dans un navigateur WebKit sont une bonne réplication de ce qui se passera pour ces clients de messagerie.

Le remplissage est-il universellement pris en charge par tous les clients de messagerie ?

Le remplissage est presque universellement pris en charge par les clients de messagerie. La propriété margin, en revanche, n'a pas un grand support. Nous vous recommandons fortement d'utiliser un rembourrage.

Comment empiler correctement trois colonnes en utilisant l'alignement ? Devriez-vous utiliser l'alignement central en plus de gauche et de droite ? Ou, ne recommandez-vous pas du tout d'utiliser des dispositions en trois colonnes ?

Oui, vous pouvez empiler trois colonnes dans la conception d'e-mails réactifs, bien que vos options pour les empiler et les inverser soient plus limitées ou plus difficiles à faire qu'une conception à deux colonnes. L'alignement des tableaux dépend de la façon dont vous souhaitez les empiler, mais vous alignez généralement les trois tableaux sur la gauche.

ActionRocket a un excellent article sur une technique avancée pour les tables d'empilement inversé.

CONSTRUCTEUR LITMUS

Qu'est-ce que Litmus Builder ?

Litmus Builder est le premier éditeur de code au monde conçu pour les concepteurs de courrier électronique par des concepteurs de courrier électronique. La création, la modification et le partage d'e-mails sont entièrement gratuits.

Emmet est-il intégré directement dans Litmus Builder ?

Il est! Notre intégration Emmet rend le codage abrégé un jeu d'enfant.

Où pouvons-nous trouver des modèles d'e-mails réactifs dans Litmus Builder ?

Litmus Builder propose une galerie de plus de 20 modèles d'e-mails dans la section Modèles. Tous les modèles sont entièrement gratuits. Consultez notre documentation d'aide complète pour Litmus Builder.

Essayez nos modèles réactifs gratuits et pré-testés

L'e-mail réactif vous permet d'affiner vos conceptions pour un public de plus en plus mobile. Simplifiez votre processus de conception d'e-mails avec une multitude de modèles gratuits et pré-testés sur la communauté Litmus.

Présentation des modèles de communauté Litmus Lancez votre prochaine campagne avec l'un des modèles pré-testés de Litmus. Accéder aux modèles →