Email HTML: Code fix to prevent Gmail render issues
Gmail have recently made some changes to their rendering engine. This means that some Email Marketers will have noticed changes to their email creative that previously rendered perfectly in this scenario. So, how do you fix it?
Well, if you are already building your emails 100% correctly, then you won’t have noticed any difference. If you haven’t been properly coding styles inline your HTML elements, then take note of the following:
If your image tags usually look something like this:
<img src=”http://www.url.com/images/imagename.jpg” height=”height” width=”width” border=”0″ />
Then you need to make sure they include the appended style in bold below, like this:
<img src=”http://www.url.com/images/imagename.jpg” height=”height” width=”width” border=”0″ style=”display:block” />
This fix prevents Gmail from adding 5 pixels (or so) padding around each image in your HTML. The same issue infamously caused massive problems for email marketers in 2006 when Windows Live Hotmail made changes to how they rendered email, particularly images and resulted in a lot of email developers scratching their heads. It’s worth noting that you should always place your styles inline to prevent something like this from catching you out again in future.
