Analyse de la newsletter Sézane : ce qui marche, ce qui casse sur Outlook

Une référence du retail mode

Sézane est devenue une marque culte du retail français, et leurs newsletters sont scrutées par toute l'industrie. Mais derrière l'image léchée se cache un code HTML qui mérite une analyse attentive.

Structure générale

La newsletter utilise une structure classique à base de tables imbriquées, ce qui est encore aujourd'hui la pratique la plus sûre pour garantir un rendu cohérent sur Outlook 2013/2016/2019.

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
  <tr>
    <td align="center" style="padding:24px 0;">
      <!-- Hero image -->
    </td>
  </tr>
</table>

Ce qui marche

• Largeur fixe à 600px : garantit un rendu propre sur tous les clients mail desktop
• Images avec attributs width et height explicites, ce qui évite le saut de mise en page
• Typographies système en fallback : Helvetica, Arial, sans-serif
• Boutons "bulletproof" en HTML/CSS plutôt qu'en image

Ce qui casse sur Outlook

Malgré une intégration soignée, quelques points posent problème :

1. Margin sur les <td> : Outlook ignore les margin, il faut utiliser padding
2. Background gradients en CSS : non supportés par Outlook, ils tombent en couleur unie
3. Web fonts personnalisées : Outlook ne les charge pas, le fallback prend la main

Conclusion

Sézane montre qu'une newsletter peut être à la fois esthétique et techniquement solide. Le ticket d'entrée reste élevé : tables, inline styles, tests sur Litmus ou Email on Acid avant chaque envoi.