Search code examples
mobileresponsive-designgmailhtml-emailnewsletter

How do I debug my responsive email newsletter template?


Essentially, I need a way to debug my email on mobile. Everything looks great, the layout is perfect, until I allow images (in my case, Gmail Allow Images button at the top of the email). At this point all formatting is lost and td's begin to overlap, some images scale up absurdly high, some scale down. The floats do not work after allowing images as well.

I started with Zurb University's email templates (you may find them here: ), again, everything works great in browser but when i actually open up chrome or safari and open the email, the formatting is broken in the exact same way every time.

So, I am asking if anyone knows of a way to debug emails. Or requesting to learn more about other known problems with the Allow Images button breaking the layout of an email.


Solution

  • The issue is more than likely your CSS. For instance float is not supported in pretty much all email clients. On top of that, you need to make the actual dimensions of the images match what you want them to be in email. Without a sample of what you are using, I cannot give much more.

    Also Using HTML or CSS to resize is unreliable.

    Best cost effective email testing tool in my opinion is Email On Acid.