Documente Academic
Documente Profesional
Documente Cultură
Even for experience designers, building email newsletters isnt easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesnt work as it should in every email clients. Styles dont display, images arent visible, etc. This is where these twenty best practices come in handy.
2: Use Tables
Email clients live in the past, so all emails must be built using tables for layout. Some CSS styling can be used, but we will discuss this later. Not Accepted view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. <div id="header"> <h4>Header 1</h4> </div> <div id="content"> Lorem ipsum dolor sit amet. </div>f <div id="footer"> Sign off and footer </div>
Accepted view plaincopy to clipboardprint? 1. <table> 2. <tr> 3. <td>Header 1</td> 4. </tr> 5. <tr> 6. <td>Lorem ipsum dolor sit amet.</td> 7. </tr> 8. <tr> 9. <td>Sign off and footer</td> 10. </tr> 11. </table>
Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Mozilla Firefox 3 Apple Safari 3 Google Chrome
Google Mail (http://mail.google.com) Hotmail/Live Mail (http://www.hotmail.com) Yahoo Mail (http://mail.yahoo.com) AOL Mail (http://webmail.aol.com)
Please note that theyre are other, more convenient services that can be used instead; however, many of these charge monthly fees. For more information, review Litmusapp.
If this were the website world, every developer on the planet would say, "do not use inline styles, create a class for it". Unfortunately, in an email, this is not possible, as the email clients will strip them out, and we don't want that. So if anything needs to be styled, use inline styles. Elements like font type and size can be used within the <table> tag, but individual styles should be placed on <td>'s.
Alt Tags
Many people don't actually open their email; they instead view them in the preview panel. On average the smallest preview panel is around 600px, so always design your emails accordingly, unless you don't want your full email viewable in the preview panel, of course.
view plaincopy to clipboardprint? 1. <table> 2. <tr> 3. <td>Lorem ipsum dolor sit amet.</td> 4. </tr> 5. </table> 6. <table> 7. <tr> 8. <td>Lorem ipsum dolor sit amet.</td> 9. </tr> 10. </table>
Over the past couple of years, Microsoft has vastly improved the Hotmail/Live service. But one huge bug you will come across is the strange padding added to all images. Why do they do this? Who knows? All I know is, there is a wonderfully easy fix. view plaincopy to clipboardprint? 1. <img src="image.jpg" style="display:block;"> On every image tag, simply add display:block, as shown above.
Consider, at the top of the email newsletter, having a link which points to the email on a web server somewhere, so the user can view the email in all its glory. Cannot view this email? View it here