⚠️ Update 2021-06-10: This is a very old answer. I’m not sure how accurate it is 10 years after it was written. Mail clients are hopefully more compliant today ⚠️ When it comes to email HTML, note that all best practices from web development goes out the window. To make the look consistent, you should: … Read more
Late to the party but here goes… I have experienced this problem as well and it was solved with the following: Including the scheme in the src url (using “//” does not work – use full scheme EG: “https://”) Including width and height attributes Including style=”display:block” attribute Including both alt and title attributes EG: <img … Read more
This seems like a great place to list some resources for anyone trying to learn HTML email. This is (probably) the most comprehensive list of HTML Email resources you will find on the web. Happy learning. Getting Started Guides: Campaign Monitor Mailchimp Sitepoint Reach Customers Online Tuts+ Email on Acid CSS Support & General Guides: … Read more
If you mean “Can I use the stylistic presentation of Bootstrap in an email?” then you can, though I don’t know anybody that has done it yet. You’ll need to recode everything in tables though. If you are after functionality, it depends on where your emails are viewed. If a significant proportion of your users … Read more
Support, unfortunately, is brutal at best. Here’s a post on the topic: Embedded Images in HTML Emails And the post content:
I’ve done a more recent test at Litmus, with data URIs for inline <img> elements and css background images. These desktop clients do show data URIs: Apple Mail 5 Apple Mail 6 Lotus Notes 8 Outlook 2003 Thunderbird 3.0 Thunderbird latest These mobile clients do show data URIs: Android 2.3 Android 4.0 BlackBerry 5 OS … Read more
Use inline styles for everything. This site will convert your classes to inline styles: http://premailer.dialect.ca/
Align the table to center. <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td align=”center”> Your Content </td> </tr> </table> Where you have “your content” if it is a table, set it to the desired width and you will have centred content.
The right way is to follow the HTML standard. You can validate your HTML page here. Your mail client should follow it and should throw away what’s not supported or what’s insecure, like JavaScript. I’ll expose some reasons why following standards could be beneficial here: a webmail willing to show your mail as a full … Read more
Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What’s more, this solution doesn’t require conditional comments. Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in … Read more