Newsletter en responsive web design

responsive-newsletter

Aujourd’hui l’enjeu de la mobilité pour l’e-mail est énorme, elle relance et donne un second souffle à un outil de communication bien malmené et décrié, pas toujours sans raisons d’ailleurs, quoi qu’il en soit l’e-mail j’entends par là (newsletter, e-mailing…) est arrivé à un palier et ne progresse plus au contraire, il aurait plutôt tendance à décliner, car manquant sa cible le plus souvent, la raison essentielle est la stratégie facile des marketers souvent basés sur du volume, plus que sur une relation one to one. Nous bénéficions pourtant en Europe d’une conjoncture relativement bonne avec un record de délivrabilité des messages emails de 91,1%.

Malgré une stratégie calamiteuse sur l’utilisation d’un tel outil qui néammoins permet des retours sans comparaison avec les réseaux sociaux, une ère nouvelle s’ouvre pour le e-mailing, j’en veux pour preuve l’étude européenne menée par ReturnPath qui promet que les smartphones et les tablettes vont devenir le premier mode de lecture des e-mails devant l’ordinateur. Ainsi 41% des messages non optimisés pour la mobilité sont supprimés avant la lecture.
Après ce constat je pense qu’il est inutile d’en rajouter, sur la nécessité de savoir construire techniquement un e-mailing ou une newsletter répondant aux attentes des mobinautes.

Si les sites web sont confrontés à la disparité des navigateurs, les e-mails eux sont confrontés aux nombreux clients mail existants. Ce qui maintient la technique du e-mailing dans une obsolescence malgré tout nécessaire pour couvrir tous les clients mail, pour rappel

Client Email :
Yahoo! Mail->CSS
Hotmail->CSS (avec certaines précautions)
GMail->Tableaux + CSS en ligne
Outlook et Outlook Express->CSS
Lotus Notes->Tableaux + CSS en ligne
AOL 9->CSS
Thunderbird->CSS
Mac Mail->CSS
Entourage->CSS
Eudora pour Mac Tableaux et pas de CSS

La relative difficulté et la contrainte majeure est là, opérer en tableaux tout en donnant la possibilité d’adapter sa CSS.
Pour bien démarrer je conseille l’utilisation d’un template dont je me sers pour démarrer mes projets :htmlemailboilerplate.com
Ce template intègre les solutions relatives aux différents clients mail, voilà de quoi démarrer sur des bases saines. Prenez le temps d’étudier le template pour mieux vous l’approprier.

Je ne vais pas refaire l’article sur le Responsive Web Design, mais les principes sont toujours les mêmes : Les-bonnes-pratiques-du-responsive-web-design/
utiliser les media queries afin de convoquer une CSS adaptée à votre Device, la différence majeure est que dans le cas présent un seul point de rupture sera nécessaire, pour ma part je garde celui du template par défaut @media only screen and (max-width: 639px).
Ne pouvant agir aussi librement qu’avec des div, les deux principaux moyens de jouer sur notre mise en page seront la propriété display:none et l’utilisation de tableaux en vis-à-vis, qui viendront glisser l’un en dessous l’autre au format 320px.

Le cas décrit ci-dessous prend comme base cet exemple :www.my-web-garden.fr/newsletter/newsletter.html
En effet il faut ruser, faute de souplesse des tableaux vous travaillerez plus à adapter la CSS qu’à produire un véritable template fluide comme avec des div.
Tous les table, tr, td devenus inutile en 320px (mobile) se verront attribué un display:none ce qui imposera une reflexion pertinente lors de la découpe de vos images, il faudra penser à fonctionner avec des grilles verticales bien délimitée et à design qui puisse se suffire à lui-même en 320px.
Néammoins pour garder l’essentiel c’est-à-dire le contenu images et textes on procédera autrement il faudra intégrer des tableaux en vis-à-vis par exemple un visuel et un texte chacun dans un tableau, ainsi le texte viendra glisser sous le visuel en 320px. Pensez a réduire vos visuels en CSS si besoin.

Cette façon de procéder vous demandera peut-être comme pour moi de revoir le design d’un e-mail existant pour intégrer ces nouveaux paramètres

https://www.my-web-garden.fr/newsletter/newsletter.html



Un commentaire pour “Newsletter en responsive web design”

  1. Merciiiiiiiiiiiiiiiiiiiiiii bcp 😉

Laissez un commentaire