Actuellement, les utilisateurs reçoivent des e-mails lorsqu’ils envoient un message ou mentionnent d’autres utilisateurs.
Le contenu de l’e-mail occupe 100 % de la fenêtre de l’e-mail.
Comment définir alors la largeur maximale des e-mails ! Par exemple 650 px ?
J’ai essayé ceci, mais cela n’a pas fonctionné !
Vous pouvez définir une largeur maximale pour les e-mails en créant un modèle d’e-mail qui enveloppe la balise %{email_content} dans un tableau dont la propriété max-width est définie via CSS. Si vous souhaitez limiter la largeur des e-mails affichés dans Outlook, vous devez également ajouter un tableau avec une largeur fixe, enveloppé dans des balises <!--[if mso]>.
Voici un modèle d’e-mail de base qui limite le contenu à une largeur maximale de 600 px. Si vous utilisez ce modèle, assurez-vous de remplacer l’URL de l’image du logo par celle du logo de votre site. Remplacez également la valeur de l’attribut href par l’URL de votre site. L’attribut alt de l’image du logo doit être défini avec une valeur pertinente pour votre site.
Comme le modèle inclut le logo du site, vous devez désactiver le paramètre du site
apply custom styles to digest. Si vous ne le faites pas, les e-mails récapitulatifs envoyés depuis votre site afficheront deux logos en haut de l’e-mail.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 {
font-family: Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url"
alt="Nom de votre site" width="150" height="40"
style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;">
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->
</td>
</tr>
</table>
J’ai testé ce modèle avec un service de test d’e-mails utilisant la plupart des clients de messagerie les plus populaires :
iPad (Retina) (iOS 13.1) :
Application Gmail (Android 6.0) :
iPhone 6 Plus :
