Catégorie : Trucs & astuces

Intégration HTML d’une newsletter : trucs & astuces

24/09/2010 9 h 16 min

Voici un billet pour vous donner quelques « trucs » concernant l’intégration HTML de mailings/newsletters.

En effet, je m’occupe depuis plusieurs années d’intégration html de site et de nombreuses newsletters. Autant pour un site web, on est assez libre d’intégrer comme on le souhaite, autant pour une newsletter, c’est plus compliqué car il existe de nombreux lecteurs de mails et que le code ou le css est souvent réinterprété, voir parfois supprimé ou ignoré. Et oui, pour le développement d’une newsletter, on ne doit pas prendre en compte l’affichage dans un navigateur mais dans un lecteur de mail (lecteur type logiciel (Outlook, Lotus Note etc.) ou type en ligne / webmail (Hotmail, Gmail, Yahoo…)) ce qui est totalement différent et parfois bien compliqué (difficile de pouvoir tester partout).

Voici donc une liste d’astuces que j’utilise personnellement & qui permettent d’avoir un affichage correct, voir parfait sous les pires des lecteurs de mails (je pense notamment à Outlook 2007) :

  • J’utilise Dreamweaver pour la création des newsletters. Je choisis toujours un encodage type Europe de l’ouest afin d’avoir les caractères spéciaux encodés correctement
    <meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″ />
  • Utiliser des tableaux pour la mise en page mais n’abusez pas des rowspans & colspans, il vaut mieux même les éviter pour avoir une meilleure maîtrise de l’affichage de sa page sous différents lecteurs de mails.
  • Ne pas faire de feuille de style css extérieure liée au document.
  • Ne pas créer des styles css dans une balise <style = »text/css »></script>
  • Tous les css doivent être des styles css en ligne, c’est-à-dire  apparaitre sous forme de style= » »
    exemple : style= »font-size:11px; »
  • Penser à répéter les styles basiques de mise en forme du texte dans chaque cellule de tableau contenant du texte à formater.
    exemple : la police (font-family), les couleur de texte (color), la taille du texte (font-size)
  • Ne pas utiliser de paddings css & de margin css. Utiliser la bonne vieille méthode des cellules de tableau pour créer l’effet margin ou padding désirée.
  • Eviter toutes les règles css de positionnement (position & float).
  • Les images en fond de cellule sont à éviter que ce soit en html ou en css. On peut par contre abuser de la propriété de couleur de fond des cellules – bgcolor. Si toutefois vous devez utiliser une image en fond de cellule, n’oubliez pas de mettre aussi un bgcolor de la teinte la plus présente de l’image en fond. Ainsi pour les lecteurs de mails qui n’afficheront pas l’image, ils afficheront quand même une couleur de fond et le texte restera lisible.
  • Ne pas utiliser des règles de styles courts.
    exemple : font :arial 10px #000000 ; mais plutôt font-family :arial ; font-size :10px ; color :#000000 ;
  • Pour toute image ayant un lien autour de celle-ci, penser à mettre un border= « 0 »
  • Pour centrer horizontalement la news dans la page, la meilleure méthode est d’indiquer un align= »center » sur le premier tableau contenant. Cependant ensuite, il ne faut pas oublier de mettre un align= »left » sur chaque cellule qui aura un texte normalement aligné à gauche.
  • Mettre sur chaque lien <a href=  » « > un target= »_blank » et les propriétés couleurs de ce lien (si celui-ci est un texte), soit color : » » ; sans oublier le text-decoration:none; si on ne souhaite pas un soulignement.
  • N’utilisez pas la veille balise html font. Utilisez les styles css pour mettre en forme votre texte.
  • Le plus simple parfois est de faire une newsletter toute en image. Tout dépend de la mise en page de celle-ci et aussi de sa récurrence.
  • Eviter d’utiliser les balises <p>, <h1>, <h2> etc. Car celles-ci peuvent être reformatées par certains lecteurs de mail.
  • Inutile d’inclure des JavaScripts dans la newsletter, ils ne seront pas pris en compte par les lecteurs de mails.
  • Les gifs animés bugguent sous Outlook 2007. Ils n’affichent que la première image. Il est donc important dans l’élaboration du gif, de mettre les informations les plus importantes dans la première image du gif.
  • Attention aux copiers collers words. Mieux vaut passer via un notepad pour copier coller le texte.
  • Il peut rester cependant un problème d’apostrophe créé sous Word. N’hésitez pas à remplacer l’apostrophe affichée en source ainsi : &rsquo; par un ‘
  • Et enfin, 3 méthodes au choix pour gérer un bug d’espace non souhaité sous les images sous Gmail :
    – mettre un style= »font-size:0; » à toutes vos cellules qui contiennent une image
    – ou un style= »display:block; » sur l’image
    – ou un valign= »absbottom  » sur vos images (via @anthor).

Voici quelques liens qui peuvent vous guider pour mieux comprendre les différentes règles à prendre en compte dans le développement d’une newsletter :

Rendez-vous sur Hellocoton !
PartageEmail this to someoneShare on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on Pinterest

Colorisation d’un lineart de Buninou + WIP

23/05/2010 18 h 15 min

Aujourd’hui, je me suis amusée à mettre en couleur un joli portrait dessiné par Buninou.

J’en ai profité pour faire un petit WIP !

Pour le voir en grand format, je vous invite à faire un tour par ici sur Deviantart.

Lineart © Buninou

Rendez-vous sur Hellocoton !
PartageEmail this to someoneShare on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on Pinterest

Tablette graphique & Windows 7

07/03/2010 19 h 48 min

Cet après midi, j’ai eut envie de me lancer dans une petite colorisation. J’installe donc les pilotes de ma vieille tablette graphique Wacom sous Windows 7 (première sous cet OS) & me voila parti à poser les couleurs sous Photoshop.

Mais voila que je rencontre un petit souci de lag & de traits qui se font n’importe ou & comment. J’en ai vite assez car je passe plus de temps à annuler qu’à coloriser.

Je cherche donc une solution sur internet & oh miracle j’ai la solution. Je l’ai trouvé ici & je vous la retranscris car je suis sure que je ne serai pas la seule à qui cela arrivera & autant que je l’ai pour archive en cas de formatage :

1ere Etape:
Panneau de config> Stylet et fonction tactile>option du stylet>APPUYER ET MAINTENIR -> Paramètre Décoche la case ACTIVER LE MODE APPUYER…. OK et APPLIQUEE2eme Etape:
Panneau de config>Programme>Programme et fonctionnalités>Activer ou désactiver des fonctionnalité Windows>DÉCOCHE « Composants Tablet PC »  OK et reboot

Rendez-vous sur Hellocoton !
PartageEmail this to someoneShare on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on Pinterest