Apprenez à bien concevoir vos emails et newsletters grâce à Iscomigoo Webdesign
Dans l’article précédent d’Iscomigoo Webdesign je vous parlais du design des emails dans le but d’être le plus efficace auprès des internautes. Mais, une fois le design réalisé il est important de savoir comment coder votre email !
Et oui… Je suis également passée par là. Au début on se dit, c’est simple, il suffit d’un petit peu d’HTML et de CSS et le tour est joué. Et bien pas du tout les amis ! C’est bien plus complexe que ça. Et la première de toutes les raisons est le fait que chaque boite mail affiche différemment les emails : Gmail, Outlook, Hotmail, Yahoo… Vous vous rendrez vite compte que l’affichage d’email lors de leur réception est parfois très aléatoire… et que l’on s’arrache parfois les cheveux.
Alors, comment réalise-t-on un email/une newsletter lisible sur toutes les boites mail ?
Je partage avec vous ce que j’ai appris sur Iscomigoo Webdesign. A la lecture de cet article (comme d’habitude) n’hésitez surtout pas à partager vos conseils, informations supplémentaires, astuces etc.
Alors, comment réalise-t-on un email/une newsletter lisible sur toutes les boites mail ?
Je partage avec vous ce que j’ai appris sur Iscomigoo Webdesign. A la lecture de cet article (comme d’habitude) n’hésitez surtout pas à partager vos conseils, informations supplémentaires, astuces etc.
Les sites dédiés à la conception et envoi d'emails
Si vous souhaitez envoyer une newsletter périodiquement à un nombre important d’internaute il peut être plus judicieux et intéressant d’opter pour un site dédié aux newsletter. En effet, vous pouvez trouver des sites entièrement consacrés aux emails et newsletters et qui vous permette de générer facilement votre template sans une ligne de code, mais également vos envois ! Je vous en propose quelques uns, à vous de choisir celui qui vous convient le mieux.
-
MailChimp:
site en anglais vous proposant ses services gratuitement pour 12 000 newsletters et jusqu’à 2 000 contacts. Simple d’utilisation il vous permet d’envoyer une newsletter très simple avec du texte, une newsletter personnalisée avec plusieurs choix de templates et de programmer votre newsletter.
Pour plus de détails sur ce site, je vous conseille de lire cet article qui explique absolument toutes les étapes de MailChimp.
-
Campaign Monitor:
site en anglais proposant tout comme MailChimp des services gratuits mais des options également payantes. Vous avez une large proposition de personnalisation de vos emails, une procédure de validation des campagnes très accessible et l’upload de listes de contacts.
Pour plus de détails, je vous conseille cet article qui compare MailChimp et Campaign Monitor.
La structure d'un email et d’une newsletter
Si malgré tout vous préférez designer vous même votre email, nous allons donc voir ensemble les bases essentielles. Mais avant ça, une petite liste de sites vous permettant de gérer l’envoi de vos emails :
-
Your Mailing List Provider (YMLP):
site en français vous proposant ses services gratuitement pour 1000 contacts ou moins -
PopList:
site en français vous proposant ses services gratuitement -
Email Poste:
site en français vous proposant ses services gratuitement
Démarrons maintenant avec la structure de votre email. Une newsletter ne s’organise pas simplement comme une page html qui contient son header, son title, son body etc. Une newsletter c’est enfait… un tableau ! Alors revoyez vos notions de tableau en HTML et décomposez votre email en tableau… (facile à dire mais pas toujours à faire selon le design de votre email). Reprenons les bases.
Les tableaux en HTML
Pour commencer, il est préférable de ne pas excéder 650 pixels de largeur pour votre newsletter. Votre tableau devra donc avoir une largeur maximale de 650 pixels pour que votre email puisse s’afficher correctement dans toutes les boites de messagerie qui sont toujours plus petite qu’une page web.
Un tableau commence toujours par une balise <table> et se termine donc par </table>.
Vous pouvez ajouter un titre à ce tableau en utilisant les balises <caption> et </caption>.
Pour former les lignes et les colonnes c’est très facile : chaque ligne est encadrée par les balises <tr> et </tr> et chaque cellule présente dans une ligne est encadrée par <td> et </td>.
Voici un exemple :
<table border="1">
<caption> Voici le titre du tableau </caption>
<tr>
<td>cellule 1 </td>
<td>cellule 2 </td>
<td>cellule 3 </td>
<td>cellule 4 </td>
</tr>
<tr>
<td>cellule 5 </td>
<td>cellule 6 </td>>
<td>cellule 7 </td>
<td>cellule 8 </td>
</tr>
</table>
Et voici ce que ça donne :
Pour commencer, il est préférable de ne pas excéder 650 pixels de largeur pour votre newsletter. Votre tableau devra donc avoir une largeur maximale de 650 pixels pour que votre email puisse s’afficher correctement dans toutes les boites de messagerie qui sont toujours plus petite qu’une page web.
Un tableau commence toujours par une balise <table> et se termine donc par </table>.
Vous pouvez ajouter un titre à ce tableau en utilisant les balises <caption> et </caption>.
Pour former les lignes et les colonnes c’est très facile : chaque ligne est encadrée par les balises <tr> et </tr> et chaque cellule présente dans une ligne est encadrée par <td> et </td>.
Voici un exemple :
<table border="1">
<caption> Voici le titre du tableau </caption>
<tr>
<td>cellule 1 </td>
<td>cellule 2 </td>
<td>cellule 3 </td>
<td>cellule 4 </td>
</tr>
<tr>
<td>cellule 5 </td>
<td>cellule 6 </td>>
<td>cellule 7 </td>
<td>cellule 8 </td>
</tr>
</table>
Et voici ce que ça donne :
| cellule 1 | cellule 2 | cellule 3 | cellule 4 |
| cellule 5 | cellule 6 | cellule 7 | cellule 8 |
Vous l’avez compris rien de bien compliqué encore faut-il que votre email soit des plus simples. Et ce n’est malheureusement pas le cas. Alors je vous propose quelques informations supplémentaires qui pourront vous aider à remanier vos tableaux pour vous approcher au plus près du design de votre email.
Par exemple la fusion de deux ou plusieurs cellules dans une ligne ou dans une colonne. Si vous codez ceci:
<table border="">
<tr>
<td colspan="3">FUSION DE 3 COLONNES EN UNE LIGNE </td>
</tr>
<tr>
<td>cellule 1 </td>
<td>cellule 2 </td>
<td>cellule 3 </td>
</tr>
<tr>
<td>cellule 4 </td>
<td>cellule 5 </td>
<td>cellule 6 </td>
</tr>
</table>
Ce qui donne:
Par exemple la fusion de deux ou plusieurs cellules dans une ligne ou dans une colonne. Si vous codez ceci:
<table border="">
<tr>
<td colspan="3">FUSION DE 3 COLONNES EN UNE LIGNE </td>
</tr>
<tr>
<td>cellule 1 </td>
<td>cellule 2 </td>
<td>cellule 3 </td>
</tr>
<tr>
<td>cellule 4 </td>
<td>cellule 5 </td>
<td>cellule 6 </td>
</tr>
</table>
Ce qui donne:
| FUSION DE 3 COLONNES EN UNE LIGNE | ||
| cellule 1 | cellule 2 | cellule 3 |
| cellule 4 | cellule 5 | cellule 6 |
Vous obtenez une première ligne de tableau qui fusionne 3 cellules. C’est ce que signifie le colspan dans votre première cellule td suivit du nombre de cellules que vous souhaitez fusionner dans votre ligne.
Si au contraire vous souhaitez fusionner deux celules en colonne vous coderez plutôt comme ça :
<table border=""> <tr>
<td rowspan="2"> FUSION DE 2 LIGNES EN COLONNE </td>
<td> cellule 1 </td>
</tr>
<tr>
<td> cellule 2 </td>
</tr>
</table>
ce qui vous donne:
<table border=""> <tr>
<td rowspan="2"> FUSION DE 2 LIGNES EN COLONNE </td>
<td> cellule 1 </td>
</tr>
<tr>
<td> cellule 2 </td>
</tr>
</table>
ce qui vous donne:
| FUSION DE 2 LIGNES EN COLONNE | cellule 1 |
| cellule 2 |
Pour vous entrainer, vous trouverez tout plein de sites sur Internet. Sinon vous pouvez toujours commencer sur ce site où vous trouverez toutes les informations nécessaires sur le codage de tableaux.
Vous l’avez compris ça peut vite devenir un travail fastidieux et qui demande beaucoup de concentration. On se retrouve régulièrement avec des tableaux dans des tableaux, des fusions par-ci et par là… Bref ! De la patience il faut avoir, mais le résultat en vaut le coup et vous serez toujours fier d’avoir réussi l’épreuve : newsletter !
Vous l’avez compris ça peut vite devenir un travail fastidieux et qui demande beaucoup de concentration. On se retrouve régulièrement avec des tableaux dans des tableaux, des fusions par-ci et par là… Bref ! De la patience il faut avoir, mais le résultat en vaut le coup et vous serez toujours fier d’avoir réussi l’épreuve : newsletter !
Les images
Comme vous l’avez déjà remarqué dans les emails que vous recevez, les images ne s’affichent pas toujours. Il est donc primordial de renommer vos images correctement. Même si l’internaute a la possibilité de charger les images dans l’email ou de le visualiser en ligne, avant que les images ne s’affichent il est toujours mieux que votre logo soit nommé au nom de votre blog/marque/entreprise plutôt qu’un mystique « WP00254378_V4.png ».
Je pense que nous sommes tous d’accord sur ce point.
Alors favorisez les noms d’images du type « logo-iscomigoowebdesign.png » ou « tutoriel-newsletter.png ».
Il est également impératif de renseigner la balise Alt de chacune de vos images et de mettre des liens absolus, c’est-à-dire des liens de la forme src= »http://www.iscomigoo-webdesign.com/images.png » plutôt que des liens relatifs de la forme src= »images.png ». Les liens absolus dans vos emails permettent au serveur de localiser vos images.
Votre code html sera par exemple :
< img src= »http://www.iscomigoo-webdesign.com/tutoriel-newsletter.png » alt= »Créer sa newsletter de A à Z » >
Il est également préférable d’avoir peu d’images et des images légères. Pour un affichage optimal de votre email, votre newsletter ne doit pas dépasser 200ko. Si votre email est plus lourd, l’affichage sera plus lent et l’internaute risque de perdre patience et de ne pas vous lire. Deuxième possibilité : si votre email est trop lourd il partira directement dans les spam… C’est à vous de voir. Mais dans tous les cas, je vous recommande de mettre un lien en début d’email « Cliquez sur ce lien pour visualisez la version en ligne de cet email ». Cela permettra d’améliorer votre taux d’ouverture.
Comme vous l’avez déjà remarqué dans les emails que vous recevez, les images ne s’affichent pas toujours. Il est donc primordial de renommer vos images correctement. Même si l’internaute a la possibilité de charger les images dans l’email ou de le visualiser en ligne, avant que les images ne s’affichent il est toujours mieux que votre logo soit nommé au nom de votre blog/marque/entreprise plutôt qu’un mystique « WP00254378_V4.png ».
Je pense que nous sommes tous d’accord sur ce point.
Alors favorisez les noms d’images du type « logo-iscomigoowebdesign.png » ou « tutoriel-newsletter.png ».
Il est également impératif de renseigner la balise Alt de chacune de vos images et de mettre des liens absolus, c’est-à-dire des liens de la forme src= »http://www.iscomigoo-webdesign.com/images.png » plutôt que des liens relatifs de la forme src= »images.png ». Les liens absolus dans vos emails permettent au serveur de localiser vos images.
Votre code html sera par exemple :
< img src= »http://www.iscomigoo-webdesign.com/tutoriel-newsletter.png » alt= »Créer sa newsletter de A à Z » >
Il est également préférable d’avoir peu d’images et des images légères. Pour un affichage optimal de votre email, votre newsletter ne doit pas dépasser 200ko. Si votre email est plus lourd, l’affichage sera plus lent et l’internaute risque de perdre patience et de ne pas vous lire. Deuxième possibilité : si votre email est trop lourd il partira directement dans les spam… C’est à vous de voir. Mais dans tous les cas, je vous recommande de mettre un lien en début d’email « Cliquez sur ce lien pour visualisez la version en ligne de cet email ». Cela permettra d’améliorer votre taux d’ouverture.
Exemple de codage d’un email
Je l’avoue, je n’ai pas moi-même codé un exemple de newsletter mais je propose l’exemple de Stephanie W. pour Alsa création qui est très bien fait. Je vous conseille également de lire l’article associé. Vous n’aurez jamais trop d’informations et de conseils en ce qui concerne la réalisation d’une newsletter.
Bonne chance et bon courage!
Je l’avoue, je n’ai pas moi-même codé un exemple de newsletter mais je propose l’exemple de Stephanie W. pour Alsa création qui est très bien fait. Je vous conseille également de lire l’article associé. Vous n’aurez jamais trop d’informations et de conseils en ce qui concerne la réalisation d’une newsletter.
Bonne chance et bon courage!
0 commentaires :