Bonnes pratiques

En conclusion, un rappel des bonnes questions à se poser et des règles techniques à respecter.

Vouloir adapter à tout prix un e-mailing existant. La technique à mettre en oeuvre peut être complexe et le temps de développement n'est pas négligeable. Se fixer des objectifs est le meilleur moyen de limiter les coûts financiers et d'optimiser le ROI de la démarche.

Chercher à produire des versions Responsive pour toutes les plateformes existantes. Il existe plusieurs dizaines de formats d’écrans : un arbitrage peut s’avérer nécessaire, afin de se limiter à deux versions. Elles sont suffisantes dans la ma jorité des cas.

Penser que le Responsive Design est une solution magique. Optimiser la présentation d'un e-mailing ne déclenche pas une sur-réaction des Mobinautes. Cela permet de maximiser la qualité de rendu et la présentation des informations, mais ne remplace en aucun cas l'appétence de l'offre.

Chaque problématique rencontrée lors des tests d’intégration a une solution. Certaines astuces permettent d’ailleurs d’éviter les désagréments liés à une erreur d’intégration.

Gérer les sauts de ligne avec Outlook

Le moteur d’interprétation HTML d’Outlook est Word. Certains codes peuvent donc être mal interprétés par Outlook. C’est notamment le cas du saut de ligne. Tous les 1790px, un saut de ligne est a jouté au code HTML. Si un tableau se trouve à ce niveau, il sera donc cassé.

Solution : éviter les e-mailings trop longs.

S’assurer que le code couleur est reconnu

Le code des couleurs choisies avec l’outil de Dreamweaver est parfois raccourci. Par exemple pour le noir : #000 au lieu de #000000. Certains webmails ne le reconnaissent pas.

Solution : écrire le code en entier.

Bien visualiser le texte sur le mobile

Lorsqu’on choisit une version Responsive Design en 320px de large, il est important que le texte reste lisible sur mobile. Si la cellule contenant le texte est également en 320px de large, il sera collé aux bords de l’écran, rendant la lecture moins confortable.

Solution : prévoir une taille de 300px de large pour la cellule de texte.

Assurer une meilleure lisibilité du contenu Un texte pas assez lisible pénalise immédiatement les résultats de l'e-mailing. Il est donc nécessaire de prévoir une taille de police adaptée à l'écran, cette condition devant rester prioritaire dans l'applicationd des styles.

Solution : Ajouter " !important " dans le code CSS à la suite de la taille de police.

Quelques astuces pour aller plus loin

Mobile et Responsive, c’est possible !

Quelle est la meilleure réponse technique pour optimiser son e-mail mobile ? Quelle mise en page est optimale et comment assurer le Call to Action ?

La position de chaque élément est essentielle.

LE CALL TO ACTION

Le Call to Action doit être accessible rapidement et simplement. Opter pour un CTA centré et large.

Respecter les règles de base comme pour un e-mail classique destiné à un ordinateur : - Liens visibles, en évidence, proéminents, contrastés,

- Texte sur les liens précis et attrayant,

- Respecter la cohérence entre l’e-mail et la landing page.

Lorsque l’Internaute clique, il doit arriver sur un environnement adapté, cohérent avec l'expérience proposée par l'e-mail.

Prendre en compte les particularités des mobiles :

- Sur un mobile, pas de souris : les liens doivent être

suffisamment grands (44*44px au minimum) pour être activés au doigt, - Laisser de l’espace vide autour des liens (15px environ)

pour éviter le clic sur un autre lien trop proche,

- Sans souris, il n’y a pas de survol des liens et d'affichage de texte explicatif contextuel, ou de changement de forme du curseur.

Jouer sur la présentation, pour que les destinataires puissent identifier les types de liens immédiatement : souligner, a jouter des effets, des icônes…

- Intégrer des Clicks to Call (lien sur le numéro de téléphone qui permet un appel immédiat) ou des liens vers une adresse (pour une localisation en direct), pour une meilleure intégration avec les autres fonctionnalités des mobiles.

Pour privilégier le Call to Action, prévoir des boutons plus larges et laisser de l’espace (15px) entre les liens, afin de ne pas gêner la navigation.

Les liens doivent être suffisamment grands pour que l’Internaute accède aisément au contenu. La taille idéale d’un bouton est de 44px.

Le lien est identifiable sa présentation est aérée.

Il est difficile de différencier texte simple et lien.

LA MISE EN PAGE

Sur une seule colonne, avec un contenu simple : l’e-mail doit rester lisible.

- Privilégier une seule colonne,

- Prévoir une largeur de 320px (largeur la plus répandue),

- Mettre les informations principales dans les 600 premiers pixels et limiter le scroll en hauteur,

- Simplifier le header : pas de barre de menu imposante ou qui ne s’afficherait pas correctement,

- Simplifier le contenu : définir le message prioritaire et aller à l’essentiel pour créer un e-mail clair. Les blocs présentés dans la version ordinateur et non indispensables dans la version mobile peuvent être cachés.

- Rester lisible : pas de pavés de texte trop imposants. Trois lignes sur ordinateur deviennent neuf lignes sur mobile.

Un e-mail en une seule colonne, avec un contenu simple : toute la mise en page doit être adaptée pour rester lisible et accessible. Sur la version mobile le message peut être simplifié afin de mettre en valeur l'information et aller à l'essentiel.

Attention aux colonnes trop petites : se limiter à un ou deux mots par ligne rend la lecture plus difficile,

Un écran = une idée.

Exploiter au maximum les opportunités et les limites de l'en-tête de l'e-mailing en y concentrant le message le plus efficace.

L’EN-TÊTE

L'en-tête de l'e-mail, ce sont ces quelques mots visible même avant son ouverture, et qui doivent absolument attirer l'attention.

- L'objet : L'information importante doit être concentrée sur les 30 premiers caractères.

- Le pre-header : Profiter de l’affichage du début du mail dans la liste des messages sur certains mobiles pour y écrire une phrase-clé de quelques mots. C’est un atout pour attirer l’attention, avant même que le Mobinaute n’ouvre l’e-mail.

L’e-mail sera lu plus facilement par le Mobinaute avec une police plus grande et des zones cliquabl es clairement identifiées.

LES IMAGES

Attention aux pièges des images : parfois trop lourdes ou peu lisibles, elles peuvent aussi être bloquées par l’OS Axer les versions mobiles sur le contenu texte, plutôt que sur les images.

- Attention aux images trop lourdes. Privilégier un poids de 20Ko environ pour un téléchargement optimal (la performance de la connexion est parfois limitée sur les plateformes mobiles).

- Attention aux contrastes et aux couleurs : les petits écrans et la luminosité au plus bas (notamment pour économiser la batterie) peuvent donner un rendu peu avantageux. Utiliser des couleurs dont le contraste sera suffisamment important pour lire l'e-mail en pleine journée comme en pleine nuit.

- Privilégier les images de petite taille pour une meilleure visibilité.

- Renseigner les attributs "alt" pour assurer l'affichage d'un texte alternatif en cas de non affichage.

- Enfin, dans certains cas, les images peuvent être bloquées (selon l’Operating System, ou si l’utilisateur a activé une option). L’e-mail doit rester compréhensible sans ses images.

LA POLICE

La police de l’e-mail doit être plus grande dans la version mobile que celle d’un e-mail ouvert sur ordinateur.

- 14px minimum pour le corps du texte, - 22 px pour les titres,

- A noter : iOS redimensionne parfois la police par défaut.

Synthèse des contraintes techniques et des solutions à mettre en oeuvre :

DO’S DON’TS

Taille des écrans - Développer deux versions, une pour ordinateur (600px de large), l’autre pour mobile (320px).

- Développer une version pour chaque taille d’écran. Le développement serait trop fastidieux et coûteux.

Mise en page

- Privilégier la lisibilité, avec une seule colonne, un header et un contenu simple.

- Positionner les informations principales dans les 600 premiers pixels et limiter le scroll.

- Concevoir des colonnes trop petites : un ou deux mots par ligne compliquent la lecture.

- Rédiger des pavés de texte trop imposants.

Images

- Privilégier du texte et des images de taille adaptée à l'écran, pour une meilleure visibilité.

- Renseigner les attributs "alt", afin de dispenser une information au destinataire dans le cas où les images ne sont pas téléchargées.

- Avoir des images trop lourdes ! Ne pas dépasser 20Ko.

- Construire un e-mailing uniquement à base d’images. Il est important d'alterner texte et visuels.

Call to Action

- Un Call to Action large et centré est optimal.

- S'assurer que la page d'atterissage soit cohérente avec l'expérience proposée par la newsletter.

- Ils doivent être visibles, contrastés et évidents.

- Pour une version mobile la taille minimale à respecter est de 44px*44px.

- Coller deux liens cliquables. Ils doivent être séparés par un minimum d'espace (15px).

- Créer des Call to Action trop petits.

3. Applications