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 : info@megavolt.ca

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