Responsive HTML Emails need tables?

Question

I need to make an email template and make it responsive. As I see that to achieve that you need to use media queries and css styles on a header etc. I was wondering if tables are not needed anymore to set the layout (they are quite annoying anyway).

But I see blogs explaining how to make a responsive HTML email with tables so I wonder why do they use tables if they have CSS?

Is it because it's some type of compatibility approach? So that old systems will still show the layout even if not perfect and new ones will show it better?

Cheers.

Answer 1

Email clients use really old rendering engines. If you opt for using div's instead of tables you will see your email breaking almost everywhere (specially outlook). Using tables allows you to support old email clients as well as making your email responsive for those that support it.

There are a lot of good tutorials out there that give you templates that you can start from, I suggest you use those and build from there. It takes a little while to perfect it across all clients and platforms and the testing ain't no fun!

This tutorial will come in handy.

If you can get a Litmus account it makes the testing less painful and they get it right most of the time.

Also, if you are already doing emails try to study what device/client most of audience uses and you can use that to make sure your new template renders fine on these.

Good luck!