In the ever changing landscape that is e-mail, HTML e-mail coders have yet another rendering issue to QA against.  New this week, Gmail made some changes to how HTML e-mail displays in versions of many Web browsers, mainly Firefox, Chrome and Safari.  Similar to a known issue with Hotmail viewed in Firefox, users may see an extra space added in between images separated by a <br> tag.

 

Unlike Outlook 2007 rendering challenges, and fortunately for everyone, this is a relatively easy fix via find and replace if you're familiar with HTML.

 

To fix, you need to add style="display:block" to ‘almost’ every <img> tag.  For example: <img src=”image.jpg” style="display:block" >.  I put ‘almost’ in quotes because sometimes you may want your image to display inline with a paragraph (like have the text wrap around an image).  In this case, display:block will break it. You will need to use display:inline instead.

  

 

With the Firefox/Hotmail issue, you could easy add “display:block;” to a <style> tag at the top of your e-mail. Gmail though ignores the <style> tag, and much like applying font-family, font-style, font-size, and color, etc, this needs to be coded inline to render correctly and not via a style sheet.

  

 

Going forward, this is an easy change, but don’t forget to take a look at any automated messages, such as welcome messages or transactional e-mails. Those will need to be edited as well.

  

 

So did Gmail make a mistake here? No, I don’t think so. They updated their Web client to better support HTML5, representing greater things to come for the Web and “hopefully” for e-mail too, perhaps even supporting video within e-mail!  This is just one drawback of many benefits.  And with this new standard of coding (which can slightly increase file size), we may see more Web mail & Desktop clients making the switch too.

 

What do you think? I'd love to hear your pros and cons on the change.

 

Jim Kelley, manager, Creative Services, e-Dialog