Wiadomości e-mail HTML w 2013 r .: Jak kontrolować odstępy między elementami, takimi jak akapity i obrazy?
Obecnie przeprojektowuję niektóre szablony e-maili HTML, czego nie robiłem od kilku lat na tak głębokim poziomie.
Zrobiłem mój szablon w pliku HTML, który testuję lokalnie w przeglądarce i wszystko wygląda dobrze.
Używam tabel do układuJedyne inne tagi, których używam, są<p> <a> i<img>CSS jest w a<style> tag po otwarciu<body> tag na razie, ale przed wysłaniem konwertuję go na style inlineMailChimp's CSS Inliner Tool. Po prostu umieściłem go w tagu stylu, aby łatwiej było Ci zobaczyć CSS. Nie ma to znaczenia dla wielu klientów w celach testowych.Teraz, gdy wysyłam testowe wiadomości e-mail z mojej aplikacji PHP, staram się, aby przeszły do klienta e-mailowego wyglądającego tak samo jak moja makieta.
Najważniejszą rzeczą, którą zauważam, jest to, że style marginesu / dopełnienia wydają się być ignorowane (np. Outlook 2007) lub dodatkowe dopełnienie / margines jest dodawany do rzeczy takich jak<td> co sprawia, że wszystko jest bardziej wyściełane niż mówiłem (np. Hotmail).
Przykład źródła
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<body>
<style type="text/css">
td {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444;}
a {color:#056DA5;}
p {margin:0; padding:6px 0 6px 0;}
.tel {font-weight:bold; color:#056DA5;}
#wrapper {padding:10px;}
#signoff {padding:18px 0;}
#signoff #questions {padding-bottom:18px;}
#signature {padding-top:20px; border-top:1px solid #EEE;}
#signature td {font-size:12px; color:#777;}
#signature #logo {padding-bottom:12px;}
#signature #contact p {padding:3px 0 3px 0;}
#signature #contact a {text-decoration:none; font-size:13px; font-weight:bold; color:#C00;}
#signature #contact .tel {padding-top:6px; color:#777;}
#signature #social {padding:20px 0 20px 0;}
#signature #social a {margin-right:8px;}
#signature #address {font-size:11px; color:#999;}
</style>
<table id="wrapper" width="100%" bgcolor="#FFFFFF">
<tr>
<td>
<table>
<!-- ROW 1 -->
<tr>
<td>[CONTENT]</td>
</tr>
<!-- ROW 2 -->
<tr>
<td id="signoff">
<p id="questions">If you have any questions, email us at <a href="mailto:[email protected]">[email protected]</a> or call <span class="tel">01234567890</span>.</p>
<p>Thanks,</p>
<p>Company</p>
</td>
</tr>
<!-- ROW 3 -->
<tr>
<td id="signature">
<table cellpadding="0" cellspacing="0">
<tr>
<td id="logo" colspan="3">
<img src="http://www.example.com/images/email/logo.gif" alt="Company" />
</td>
</tr>
<tr>
<td id="contact">
<p><a href="http://www.example.com">www.example.com</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p class="tel">01234567890</p>
</td>
</tr>
<tr>
<td id="social">
<a href="https://www.facebook.com/"><img src="http://www.example.com/images/email/facebook.gif" alt="Facebook" /></a>
<a href="https://twitter.com/"><img src="http://www.example.com/images/email/twitter.gif" alt="Twitter" /></a>
</td>
</tr>
<tr>
<td id="address">Company, address, city, post code</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Spróbuj wyświetlić kod HTML w przeglądarce, a następnie spróbuj wysłać wiadomość e-mail, aby zobaczyć, co mam na myśli.
Co robię źle i jak mogę sprawić, by e-mail przeszedł z zamierzonym CSS?