1. Infolettre 101
par
Valérie Provost
MIDI CONFÉRENCE2014
2 avril 2014

2.  Pas de hover
(aucune couleur sauf bleu et le souligné par défaut)
 Pas de @font-face
(utiliser les polices standard système : Arial, Verdana, Time New Roman, Comic Sans… )
 Pas de background image, opacity ou RGBA
(background plain, aucune frivolité permise!)
 Pas de display, float, position et compagnies
(vive les tableaux!)
 Pas de style dans le head, seulement “inline”
 Shadows, border-radius et first-child : Oubliez ça!
Source indispensable : http://www.campaignmonitor.com/css/
2 avril 2014 2
Support
(Outlook, Gmail et compagnies)
Midi conférence 2014

3.  47% des courriels sont ouverts sur mobile
 80% des gens vont supprimer le courriel s’il ne s’affiche pas bien
 Les medias-query sont supportés :
 IOS Mail
 Android Mail
 Windows Phone 7.5
 Blackberry OS7 + Z10
 Ne sont pas supportés :
 iPhone Gmail, Mailbox et Yahoo
 Android Gmail et Yahoo
 BlackBerry OS5
 Windows Mobile 6.1, Windows Phone 7 et 8
 https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
2 avril 2014 3
Support du Responsive
Midi conférence 2014

4.  Les medias-query seront déclarés dans le header entre des balises <style>
les applications qui supportent les medias-queries ne “strip” pas le CSS dans
le header, donc on est correct!
 Les déclarations doivent toutes porter la mention !important, pour
overwriter les styles normaux (déclarés inline dans le courriel).
 Lien indispensable pour plusieurs layouts et trucs d’intégration :
http://templates.mailchimp.com/development/responsive-email/
 P.S. MailChimp sont les pros!
 Exemples de belles infolettres :
 https://econsultancy.com/blog/63427-responsive-email-design-10-great-
examples
 http://www.creativebloq.com/responsive-web-design/email-newsletters-
2132023
2 avril 2014 4
Support du Responsive
Midi conférence 2014

5.  Obtenir le consentement du destinataire
 Consentement exprès
 Consentement implicite
 Consentement AVANT l’envoi du message
 S’identifier
 Mécanisme d’exclusion
 S’applique aussi aux réseaux sociaux et messages textes
 http://www.espresso-media.com/blog/2014/03/19/tout-ce-que-vous-devez-savoir-sur-la-loi-anti-pourriel-
c28/?utm_content=bufferbb168&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer
 http://combattrelepourriel.gc.ca/
 http://www.adviso.ca/blog/2013/11/25/loi-c28-antispam/
2 avril 2014 5
Nouvelle réglementation
Midi conférence 2014

6.  Consentement exprès :
 Case à cocher NON PRÉALABLEMENT COCHÉE indiquant
le consentement de la personne à recevoir des courriels
commerciaux (ex.: lors d’un achat)
 Consentement implicite (entre autres) :
 Après l’achat d’un produit ou service (2 ans après)
 Après une demande de renseignement (6 mois après)
 Si une relation d’affaires est en cours
2 avril 2014 6
Consentement exprès et implicite
Midi conférence 2014

7.  Double Opt-in
 Envoi d’un courriel de confirmation pour s’assurer du consentement
de la personne. À ma connaissance, c’est la seule façon sûre de
prouver le consentement explicite.
 Segmentation
 S’assurer d’un contenu pertinent et intéressant pour le lecteur
 Formulaire le plus simple possible
 Personne n’aime remplir des formulaires et donner des informations
privées sur Internet!
 Bon ratio images/ textes, et alt SUR TOUTES LES IMAGES
 http://cpconcept.ca/site/marketing-dinfolettres-5-bonnes-pratiques/
 http://www.axialdev.com/2011/01/bonnes-pratiques-dans-les-infolettres/
 http://www.adviso.ca/blog/2009/07/02/bonnes-pratiques-ergonomiques-pour-les-infolettres-2-de-2-12-bonnes-pratiques/
 http://cpconcept.ca/site/marketing-dinfolettres-5-bonnes-pratiques/
2 avril 2014 7
Bonnes pratiques
Midi conférence 2014

8. 2 avril 2014 8
Bonnes pratiques
Midi conférence 2014

9.  Extension MailChimp de Gravity Form
 Installer
 Aller chercher l’API Key dans MailChimp
 Si on a des champs spéciaux qu’on veut dans notre
MailChimp, on les créé dans les listes.
 On relie notre formulaire Gravity Form à notre liste
MailChimp.
2 avril 2014 9
Wordpress + Gravity Form + MailChimp
Midi conférence 2014

10.  Custom post type d’infolettre
 On créé notre Custom post type, le client créera une
nouvelle infolettre pour chaque envoi.
 On peut utiliser le champ “relation” pour aller chercher
des articles, événements ou promotions déjà présents
dans le site.
 On créé notre template de page (ex.: single-
infolettre.php), mais on utilise les normes pour les
infolettres.
 Dans MailChimp on créé une nouvelle campagne >
Regular Ol’Campaign. Dans l’onglet Design, on choisira
“Import” > “Import from URL”, où on collera l’url de
notre infolettre.
2 avril 2014 10
Wordpress + Gravity Form + MailChimp
Midi conférence 2014

11.  Segmentation
 On créé notre liste
 Manage subscribers > Groups
 On créé nos groupes (as checkboxes, radio ou
dropdown)
 Une fois les groupes créés dans les listes, on peut les
relier à nos cases à cocher de notre formulaire Gravity
Form, dans l’extension MailChimp.
2 avril 2014 11
Wordpress + Gravity Form + MailChimp
Midi conférence 2014

12.  Signup Forms
 Dans les listes > Signup Forms
 On peut personnaliser légèrement les courriels envoyés
à l’utilisateur, comme les courriels de bienvenues, de
confirmation d’inscription, etc.
 On peut, en gros, ajouter une image d’en-tête, changer
les polices et les couleurs de fond.
 Si on ne veut/peut pas utiliser l’extension de Gravity
Form, on peut “embeder” le signup form directement
dans le site.
2 avril 2014 12
Wordpress + Gravity Form + MailChimp
Midi conférence 2014

13. Nos coordonnées
www.MEGAVOLT.ca
www.facebook.com/MEGAVOLTdesign
www.twitter.com/MEGAVOLTdesign
13
Siège social et production
Saint-Jean-sur-Richelieu
184, rue Longueuil
Saint-Jean-sur-Richelieu
(Québec) J3B 6P1
Demande de renseignements
Téléphone : 450 347-8811
Sans frais : 1 877 447-8811
Télécopieur : 450 347-5826
Courriel général : info@megavolt.ca
Bureaux de services
(sur rendez-vous seulement)
Montréal
4020, Saint-Ambroise, suite 495
Montréal (Québec) H4C 2C7
Rive-Nord | Mascouche
2694, Chemin Sainte-Marie, bureau 101
Mascouche (Québec) J7K 1M9