Smartphone, le marketing dans nos poches

Bonsoir à tous !
Ce soir je vais vous parler un peu de la nouvelle tendance marketing, celle des e-mails responsive. Tout d’abord, comme pour les sites, malgré la multitude d’écrans et de résolutions différentes, nous arrivons à adapter les e-mailings à ces écrans. Le smartphone grandit de plus en plus et son espace d’expression aussi. Bien entendu tout n’est pas tout rose et vous allez rapidement le voir dans la suite.

email-responsive

Smartphone, tes différences je dompterai…

Lorsque l’on met en place un système comme celui-ci, le mot d’ordre au final est « délivrabilité ». Oui il faut au minimum être vu comme avant par tous et si possible être mieux vu par ceux qui le peuvent. Je veux dire par là ceux qui ont des smartphones permettant le responsive design.
Si vous regardez vos e-mails dans le navigateur de votre téléphone (oui je sais c’est bizarre mais ça arrive d’après les stats), forcément le responsive design fonctionnera parfaitement car l’HTML 5 / CSS3 est très bien implanté dans les navigateurs mobiles, autrement la ruse sera de mise.
Donc le principe est de créer un e-mailing très simple / épuré / efficace puis de lui rajouter des fonctionnalités.

Les bases avant toute chose

Quelques conseils avant d’ajouter à votre création le système media queries. S’assurer si possible d’avoir les informations importantes à lire ainsi que votre / vos boutons d’appels au clics sur la colonne de gauche. Assurez-vous également que votre bouton se trouve le plus haut possible, tout le monde n’a pas un écran de 5 pouces.

Après avoir choisi le principe souhaité (2 colonnes de 290px ou une seule de 600px) vous pouvez passer à la technique. Sachez au fait que des logiciels natifs de mails sur les smartphones (peut être pas les récents), ne savent pas lire les media queries, du coup exit le responsive…

Le fonctionnement des media queries

Comme pour les anciens sites internet, une fois que votre maquette est intégrée avec plein de tableaux imbriqués. L’ajout des media queries permettra d’ajouter ce qu’on appel des points de rupture. A vous de décider si il en faut plusieurs, la tendance est à simplifier, sachez-le. Du coup un seul est nécessaire dans la plupart des cas. En dessous de 400 px, par exemple, faites passer une colonne en dessous de l’autre ou décidez de masquer une photo. Rappelez-vous que tout ce que vous cachez et tout de même chargé car c’est bien le même e-mailing que vous affichez sur l’écran d’un ordinateur ou celui d’un mobile. Lorsque les media queries ne sont pas pris en charge, la ruse est d’utiliser des tableaux fluide. (du % pour les images et les tableaux), mais ça a ses limites bien entendu.

Quelques conseils au cas ou

Pour ne pas se faire piéger, pensez à utiliser un tableau englobant en 100%. Vous pouvez ainsi attribuer facilement un fond de couleur aux endroits voulus car certaine messagerie supprime la balise head (les links de CSS sont donc zappées supprimant ainsi une couleur de fond de body que vous auriez définie dans la CSS). Doublez donc les couleurs de fond dans les cellules (par sécurité), utilisez à l’ancienne les styles CSS sur les TD, en gros plus vous stylerez vos textes/images au plus près moins vous aurez de surprise normalement. Que ça soit avec des outils en ligne ou mieux sur de vrais smartphones, testez, bon courage !

Pour conclure, je finie par ce que vous attendez tous, des exemples et des gabarits gratuits concrets. Pour voir le bien fait du responsive design sur smartphone, suivez les liens ci-dessous :
https://econsultancy.com/blog/63427-responsive-email-design-10-great-examples
http://mashable.com/2013/11/08/email-responsive-design/
http://www.campaignmonitor.com/templates/
(ce site est une référence à garder dans vos favoris)
http://zurb.com/playground/responsive-email-templates