SlideShare une entreprise Scribd logo
Infolettre 101
par
Valérie Provost
MIDI CONFÉRENCE2014
2 avril 2014
 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
 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
 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
 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
 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
 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
2 avril 2014 8
Bonnes pratiques
Midi conférence 2014
 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
 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
 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
 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
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

Contenu connexe

Similaire à Les infolettres

Headoo studio bullet time 360°
Headoo studio bullet time 360°Headoo studio bullet time 360°
Headoo studio bullet time 360°
headoo
 
Patriceleroux Outils de veille-Médias Sociaux-Monitoring
Patriceleroux Outils de veille-Médias Sociaux-MonitoringPatriceleroux Outils de veille-Médias Sociaux-Monitoring
Patriceleroux Outils de veille-Médias Sociaux-Monitoring
Patrice Leroux
 
2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances
2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances
2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances
Club Alliances
 
Reseaux sociaux professionnels : Quelle opportunité ?
Reseaux sociaux professionnels : Quelle opportunité ?Reseaux sociaux professionnels : Quelle opportunité ?
Reseaux sociaux professionnels : Quelle opportunité ?
AXIZ eBusiness
 
Headoo's events
Headoo's eventsHeadoo's events
Headoo's events
headoo
 
Conférence Mode & e-Reputation - ESCP - 28 mars 2011
Conférence Mode & e-Reputation -  ESCP - 28 mars 2011Conférence Mode & e-Reputation -  ESCP - 28 mars 2011
Conférence Mode & e-Reputation - ESCP - 28 mars 2011
The Roxane Company
 
Piloter sa campagne digital marketing de A à Z
Piloter sa campagne digital marketing de A à ZPiloter sa campagne digital marketing de A à Z
Piloter sa campagne digital marketing de A à Z
Amar LAKEL, PhD
 
Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...
Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...
Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...
Christian Radmilovitch
 
events
eventsevents
events
headoo
 
Facebook & Twitter : utilisation pour l'entreprise
Facebook & Twitter : utilisation pour l'entrepriseFacebook & Twitter : utilisation pour l'entreprise
Facebook & Twitter : utilisation pour l'entreprise
Antoine Viger
 
8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication Digitale8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication DigitaleAgoralink
 
Le Selfie in-store par Headoo
Le Selfie in-store par HeadooLe Selfie in-store par Headoo
Le Selfie in-store par Headoo
headoo
 
Sendinblue freelance fair tour
Sendinblue freelance fair tourSendinblue freelance fair tour
Sendinblue freelance fair tour
Erwan Tanguy
 
Veille sur Internet et les réseaux sociaux
Veille sur Internet et les réseaux sociauxVeille sur Internet et les réseaux sociaux
Veille sur Internet et les réseaux sociaux
webschooltours
 
Présentation Selfie In-store
Présentation Selfie In-storePrésentation Selfie In-store
Présentation Selfie In-store
headoo
 
Atelier sur le e-marketing - ENP de l'Yonne
Atelier sur le e-marketing - ENP de l'YonneAtelier sur le e-marketing - ENP de l'Yonne
Atelier sur le e-marketing - ENP de l'Yonne
Stéphanie DURVILLE
 
Les points essentiels pour construire une phase expériementation
Les points essentiels pour construire une phase expériementationLes points essentiels pour construire une phase expériementation
Les points essentiels pour construire une phase expériementation
Cazeaux Pascal
 
Conférence E-réputation - DEVCOM LYON 2013
Conférence E-réputation - DEVCOM LYON 2013Conférence E-réputation - DEVCOM LYON 2013
Conférence E-réputation - DEVCOM LYON 2013
WEreputation : Agence E-réputation Lyon-Paris
 
Conférence médias sociaux pour le Groupe J
Conférence médias sociaux pour le Groupe JConférence médias sociaux pour le Groupe J
Conférence médias sociaux pour le Groupe J
OSERESO
 

Similaire à Les infolettres (20)

Headoo studio bullet time 360°
Headoo studio bullet time 360°Headoo studio bullet time 360°
Headoo studio bullet time 360°
 
Patriceleroux Outils de veille-Médias Sociaux-Monitoring
Patriceleroux Outils de veille-Médias Sociaux-MonitoringPatriceleroux Outils de veille-Médias Sociaux-Monitoring
Patriceleroux Outils de veille-Médias Sociaux-Monitoring
 
2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances
2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances
2010.02.05 - Marketing 2.0 - Marketor - Forum SaaS et Cloud IBM - Club Alliances
 
Reseaux sociaux professionnels : Quelle opportunité ?
Reseaux sociaux professionnels : Quelle opportunité ?Reseaux sociaux professionnels : Quelle opportunité ?
Reseaux sociaux professionnels : Quelle opportunité ?
 
Headoo's events
Headoo's eventsHeadoo's events
Headoo's events
 
Conférence Mode & e-Reputation - ESCP - 28 mars 2011
Conférence Mode & e-Reputation -  ESCP - 28 mars 2011Conférence Mode & e-Reputation -  ESCP - 28 mars 2011
Conférence Mode & e-Reputation - ESCP - 28 mars 2011
 
Piloter sa campagne digital marketing de A à Z
Piloter sa campagne digital marketing de A à ZPiloter sa campagne digital marketing de A à Z
Piloter sa campagne digital marketing de A à Z
 
Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...
Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...
Comment intégrer efficacement les media sociaux dans votre stratégie e-commer...
 
events
eventsevents
events
 
Mailjet
MailjetMailjet
Mailjet
 
Facebook & Twitter : utilisation pour l'entreprise
Facebook & Twitter : utilisation pour l'entrepriseFacebook & Twitter : utilisation pour l'entreprise
Facebook & Twitter : utilisation pour l'entreprise
 
8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication Digitale8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication Digitale
 
Le Selfie in-store par Headoo
Le Selfie in-store par HeadooLe Selfie in-store par Headoo
Le Selfie in-store par Headoo
 
Sendinblue freelance fair tour
Sendinblue freelance fair tourSendinblue freelance fair tour
Sendinblue freelance fair tour
 
Veille sur Internet et les réseaux sociaux
Veille sur Internet et les réseaux sociauxVeille sur Internet et les réseaux sociaux
Veille sur Internet et les réseaux sociaux
 
Présentation Selfie In-store
Présentation Selfie In-storePrésentation Selfie In-store
Présentation Selfie In-store
 
Atelier sur le e-marketing - ENP de l'Yonne
Atelier sur le e-marketing - ENP de l'YonneAtelier sur le e-marketing - ENP de l'Yonne
Atelier sur le e-marketing - ENP de l'Yonne
 
Les points essentiels pour construire une phase expériementation
Les points essentiels pour construire une phase expériementationLes points essentiels pour construire une phase expériementation
Les points essentiels pour construire une phase expériementation
 
Conférence E-réputation - DEVCOM LYON 2013
Conférence E-réputation - DEVCOM LYON 2013Conférence E-réputation - DEVCOM LYON 2013
Conférence E-réputation - DEVCOM LYON 2013
 
Conférence médias sociaux pour le Groupe J
Conférence médias sociaux pour le Groupe JConférence médias sociaux pour le Groupe J
Conférence médias sociaux pour le Groupe J
 

Plus de MXO | agence totale

Plugins Wordpress et optimisation de sites dans l'écran
Plugins Wordpress et optimisation de sites dans l'écranPlugins Wordpress et optimisation de sites dans l'écran
Plugins Wordpress et optimisation de sites dans l'écran
MXO | agence totale
 
Démystifier le rôle du chargé de projets
Démystifier le rôle du chargé de projetsDémystifier le rôle du chargé de projets
Démystifier le rôle du chargé de projetsMXO | agence totale
 
Tendances web 2014
Tendances web 2014Tendances web 2014
Tendances web 2014
MXO | agence totale
 
Méthodologies de développement Web
Méthodologies de développement WebMéthodologies de développement Web
Méthodologies de développement Web
MXO | agence totale
 
Conférence clients 19 juillet
Conférence clients 19 juilletConférence clients 19 juillet
Conférence clients 19 juillet
MXO | agence totale
 
Développement d'un site web pour la promotion de pme 2013 cld au coeur de l...
Développement d'un site web pour la promotion de pme 2013   cld au coeur de l...Développement d'un site web pour la promotion de pme 2013   cld au coeur de l...
Développement d'un site web pour la promotion de pme 2013 cld au coeur de l...MXO | agence totale
 
Le marketing par scénarios de quêtes 16 avril 2013
Le marketing par scénarios de quêtes   16 avril 2013Le marketing par scénarios de quêtes   16 avril 2013
Le marketing par scénarios de quêtes 16 avril 2013
MXO | agence totale
 
Projet pastiche crm115 automne 2012
Projet pastiche crm115   automne 2012Projet pastiche crm115   automne 2012
Projet pastiche crm115 automne 2012
MXO | agence totale
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...MXO | agence totale
 
Développement d'un site web pour la promotion de pme 2012 araq-sud - 7 févr...
Développement d'un site web pour la promotion de pme 2012   araq-sud - 7 févr...Développement d'un site web pour la promotion de pme 2012   araq-sud - 7 févr...
Développement d'un site web pour la promotion de pme 2012 araq-sud - 7 févr...
MXO | agence totale
 
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011MXO | agence totale
 
Les réseaux sociaux septembre 2011 - Présentation École Joseph-Poitevin
Les réseaux sociaux septembre 2011 - Présentation École Joseph-PoitevinLes réseaux sociaux septembre 2011 - Présentation École Joseph-Poitevin
Les réseaux sociaux septembre 2011 - Présentation École Joseph-Poitevin
MXO | agence totale
 
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
MXO | agence totale
 
Développement d'un site web pour la promotion de pme 2011
Développement d'un site web pour la promotion de pme 2011Développement d'un site web pour la promotion de pme 2011
Développement d'un site web pour la promotion de pme 2011MXO | agence totale
 
Présentation Jean-Jacques-Bertrand - Les réseaux sociaux
Présentation Jean-Jacques-Bertrand - Les réseaux sociauxPrésentation Jean-Jacques-Bertrand - Les réseaux sociaux
Présentation Jean-Jacques-Bertrand - Les réseaux sociauxMXO | agence totale
 
Présentation travailleurs autonomes - Tirer profit de son site web en 2011 -...
Présentation travailleurs autonomes - Tirer profit de son site web en 2011  -...Présentation travailleurs autonomes - Tirer profit de son site web en 2011  -...
Présentation travailleurs autonomes - Tirer profit de son site web en 2011 -...
MXO | agence totale
 
Présentation travailleurs autonomes 16 novembre 2010
Présentation travailleurs autonomes   16 novembre 2010Présentation travailleurs autonomes   16 novembre 2010
Présentation travailleurs autonomes 16 novembre 2010MXO | agence totale
 
Tirer profit de son site web en 2010
Tirer profit de son site web en 2010Tirer profit de son site web en 2010
Tirer profit de son site web en 2010
MXO | agence totale
 
Développement d'un site web pour la promotion d'un organisme culturel
Développement d'un site web pour la promotion d'un organisme culturelDéveloppement d'un site web pour la promotion d'un organisme culturel
Développement d'un site web pour la promotion d'un organisme culturel
MXO | agence totale
 

Plus de MXO | agence totale (20)

Plugins Wordpress et optimisation de sites dans l'écran
Plugins Wordpress et optimisation de sites dans l'écranPlugins Wordpress et optimisation de sites dans l'écran
Plugins Wordpress et optimisation de sites dans l'écran
 
Démystifier le rôle du chargé de projets
Démystifier le rôle du chargé de projetsDémystifier le rôle du chargé de projets
Démystifier le rôle du chargé de projets
 
Tendances web 2014
Tendances web 2014Tendances web 2014
Tendances web 2014
 
Méthodologies de développement Web
Méthodologies de développement WebMéthodologies de développement Web
Méthodologies de développement Web
 
Conférence clients 19 juillet
Conférence clients 19 juilletConférence clients 19 juillet
Conférence clients 19 juillet
 
Développement d'un site web pour la promotion de pme 2013 cld au coeur de l...
Développement d'un site web pour la promotion de pme 2013   cld au coeur de l...Développement d'un site web pour la promotion de pme 2013   cld au coeur de l...
Développement d'un site web pour la promotion de pme 2013 cld au coeur de l...
 
Le marketing par scénarios de quêtes 16 avril 2013
Le marketing par scénarios de quêtes   16 avril 2013Le marketing par scénarios de quêtes   16 avril 2013
Le marketing par scénarios de quêtes 16 avril 2013
 
Projet pastiche crm115 automne 2012
Projet pastiche crm115   automne 2012Projet pastiche crm115   automne 2012
Projet pastiche crm115 automne 2012
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
 
Développement d'un site web pour la promotion de pme 2012 araq-sud - 7 févr...
Développement d'un site web pour la promotion de pme 2012   araq-sud - 7 févr...Développement d'un site web pour la promotion de pme 2012   araq-sud - 7 févr...
Développement d'un site web pour la promotion de pme 2012 araq-sud - 7 févr...
 
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
 
Les réseaux sociaux septembre 2011 - Présentation École Joseph-Poitevin
Les réseaux sociaux septembre 2011 - Présentation École Joseph-PoitevinLes réseaux sociaux septembre 2011 - Présentation École Joseph-Poitevin
Les réseaux sociaux septembre 2011 - Présentation École Joseph-Poitevin
 
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
 
Développement d'un site web pour la promotion de pme 2011
Développement d'un site web pour la promotion de pme 2011Développement d'un site web pour la promotion de pme 2011
Développement d'un site web pour la promotion de pme 2011
 
Présentation Jean-Jacques-Bertrand - Les réseaux sociaux
Présentation Jean-Jacques-Bertrand - Les réseaux sociauxPrésentation Jean-Jacques-Bertrand - Les réseaux sociaux
Présentation Jean-Jacques-Bertrand - Les réseaux sociaux
 
Tirer profit du web en 2011
Tirer profit du web en 2011Tirer profit du web en 2011
Tirer profit du web en 2011
 
Présentation travailleurs autonomes - Tirer profit de son site web en 2011 -...
Présentation travailleurs autonomes - Tirer profit de son site web en 2011  -...Présentation travailleurs autonomes - Tirer profit de son site web en 2011  -...
Présentation travailleurs autonomes - Tirer profit de son site web en 2011 -...
 
Présentation travailleurs autonomes 16 novembre 2010
Présentation travailleurs autonomes   16 novembre 2010Présentation travailleurs autonomes   16 novembre 2010
Présentation travailleurs autonomes 16 novembre 2010
 
Tirer profit de son site web en 2010
Tirer profit de son site web en 2010Tirer profit de son site web en 2010
Tirer profit de son site web en 2010
 
Développement d'un site web pour la promotion d'un organisme culturel
Développement d'un site web pour la promotion d'un organisme culturelDéveloppement d'un site web pour la promotion d'un organisme culturel
Développement d'un site web pour la promotion d'un organisme culturel
 

Les infolettres

  • 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