Les infolettres

594 vues

Publié le

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
594
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les infolettres

  1. 1. Infolettre 101 par Valérie Provost MIDI CONFÉRENCE2014 2 avril 2014
  2. 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. 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. 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. 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. 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. 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. 8. 2 avril 2014 8 Bonnes pratiques Midi conférence 2014
  9. 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. 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. 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. 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. 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

×