Accueil > Blogue > Astuces pour créer des courriels adaptatifs
courriels adaptatifs

Astuces pour créer des courriels adaptatifs

Par : Publipage

 

Pourquoi est-il nécessaire de créer un courriel adaptatif?

Le but d’envoyer un courriel à une liste de contact est de piquer l’intérêt de plus de gens possible. La seule façon d’accomplir ceci est de s’assurer que votre courriel soit facilement accessible à vos utilisateurs. Seriez-vous surpris d’apprendre que 47 % des courriels sont lus sur des téléphones mobiles? À la lumière de cette statistique, si votre courriel ne s’affiche pas correctement, l’utilisateur aura tendance à l’ignorer ou le supprimer. Il est également important de souligner que les designs adaptatifs ne s’affichent pas correctement pour les anciens clients de courrier électronique, parce que ces derniers ne supportent pas les éléments HTML/CSS plus récents, dont les balises <div> et les « media query ». Ainsi, un courriel adaptatif est une fusion des anciennes et nouvelles pratiques HTML.

 

Astuces pour un courriel HTML

Avant d’entreprendre la création d’un courriel adaptatif, il est important de couvrir les éléments de bases rattachés au courriel HTML. Quelques clients de courrier électronique ont un support HTML très limité qui ne supporte pas les « media query », images de fond et feuilles de style externe. Voici donc quelques astuces :

–          Structurez votre message courriel à l’intérieur de la balise <table>, puisque <div> n’est pas supporté comme composante structurelle.

–          Utilisez les « media query » pour desservir les clients de courrier électronique plus sophistiqués accessibles par appareils mobiles.

–          N’utilisez pas d’images de fond.

–          N’utilisez pas des feuilles de style externe, mais plutôt mettre le CSS à l’intérieur de la page, pour les clients de courrier électronique plus limités, et une feuille de style en ligne pour les clients plus avancés.

–          Les courriels ne supportent pas Javascript.

courriel adaptatifs

Astuces pour un courriel HTML adaptatif

La première étape est de trouver un gabarit de courriel adaptatif. Que devrait comprendre un gabarit de courriel adaptatif?

  1. Un maximum de 600 pixels, largeur idéale pour un bon affichage sur des appareils mobiles dans les cas où les « media query » ne sont pas supportées. C’est également assez large pour bien s’afficher sur les ordinateurs de bureau.
  2. La capacité de s’ajuster automatiquement et ainsi de s’afficher correctement sur les appareils mobiles. Cela peut se faire par des « media query » placées soigneusement à l’intérieur du gabarit.
  3. La meilleure façon d’évaluer si un gabarit de courriel adaptatif fonctionne ou non, c’est de vous envoyer un courriel test et de le constater par vous-même.

Essentiellement, un gabarit de courriel adaptatif est une collection de rangées comprenant différents types de sous-divisions. Par exemple, une rangée avec 3 colonnes de texte sur votre ordinateur de bureau apparaîtra en tant que 3 rangées séparées (sous-divisions de la rangée principale) sur un appareil mobile.

Chaque rangée principale figurera dans une balise table. Celle-ci contiendra des sous-divisions dans d’autres tables. Les « media query » dans votre gabarit de courriel adaptatif se chargeront de l’adaptation de votre courriel. Il y a plusieurs types de rangées offertes : 1 colonne, 2 colonnes, 3 colonnes. La meilleure façon de séparer votre courriel est de grouper les éléments liés dans la même rangée. Il peut y avoir plusieurs sous-rangées à l’intérieur d’une rangée principale.

 

Astuces pour des images adaptatives

Inévitablement, votre courriel adaptatif contiendra des images. Vous ne pourrez que vous assurer que celles-ci s’affichent correctement, alors voici quelques astuces pour vous aider :

–          Inscrire le style suivant empêchera certains clients de courrier électronique d’ajouter des espaces superflues entre les images et le contenu qui les entoure :

<img style=”display:block;” src=”” />

–          L’attribut “alt” dans la balise <img> doit toujours être mis en place, au cas où l’utilisateur décide de ne pas afficher les images.

<img alt=”Image description” src=”” />

–          Si vous décidez d’ajouter un lien à votre image, l’attribut “border” doit être à 0. Par défaut, cet attribut est ajouté à toute image ayant un lien.

<img border=”0” src=”” />

–          Pour améliorer l’adaptativité de vos images, il suffit d’ajouter quelques demandes de renseignements des médias :

<style type=”text/css”>
@media only screen and (max-width: 640px) {
img{
width: 440px!important;
height:220px!important;
}
}

@media only screen and (max-width: 480px) {
img {
width: 280px!important;
height:140px!important;
}
}
</style>
<img width= »600″ border= »0″ height= »300″ src= »img/banner.png »>

 

Les « media query »

C’est un concept difficile à assimiler, mais un outil précieux pour tout développeur web moderne. Une demande de renseignement des médias est utilisée dans le CSS dans le but de cibler une catégorie spécifique d’appareils en se référant le plus souvent à la largeur de l’appareil. Il existe des règles CSS générales, mais à l’aide d’une demande de renseignement des médias, on peut faire en sorte que les règles ne s’appliquent qu’à un type spécifique d’appareil.

.half-width {
width:50%;
}

@media screen and (max-width: 480px) {
.half-width {
width:100%;
}
}

Comme nous le voyons ci-dessus, la demande de renseignement des médias modifier la largeur de l’élément à 100 % si la largeur de l’appareil est de 480px.

 

Ajustements des appareils mobiles  

Une fois que la structure s’adapte convenablement au type d’appareil, vous pouvez utiliser vos « media query » pour modifier d’autres propriétés CSS afin de fournir à vos utilisateurs une expérience supérieure. Voici quelques suggestions :

–          Agrandir la police

–          Changer la couleur de la police

–          Ajouter du remplissage

–          Cacher du contenu

 

Conclusion

Bref, près de la moitié des courriels sont aujourd’hui ouverts à partir d’appareils mobiles. C’est pourquoi il est important de tenir compte du format du courriel que l’on envoie afin de s’assurer que ce dernier s’adapte bien aux plateformes mobiles, évitant ainsi à notre message d’être supprimé ou ignoré. Notre courriel se doit donc d’être adaptatif, et l’idéal est de fusionner les vieilles et les nouvelles pratiques HTML tout en plaçant avec attention nos « media query ». Pour ce faire, il faut trouver un gabarit de courriel adaptatif qui s’ajustera par lui-même aux formats des appareils mobiles. Ces gabarits de courriels sont faciles à trouver sur le web et à adapter à notre message par la suite.

Partager cet article

Articles reliés

Success Keys

Email marketing : 3 clés pour de meilleures campagnes

Combien de courriels recevez-vous par jour ? 100 ? 200 ? 1000 ? Et parmi ceux-ci, combien ouvrez-vous ? Combien lisez-vous ? Bien moins de la moitié et même du tiers, n’est-ce pas ? Rassurez-vous toutefois : capter et même retenir l’attention du lecteur n’est pas […]

checklist prior to mailing

Liste de vérification pré-envoi de courriel

L’automatisation marketing a transformé la manière dont nous traitons les données relatives à nos listes de clients potentiels (leads). Bien que le marketing relationnel soit fondé sur une idée diamétralement opposée à celle de la sollicitation à froid, l’aval de vos destinataires ne signifie pas […]

optimiserinfolettre

Comment optimiser son infolettre

L’infolettre est une des initiatives courriel les plus communes et les plus utilisées. Cependant, malgré la multitude d’entreprises qui l’utilisent, plusieurs ont encore quelques lacunes. Voici donc un guide qui vous permettra d’évaluer votre propre infolettre et d’y apporter les correctifs nécessaires au besoin. L’anatomie […]

Publitrac
Haut