How to create a HTML e-mail template?

Question

Earlier I posted here a question about how to get two tables responsive. First they replied that I should not use <table> instead of <div> , but later on they said I need to use the old style <table> , because it will be an e-mail template.

After all I am converting the header to the old style in tables, and as a result it looks pretty good in the browser, but after sending it via the e-mail it is completely messed up again (except on my phone). Now I am using the old style, but still it doesn't work. What could be the problem here?

UPDATED:

Two full days I tried to create my own e-mail template in HTML. Included this one I have read many posts about this topic. What I have experienced as a fullstack developer is that e-mail development is completely a different way of programming. If you want to create your own e-mail template in HTML, please read this before.

What @Gwally and I would advise is to use Zurb Foundation which is a responsive front-end framework who will help you to create an e-mail template in a easy way. After when you are ready, you should test your e-mail template with Litmus .

In short; creating your own e-mail template in HTML is pretty hard. It takes a lot of time and after all you don't know the e-mail template is going to work for almost all the e-mail clients. I started over with Zurb Foundation and it works pretty good ;)

Good luck!

Answer 1

There are plenty of places to find modern HTML templates to use as a base for your Email projects. There's been plenty of advice posted here in Stack Overflow to help people with their projects. It's important to remember that email development is not web development. The two are based on HTML, but they use it in different forms. Here's a few things that can get you on the way.

What works

Campaign Monitor has an excellent guide on what works in email with email clients.

• https://www.campaignmonitor.com/css/

Working modern templates

The best way to learn is to look at what others have done and emulate it for your own needs. I'm a personal fan of Zurb Foundation. I have used version 1.0 for one-offs and find 2.0 to be valuable for fixing some of the issues that come from email development, such as template consistency.

• https://foundation.zurb.com/emails.html
• https://litmus.com/community/templates
• https://www.campaignmonitor.com/email-templates/

Ask questions & read answers

One of the best resources for email development is where you are right now here in Stack Overflow. There's a few dedicated experts who have helped the community with really good solutions to questions.

Good luck.

Answer 2

Based on CSS classes in email , you should use inline styles to maintain your layout in the email.

You can take a look this article for some suggestions as to how you can get a responsive layout in your emails. https://css-tricks.com/ideas-behind-responsive-emails/ but you need to approach them differently from web pages.