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