Puoi impostare una larghezza massima per le email creando un modello di email che racchiuda il tag %{email_content} in una tabella con max-width impostato tramite CSS. Se desideri limitare la larghezza per le email visualizzate su Outlook, devi anche aggiungere una tabella con larghezza fissa, racchiusa tra i tag <!--[if mso]>.
Ecco un modello di base che limita il contenuto a un massimo di 600px. Se utilizzi questo modello, assicurati di sostituire l’URL dell’immagine del logo con l’URL del logo del tuo sito. Sostituisci anche il valore dell’attributo href con l’URL del tuo sito. L’attributo alt dell’immagine del logo dovrebbe essere impostato su qualcosa di significativo per il tuo sito.
Poiché il modello include il logo del sito, devi assicurarti di disabilitare l’impostazione del sito
apply custom styles to digest. Se non lo fai, le email di riepilogo inviate dal tuo sito mostreranno due loghi nella parte superiore dell’email.
<!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="Nome del tuo sito" 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>
Ho testato questo modello con un servizio di test delle email, utilizzando i client di posta più diffusi:
iPad (Retina) (iOS 13.1):
App Gmail (Android 6.0):
iPhone 6 Plus:
