TRIM 1 - Cours 09 - Newsletter

Pour les créas

Uniquement des safe fonts (Arial, Times, Verdana, ...)
Largeur maximum de 600px
Pas de fond derrière les textes
Possibilité de faire des animations gif
Préférer des fonds de couleur uni

Pour les devs

N'utiliser que des <table>, <tr>, <td>
Le <table> principal doit avoir width="98%"
Pas plus de 5 <table> imbriqués
Éviter les balises de type block (p, div, ...)
Éviter les colspan
Pas de HTML5/CSS3
Pas de JS
Pas de CSS externe
Appliquer le style sur chaque <td>

Pour les devs

Toutes les images en gif ou jpg
Rajouter les balises alt quand c'est utile
Rajouter display:block; dans le style de chaque <img>
Les images doivent être hébergées sur un serveur
Utiliser l'attribut valign (middle, top, bottom) pour aligner verticalement dans le <tr>
Tous les liens en target="_blank" (nouvel onglet)
Mettre un <span> dans chaque <a> avec le même style

Pour les devs

Éviter les shorthands CSS (font:10px Arial;)
Éviter les padding et margin
Indiquer les tailles en pixels
Éviter background-image
Pour mettre une couleur de fond, utiliser l'attribut bgcolor ET le style background-color
Toujours proposer une version web
Toujours proposer une désinscription
Valider W3C

Template


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Newsletter title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin:0;padding:0;background-color:#ececec;" bgcolor="#ececec">
    <table width="98%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color:#ececec;">
        <tr>
            <td>
                <table width="600" cellpadding="0" cellspacing="0" align="center">
                    <tr>
                        <td width="600" height="200" bgcolor="#00707B" style="background-color:#00707B;font-family:Arial;font-size:12px;text-align:center;color:#ffffff;">
                            Contenu
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Ouvrez votre maquette avec fireworks, recadrez pour enlever le fond et découpez les zones qui composeront les cellules de votre newsletter finale avec l'outil Tranche (k)

Outil tranche

Recouvrez la totalité de la maquette. Changez la visibilité des calques si vous avez des problèmes pour distinguer la maquette. Faites attention à ce que les lignes se superposent bien

Exemple tranches

Si par la suite vous réalisez que vous avez fait une erreur, il vaut souvent mieux recommencer l'export depuis fireworks plutôt que d'essayer de corriger dans l'export

Une fois l'export terminé, vous devriez avoir un fichier html ainsi que les images. Supprimez toutes les images qui vont devenir des textes ainsi que toutes les images ne contenant qu'une couleur unie (nous les remplacerons par une couleur dans le code)

Ouvrez le html dans un editeur.

Les exports fireworks contiennent souvent le bug align=""left"
Remplacer par align="left"


<table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="600">

devient


<table style="display: inline-table;" align="left" border="0" cellpadding="0" cellspacing="0" width="600">

Supprimez les <img> correspondant aux images supprimées mais reportez les dimensions sur le <td> contenant l'image


<td><img src="images/newsletter_r1_c1.gif" width="600" height="69" alt="" /></td>

devient


<td width="600" height="69"></td>

Supprimez les attributs "id" et "name".


<td><img name="newsletter_r3_c2" src="images/newsletter_r3_c2.gif" width="14" height="30" id="newsletter_r3_c2" alt="" /></td>

devient


<td><img src="images/newsletter_r3_c2.gif" width="14" height="30" alt="" /></td>

Rajoutez tous les background sur les cellules que dont vous avez supprimé l'image


<td width="38" height="954"></td>

devient


<td width="38" height="954" bgcolor="#000000" style="background-color:#000000;"></td>

Rajoutez le style display:block; sur toutes les images


<img src="images/newsletter_r5_c2.gif" width="517" height="366" alt="" />

devient


<img style="display:block;" src="images/newsletter_r5_c2.gif" width="517" height="366" alt="" />

Renseignez les attributs alt des <img> si nécessaire.


<img style="display:block;" src="images/newsletter_r5_c2.gif" width="517" height="366" alt="" />

devient


<img style="display:block;" src="images/newsletter_r5_c2.gif" width="517" height="366" alt="Mon texte" />

Rajoutez les textes et ajoutez le style de chaque texte sur son <td> le contenant. Utilisez l'attribut valign pour choisir l'allignement vertical du texte dans sa cellule.


<td width="600" height="69" bgcolor="#ffffff" style="background-color:#ffffff;"></td>

devient


<td width="600" height="69" bgcolor="#ffffff" valign="top" style="background-color:#ffffff;text-align:center;font-family:Arial;font-size:10px;color:#999999;">
    Texte
</td>

Rajoutez des liens sur les images cliquables sans oublier le style display:block; sur le <a> ainsi que border:none; sur le <a> ET le <img>


<img style="display:block;" src="images/newsletter_r14_c4.gif" width="47" height="24" alt="" />

devient


<a href="#" style="display:block;border:none;"><img style="display:block;border:none;" src="images/newsletter_r14_c4.gif" width="47" height="24" alt="" /></a>

Remplacez les URLs des images par des URLs absolue (après avoir uploadé les images sur un serveur)


<img style="display:block;" src="images/newsletter_r14_c4.gif" width="47" height="24" alt="" />

devient


<img style="display:block;" src="http://monsite.com/newsletters/manewsletter/images/newsletter_r14_c4.gif" width="47" height="24" alt="" />

Centrez la newsletter en rajoutant un <table> autour du tableau principal

Le premier tableau doit avoir un width="98%" et les deux doivent avoir align="center"


<table width="98%" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td>
      <table width="600" cellpadding="0" cellspacing="0" align="center">
        ...
      </table>
    </td>
  </tr>
</table>

Envoyer depuis un service

Mail Chimp

Templates de base
Ajout de templates
Templates éditables en WYSIWYG
Organisation de campagnes
Outils de tests
Statistiques

Envoyer soi-même

Un script PHP vous est fourni avec ce cours dans le dossier "send_email" de resources.zip fourni avec ce cours. Il ne fonctionne qu'avec les comptes gmail.

Lancez votre serveur apache local (MAMP ou WAMP par exemple)

Ouvrez index.php avec un éditeur de code et renseignez les différentes variables

$to destinataire
$gmail_username votre adresse gmail
$gmail_password votre mot de passe gmail
$subject le sujet du mail
$newsletter le chemin relatif vers le HTML

Lancez le script php en vous rendant à son adresse avec votre serveur local (exemple http://localhost/newsletters/send_email/index.php)

La page vous indiquera "Sent !" si tout s'est bien passé

Sinon vous aurez un message indiquant l'erreur

H2 - P2019

Développement web

Cours 09 - 2015-11-16

Newsletter

Bonnes pratiques

Pour les créas

Pour les devs

Pour les devs

Pour les devs

Bon à savoir

Template

Compatibilité CSS

Popularité des clients mail

Intégrer une newsletter

From scratch

Avec Fireworks (CS6)

Valider

Tester

Envoyer depuis un service

Envoyer depuis un service

Envoyer soi-même