Rendering HTML template in Email clients

Question

I have HTML template completely written with div, a, img, button elements with inline CSS styling. It renders perfectly in HTML editors but not in Email clients. Should it be completely written in table form for Email clients? Here is my code:

Look it on JSFiddle

Answer 1

I believe your particular question is dependent on which email-client you are targeting. It would be helpful if you could specify which email-client you are looking to use, as well as which parts of your html are not working, because certain email-clients may not support certain parts of your code.

For example, as defined here , Outlook has the following problems for rendering HTML:

• Outlook does not “understand” HTML bulleted list tags

• Outlook uses Times New Roman as the default font

• Outlook may add a page break to an email if it exceeds 1800px

• Outlook cleans up paragraph and margin spacing

• Outlook does not support background images

Which you may be able to fix by using specific techniques, such as, as you mentioned, wrapping with tables. I found a link here that may be helpful if you are trying to resolve the rendering on Outlook.

If there is another specific email-client you need to target, there should be posts on stack overflow or on the web for resolving them as well.

Good luck!

Answer 2

You do have to use tables in email HTML and then use CSS and formatting to mask it. Here's a handy guide you can use for email HTML .