View
1.662
Download
0
Category
Preview:
Citation preview
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> <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> <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> <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
Recommended