自動電子郵件樣式

當用戶在我的網站上註冊時，我試圖創建自動電子郵件。電子郵件看起來相當不錯，這一點很重要。自動電子郵件樣式

我在HTML設計了一個電子郵件模板，其繼承人的外觀：

然而，當電子郵件通過服務器發送後，在Outlook中看到的，它看起來像這樣：

這顯然不太對。我知道不同的電子郵件客戶端都會以不同的方式處理HTML和CSS，但是這樣做的正確方法是什麼，以便它可以在儘可能多的不同客戶端上運行？

這是通過PHP的郵件功能發送我當前的代碼：

<html> 
<style> 
    </style> 
<body style='background-color: #b5b5b5; margin: 0; padding: 0;'> 
    <center> 
    <div style='max-width: 600px; background-color: #5a5a5a; padding: 20px; margin-top: 30px;'> 
     <img style='height: 30px; margin: 20px;' src='http://favourite.es/icon/system/branding.png'> 
    </div> 
    <div style='max-width: 600px; 
     background-color: #e8e8e8; padding: 20px; color: #222222; font-family: Roboto, sans-serif;'> 
     <p style='font-size: 20px;'>Welcome to Favourite.es!</p> 
     <p>Hi $newFirstname, welcome to Favourite.es,<br>your new personalised homepage for modern browsers.</p> 
     <p>Thank you for registering.<br>Your account PIN is: $pin</p> 
     <p>Remember to keep your PIN a secret, anyone who has your PIN can view and edit your Tiles.</p> 
     <center> 
     <br> 
     <p style='font-size: 13px; color: #727070;'>If you have any questions, contact us at [email protected]<br>You are receiving this email because you registered at favourite.es</p> 
     </center> 
    </div> 
    <div style='max-width: 600px; 
     background-color: #5a5a5a; 
     padding: 20px;'> 
     <img style='height: 15px; 
     display: inline-block;' src='http://favourite.es/icon/system/splycdsquare.png'> 
     <img style='height: 15px; 
     display: inline-block;' src='http://favourite.es/icon/system/branding.png'> 
    </div> 
    </center> 
</body>

我決定保持CSS內聯，因爲我認爲這將是最簡單的郵件客戶端來使用。

來源

2015-10-12 Splycd

沒有什麼可以測試的，我只能提供一些見解。

您很可能需要刪除單個div上的內聯填充。如有必要，請用'padding：0 20px;'替換或'padding-left：20px; padding-right：20px;'

我已經編碼了廣泛的電子郵件，可以告訴你divs不容易處理。內聯樣式幾乎總是正確的。看看如何使用內聯工具，如Zurb Ink或閱讀關於如何設置您的HTML電子郵件在'老學校'表格式。這總是最安全的選擇。

來源

2015-10-12 20:52:54

謝謝！使用Zurb Ink確實有助於:) – Splycd

自動電子郵件樣式

回答

相關問題