Comment coder un emailing responsive ?

Module 4 : Comment coder un email responsive ?

#EmailingSummErCamp

Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.2/19

1 - Coder un emailing : back to the basics

2 - Les règles de base pour optimiser votre code

3 - Modèles de codes

4 - Le grid view de Gmail

5 - Le pre-header, pour optimiser vos ouvertures

Sommaire

CodEr un Emailing : baCk to thE baSiCS


Coder un emailing : back to the basics

Développeurs, oubliez les nouveautés apparues ces dernières années !

L’emailing, c’est du codage à l’ancienneChaque client email interprète votre code à sa façon

Raisonner en tableaux

Pas de CSS


Exemple de construction d’emailing :

Header

Footer

Message principal

Call to action

Message Image

<table></table>

<table></table>

<table></table>

Coder un emailing : back to the basics

lES règlES dE baSE pour optimiSEr votrE CodE


Les règles de base pour optmiser votre code

Doctype à déclarer :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

A savoir :

• Utiliser des <p style=....>

• N’utilisez pas de liens raccourcis

• Ne fixez pas de hauteur, juste des width

• padding : pas interprété par Outlook, préférez margin

• Remplissez les <alt>

• Pas de tableaux imbriqués (3 au maximum)

• Pas d’images en .gif ou .png

• Toujours mettre un lien de désinscription

• Importance de la version texte


Les règles de base pour optmiser votre code

Pour le responsive, utilisez @media :

modèlES dE CodE


Tableau avec image et texte :

Modèles de code


Rendu :

Modèles de code


Modèles de code

Liens à mettre en haut de l’emailing :

Rendu :

lE grid viEw dE gmail


Le Grid View de Gmail

Un format de type Pinterest pour les emails promotionnels, avec quelques contraintes :


A savoir pour votre codage :

• La photo de présentation doit mesurer au minimum 580 x 480 pixels

• L’image qui représente le logo de l’émetteur est associée au profil Google+

de l’organisation

• Le nom de l’émetteur doit se composer de 20 caractères maximum

• L’objet de l’email doit compter 75 caractères maximum

Toutes les spécificités ici:https://developers.google.com/gmail/actions/reference/offer

Le Grid View de Gmail

lE prE-hEadEr, pour optimiSEr voS ouvErturES


Le pre-header peut faire la différence dans votre taux d’ouverture :

Sans pre-header personnalisé

Avec pre-header personnalisé

Le pre-header, pour optimiser vos ouvertures


Par défaut, sont affichés les premiers mots trouvés dans le code.A vous de fournir ces premiers mots et de les rendre invisible dans l’email.

Utilisez :

Le pre-header, pour optimiser vos ouvertures

proChain modulE :CommEnt EnvoyEr unE CampagnE d’Emailing ?

mardi 5 août 11h

@43dEgrES #EmailingSummErCamp

Merci !

Comment coder un emailing responsive ?

Marketing

Transcript of Comment coder un emailing responsive ?