Largeur des newsletters HTML

Newsletter Sarenza

J’ai mesuré la largeur de plusieurs newsletters reçues ces derniers jours de différents marchands ou guides d’achat connus (à quelques pixels près). La différence de taille est très importante entre la plus large (Ebuyclub) et la moins large (La Camif), environ 195 pixels.

  • Boulanger : 700px
  • Pixmania : 600px
  • Ebuyclub : 785px
  • Sarenza : 670px
  • Kiabi : 605px
  • La Maison de Valérie : 730px
  • La Camif : 590px et 715px
  • Rue du Commerce : 630px et 660px
  • Maximiles : 640px
  • La Redoute : 600px et 700px

Largeur idéale : 580 à 620 pixels ?

La société Mail Performance (avec qui je travaille pour de grosses bases) conseille de ne pas dépasser 580 pixels de large pour être assuré que la newsletter sera lue sans nécessité de scroller sur une majorité de logiciels/webmails et selon les résolutions d’écrans les plus communes.

La largeur utilisable sur les principaux webmails

Pour prolonger cette petite enquête, voici la largeur disponible sur différents webmails parmi les connus et utilisés en France avec comme base un écran configuré avec une résolution 1024×768 :

  • La Poste : 750px (auparavant 580px)
  • Gmail : 570px
  • Yahoo Mail : 620px (et 780px sans la colonne pub par défaut)
  • Hotmail/Live Mail : 770px
  • Orange : 780px

Mesurer et évoluer

Il faut suivre l’évolution des webmails, logiciels et des résolutions des écrans utilisés par ses visiteurs pour adapter les créas. S’il n’est toutefois pas possible d’éviter un scrolling horizontal, il vaut mieux éviter d’afficher les informations les plus importantes dans l’espace de droite qui dépasse la taille de 600 pixels.

A lire ailleurs sur Internet :

10 réflexions sur “ Largeur des newsletters HTML ”

  1. Bonjour Jean-Yves,

    Top tes sujets !!

    Que penses-tu des logiciels actuels d’emailing ? (gratuits ou pas)? … sarbacane et autres…

    Avantages – Inconvenients

    Thanks

  2. Merci pour ce petit panel des tailles utilisées en e-mailing. Il est parfois dur de trouver les bonnes proportions, surtout avec la multiplication des supports de lecture (logiciels, webmails, etc.).
    Après la recommandation des 620px de Christopher Knight date d’août 2005, donc on peut se permettre de la dépasser, le parc des machines ayant évolué depuis 3ans d’une manière générale.
    Par contre vous avez parfaitement raison pour la marge de « sécurité » pour les informations importante.

  3. Bonjour, j’ai eu l’occasion de tester le logiciel Sarbacane 3,
    c’est un logiciel associé avec un service d’abonnement.

    Le concept est pas mal du tout et le logiciel super complet.

    Leurs solution de serveur dédié à l’envoi des mails et à la gestion des statistiques est pas mal et abordable.

  4. GIYF !

    un grand merci, une question que je me posais et dont la solution semble la plus évidente.

  5. Cet article date de 2008, il faudrait préciser qu’à l’heure actuelle, les écrans et les résolutions ont nettement progresser vers du 16/9ème et que les newsletters sont passées allégrement en 700px – 800px voire plus.

    On pourra aussi noter une tendance pour surprendre le lecteur via une newsletter à scroll horizontal au lieu de vertical ! Voici un exemple : http://stylecampaign.com/blog/blogmails/horizontal/Selfridges.htm

  6. Tendance qui semble ce confirmer avec certain gros site comme cdiscount
    http://tr1.bp113.net/do?A1FD00674BF9460BC16A45909A9BE105DB2B12CC7FBCAE0C81FD415172A266C24E0DCAB1FF8D1B089DB0ACCBBD1234BE211A38AE1C599C74

    et laredoute
    http://m-laredoute.pprnl.net/nl/jsp/m.jsp?c=4482cd307421a00e25

    Je suis d’ailleur à la recherche de l’utilité de cela. Si quelqu’un a un article dans ces favoris je suis preneur. :p

    Pour moi ce n’est pas qu’une question de résolution d’écran, surtout quand on voit laredoute.
    Si c’est pour « choqué » ça a eu son importance on va dire ; Par contre niveau présentation et mise en avant je ne suis pas encore convaincu ^^

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>