HTML emails - zooming in on Android

[counterfoxx]

I have been writing my first HTML email template with tables. I am just trying to get it to fit to screen on mobile devices.

When I have checked on Android the email is always initially zoomed in and the user needs to pinch it out to get it to fit the screen size. The same happens on the iPhone 6 but the older versions of iPhone display fine.

I tried adding this inline style:

style='width:100%; min-width:600px;'

But it doesn’t make a difference. I have also tried this:

<meta name="viewport" content="width=device-width, initial-scale=1.0 />

Any help to make the email fit to screen on Android and iPhone 6 is much appreciated.

[molendijk]

The tables probably are the source of the problem, because td's are always put next to each other unless you give them display: block, which you dont't want, I guess. So the end result is something that is often too broad for small screens.
Use divs and appropriate css for the divs instead, see http://www.w3schools.com/html/html_layout.asp.
Or keep the tables and specify the width of the td's in percentages.

[Beverleyh]

You might need to rethink how you make responsive email newsletters. Email is one of those times where fluid tables are probably still better and more consistent than divs - think tables with % cell measurements and a max width of about 600px.

Here are some resources that should help;
http://alistapart.com/article/can-email-be-responsive
http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
http://www.creativebloq.com/responsive-web-design/build-responsive-emails-2132830

[molendijk]

Beverleih's references confirm my bad experiences with HTML emails: they are a pain, and I wonder if the pain is worth it.
No javascript allowed, no css, just static code.
So no 'read more' inside HTML emails, no videos, no images that show after a click on a link etc.
That's why I would prefer a 'normal' email message like 'Dear customer, our latest newsletter can be found HERE', where HERE is a link to a standard modern HTML-page. You could even replace HERE with a nice picture or a video-link (the way YouTube does it).