Passez au design responsive pour vos campagnes E-mailing

Internet sera Responsive ou ne sera pas! Tel est le constat qu’il vous faut absolument faire si vous ne voulez pas passer à côté d’une partie de plus en plus importante des internautes. A l’heure ou internet est devenu accessible depuis n’importe quel support (mobile, tablette, PC, TV etc…) et à l’heure ou l’expérience utilisateur est de plus en plus en plus Cross-canal, il parait essentiel de penser ou re-penser votre site et vos campagnes e-mailing pour un affichage optimal quelque soit la taille de l’écran sur lequel il est consulté.

design responsive

un design responsive s’adapte en fonction de la taille du device

 

Par ou commencer?

le smartphone, l'avenir de l'emailing

85% des utilisateurs de smartphones consultent leurs mails plusieurs fois par jour

S’il on croit les stats, Le mobile est devenu l’outil de prédilection pour la consultation de mail. Avec la démocratisation du smartphone, c’est environ 24 millions de français qui sont équipés aujourd’hui et ce chiffre devrait augmenter de manière considérable. Tous ces mobinautes, du moins 85% d’entre eux, ont naturellement changé leur comportement vis à vis de l’email. Avec un accès à internet illimité en permanence à portée de main, quoi de plus normal de checker ses mails régulièrement, ne serait que pour effectuer un premier tri parmi le nombre incessant de mail publicitaire que vous recevez chaque jour.

En parlant de pub, c’est justement ici qu’il vous sortir votre épingle du jeu. Vous devez pensez vos campagnes, pour que celle-ci s’affiche de manière optimale et soit autant impactantes sur PC que sur mobile ou tablette. Mais comment?

Grâce au Design responsive. En effet grâce aux déclarations media queries, il est désormais possible d’afficher le même template de différentes façon selon la taille d’écran, soit en cachant, soit en déplaçant certains éléments.

 

Voilà comment se présente la commande:

@media only screen and (max-device-width : 480px)

Bien joli tout ça vous me direz!

Mais comment faire si vous ne savez pas ou bien si vous n’avez pas le temps de bâtir des templates responsives from scratch (en partant d’une feuille blanche comme un grand)?

Pas de panique voici des liens vers templates opensource, que vous pourrez réadapter à votre guise:

 

En mettant en page vos campagnes, n’oubliez pas que les smartphones et autre tablettes sont tactiles alors n’hésitez à placer des bons gros boutons, bien pratique pour poser votre énorme index sur votre écran. On appelle cela des boutons “call to action”:  Ces derniers doivent pousser votre destinataire à cliquer sur le contenu de votre mail.

 

N’oubliez pas non plus de respecter les bonnes pratiques de la conception de campagne sous peine de voir votre mail sanctionner directement par les messageries. Ici un article ou figure un rappel de ces bonnes pratiques de l’emailing et ici vous trouverez un site conçu spécialement pour vous rappeller les optimisations d’une campagne e-mailing. Une belle initiative du studio Sarbacane.

Vous pouvez également aller jeter un oeil au livre blanc du studio sarbacane sur l’email responsive. Le téléchargement est gratuit en échange de votre e-mail.

Pensez également à vérifier l’affichage de votre email, pour cela il existe de nombreux testeur dont le nouveau getinbox. Mais j’ai repérer pour ma part cet article qui présente plusieurs solutions de test d’affichage.

Et puisqu’on est dans le responsive, pensez également à optimiser vos design de site web pour que ces derniers s’adaptent à toutes les tailles d’écrans. Vous trouverez facilement des design responsive gratuit pour WordPress en surfant sur le web. Concernant le E-commerce, chez Prestashop il existe également de nombreux templates responsives (qui sont bien sûre payant). Cela fera surement l’objet d’un prochain post.

 

Et voilà pour ce petit billet qui devait être un dossier plus complet à la base. Mais la naissance de mon fils a clairement réduit le temps que je pouvais consacrer à la rédaction d’articles pour mon blog. Priorité à la famille !

 

 

Un commentaire

  1. Bravo pour cet excellent article qui résume bien cette évolution du secteur et pose les bases des bonnes pratiques de l’emailing responsive !
    Je suis juste un peu gêné par l’idée de coder soi-même son template car c’est quand même une affaire de pros… Je comprends bien que le manque de budget pousse parfois les PME à essayer de réaliser elles même leurs emails mais le résultat est bien souvent contre-productifs. Mieux vaut passer par un freelance qui permettra un résultat pro sans coûter la peau des fesses.
    Emailing.com permet notamment de trouver de bons presta pour des tarifs très compétitifs : http://www.emailing.com/experts-freelances-email
    Mais merci pour ce résumé très pertinent en tous cas !

    Reply
    • Merci pour votre commentaire. Concernant l’idée de coder soi-même, j’aborde le sujet de cette manière là car c’est mon métier et que je sais le faire. Sinon, je suis entièrement d’accord avec vous: Si on ne maîtrise pas les bases du webdesign, du html et du css, mieux vaut passer par un freelance ou même une agence, qui feront du très bon boulot en fonction du budget alloué.

      Reply
  2. Bonjour,

    Pour compléter un bon emailing responsive, un peu de gif animé, utilisé a bon escient, peut rendre encore plus vivante la création ou le message commercial.
    Les client mail mobile ou tablette supportant bien le format, il ne faut pas s’en priver sans en abuser.

    Pour veiller les emails quotidiennement sur http://emailing-archives.net, je constate que le responsive n’est pas légion, toutefois j’ai remarqué qu’Eurostar le faisait régulièrement.

    bien à vous
    Ayo

    bien à vous
    Ayo

    Reply
    • je viens d’aller jeter un œil sur votre site, plutôt sympa le concept ;).
      Entièrement d’accord sur les gif. Je pense qu’il faut essentiellement les utiliser pour des « call to action ».
      En ce qui concerne le responsive, je pense que c’est inévitable d’y passer même si aujourd’hui la pratique n’est pas encore répandue. le mobile devient l’outil de prédilection de la consultation de mail.
      Merci pour votre commentaire.

      Reply

Leave a Comment.