les infolettres
DESCRIPTION
TRANSCRIPT
Infolettre 101par
Valérie Provost
MIDI CONFÉRENCE
2014
2 avril 2014
2Midi conférence 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
Support (Outlook, Gmail et compagnies)
3Midi 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
Support du Responsive
4Midi 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
Support du Responsive
5Midi 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
Nouvelle réglementation
6Midi 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
Consentement exprès et implicite
7Midi 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
Bonnes pratiques
8Midi conférence 2014 2 avril 2014
Bonnes pratiques
9Midi 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
Wordpress + Gravity Form + MailChimp
10Midi 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
Wordpress + Gravity Form + MailChimp
11Midi 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
Wordpress + Gravity Form + MailChimp
12Midi 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
Wordpress + Gravity Form + MailChimp
13
Nos coordonnées
www.MEGAVOLT.cawww.facebook.com/MEGAVOLTdesign
www.twitter.com/MEGAVOLTdesign
Siège social et production
Saint-Jean-sur-Richelieu184, rue LongueuilSaint-Jean-sur-Richelieu(Québec) J3B 6P1
Demande de renseignements
Téléphone : 450 347-8811Sans frais : 1 877 447-8811Télécopieur : 450 347-5826
Courriel général : [email protected]
Bureaux de services (sur rendez-vous seulement)
Montréal4020, Saint-Ambroise, suite 495Montréal (Québec) H4C 2C7
Rive-Nord | Mascouche2694, Chemin Sainte-Marie, bureau 101Mascouche (Québec) J7K 1M9