3

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!

Jamie
  • 363
  • 7
  • 19
  • **"except on my phone"** so most probably everyone except you will not read the email on your phone ;-) and every phone or e-mail client thinks to render e-mails better then the others. This is why you need to work hard to get the result working nicely everywhere. [litmus.com](http://litmus.com/) is a tool which can help you test all sorts of clients. You might also want to read this: [Testing HTML email rendering](https://stackoverflow.com/questions/1018078/testing-html-email-rendering) – caramba Jan 20 '18 at 16:42

2 Answers2

3

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.

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.

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.

gwally
  • 3,349
  • 2
  • 14
  • 28
  • As you advised I used one of the templates from the Foundation Zurb, but also in Outlook 2016 it looks different. It doesn't work that good. On my phone it works good. – Jamie Jan 20 '18 at 20:20
  • @Jamie, Outlook is a terrible beast. If you rely on padding, you'll find that Outlook ignores them with certain situations like images. Doing buttons for Outlook is very challenging. I create an Outlook-only style sheet to get around these challenges. Another issue with images is that if you try and place a 600px image in a 300px space, Outlook will load it as a 600px image unless you set the image width. It will sometimes ignore your inline styles for width. – gwally Jan 20 '18 at 22:06
  • So everyone like you and me that would like to create their own HTML e-mail that is supported by almost all mail clients are actually forced to use services like Campaign Monitor? – Jamie Jan 20 '18 at 23:11
  • @Jamie, Personally, I use a service like Litmus because it helps check how your email looks across multiple devices from one interface. I also check emails on physical devices like Outlook 2013, IOS devices, Apple Mail, Gmail and others. It helps streamline testing. – gwally Jan 21 '18 at 02:31
  • Currently I am using the "Zurb Foundation" as you said before, and that one works good now (because I had to start over with their structure). But still I have a small issue with images. If I use their placeholder image src link, then it works great, but if I pick somewhere from the internet an image (same width and height), then the format will be crap again. Do you know what to do in this case? – Jamie Jan 21 '18 at 11:20
  • You can see my issue here: https://foundation.zurb.com/forum/posts/55842-float-for-image-does-not-work – Jamie Jan 21 '18 at 14:02
  • @Jamie The default for the `` and the `` is `text-align: left`. I have had to really fight to force Zurb to float things right. Beyond that, I had to fight to get them to flow left in a mobile view. Since comments are a poor place to post the code, I will post a solution on Zurb's forum. You might see it if Zurb doesn't mark it as spam. – gwally Jan 21 '18 at 17:41
1

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.

JasonB
  • 6,243
  • 2
  • 17
  • 27
  • Thanks for your quick reply, but what about the responsive css @media? – Jamie Jan 20 '18 at 16:43
  • @caramba Your comment above says go test your code on another tool and figure it out yourself. My answer says this is what you should do to get your code working. – JasonB Jan 20 '18 at 16:47