Comment intégrer une newsletter (KiwiParty 2010)

Intégrer une newsletter

sans prise de tête

- Corinne Schillinger -

Corinne Schillinger

identifier les clients et applications mails

Avant l’intégration

http://www.campaignmonitor.com/css/

recenser les contraintes clients

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Dessiner la structure

1. structure élémentaire

2. contraintes client

3. robustesse

Déterminer le balisage

Liens : <a>

Titres : <hn>

Déterminer le balisage

Liens : <a>

Titres : <hn>

Déterminer le balisage

Liens : <a>

Titres : <hn>

Déterminer le balisage

Liens : <a>

Titres : <hn>

Déterminer le balisage

Liens : <a>

Titres : <hn>

Déterminer le balisage

Liens : <a>

Titres : <hn>

Intégrer le tableau principal

<table border="1" cellspacing="0" cellpadding="0" width="600"> <tbody> <tr> <td colspan="3" align="center" valign="top" height="50">...</td> </tr> </tbody></table>

à répéter pour

chaque tableau

1. structure du tableau

2. insertion du contenu

3. validation du balisage

4. envoi de test

Styler et nettoyer<tr>

<td colspan="3" align="right" valign="top" style="padding-right: 15px;"> <span style="padding: 0 0 2px 7px; background-color: #9fc41e;"> <a href="#" style="font-size: 10px; color: black; text-decoration : underline;">Envoyer à un ami</a>&nbsp; <a href="#" style="padding: 0 7px; font-size: 10px; color: black; text-decoration : underline;">Compléter mon profil</a> </span> </td></tr>

style interne appliqué à l’élément cible

Styler et nettoyer<tr>

<td colspan="3" align="right" valign="top" style="padding-right: 15px;"> <span style="padding: 0 0 2px 7px; background-color: #9fc41e;"> <a href="#" style="font-size: 10px; color: black; text-decoration : underline;">Envoyer à un ami</a>&nbsp; <a href="#" style="padding: 0 7px; font-size: 10px; color: black; text-decoration : underline;">Compléter mon profil</a> </span> </td></tr>

style interne appliqué à l’élément cible

<tr><td colspan="3" align="right" valign="top" style="padding-right: 15px;"><span style="padding: 0 0 2px 7px; background-color: #9fc41e;"><a href="#" style="font-size: 10px; color: black; text-decoration : underline;">Envoyer à un ami</a>&nbsp;<a href="#" style="padding: 0 7px; font-size: 10px; color: black; text-decoration : underline;">Compléter mon profil</a></span></td></tr>

suppression des sauts de ligne inutiles

Feinter les webmailsen utilisant background

<tr> <td align="center" valign="middle" width="200" height="40" background="img/bkg_sp1.gif"><a href="#" style="font-weight: bold; font-size : 12px; text-decoration: none; color: #f23997;">EN SAVOIR PLUS</a></td> <td align="center" valign="middle" width="210" height="40" background="img/bkg_sp1.gif"><a href="#" style="font-weight: bold; font-size : 12px; text-decoration: none; color: #6b82c5;">EN SAVOIR PLUS</a></td> <td align="center" valign="middle" width="190" height="40" background="img/bkg_sp1.gif"><a href="#" style="font-weight: bold; font-size : 12px; text-decoration: none; color: #6b82c5;">EN SAVOIR PLUS</a></td></tr>

attribut appliqué à la cellule de tableau <td>

Merci pour votre attentiondes questions ?

corinne@inseo.fr

http://twitter.com/schillinger

http://www.inseo.fr