We already know that writing HTML for email poses its own set of unique challenges, and rendering can change without warning as there are no universal email standards. We have a quick update for email rending for Gmail in both Internet Explorer and Firefox. The fix below will show you how to modify your HTML to ensure flawless rendering!
Recent Change in Gmail Rendering
If you’ve started seeing an extra space underneath your images in Gmail like the screen shot below, keep reading. Gmail in both Internet Explorer and Firefox can now add extra pixels of space below your images. This can adversely affect your email design, especially if the individual image elements need to line up next to each other.
To fix, add some simple inline CSS by placing style="display:block;" in the affected image tags. This workaround could potentially cause other rendering issues, so be certain to test. Keep in mind that Gmail strips out embedded CSS, so inline styles are a must.
<img alt="" src=”image.jpg” width=”60” height=”10” style=”display: block;”>
The same rendering issue has occurred in Hotmail for Firefox for quite some time and can utilize the same fix. Keep in mind that if your templates contain the fix using embedded CSS (CSS in the header of the email), this will not work in Gmail. Don’t forget to update any existing transactional or triggered emails.
For those with a technical inclination that may be curious as to the background on the fix, Mozilla has a great summary of the problem.
For other information on rendering specific to Gmail and other major email clients, view some of our past posts:
Design Tip of the Week: Email Rendering in Gmail
Email Design Tip of the Week: Gmail takes two steps forward and one step back
Email Design Tip of the Week: HTML for the Unique Email Landscape
Email Design Tip of the Week: Email Rendering in Hotmail
Email Design Tip of the Week: Email Rendering in Outlook 2007
Email Design Tip of the Week: Email Rendering in Yahoo
Above all, keep testing! Checking email rendering in the major email clients on a consistent basis is the best way to ensure a successful, holistic subscriber experience. It's also a good reminder to all marketers that even web-based email clients can function differently in different browsers.
Andrea Smith
Design Consultant
ExactTarget Campaign Solutions Team
Recent Change in Gmail Rendering
If you’ve started seeing an extra space underneath your images in Gmail like the screen shot below, keep reading. Gmail in both Internet Explorer and Firefox can now add extra pixels of space below your images. This can adversely affect your email design, especially if the individual image elements need to line up next to each other.
To fix, add some simple inline CSS by placing style="display:block;" in the affected image tags. This workaround could potentially cause other rendering issues, so be certain to test. Keep in mind that Gmail strips out embedded CSS, so inline styles are a must.
<img alt="" src=”image.jpg” width=”60” height=”10” style=”display: block;”>
The same rendering issue has occurred in Hotmail for Firefox for quite some time and can utilize the same fix. Keep in mind that if your templates contain the fix using embedded CSS (CSS in the header of the email), this will not work in Gmail. Don’t forget to update any existing transactional or triggered emails.
For those with a technical inclination that may be curious as to the background on the fix, Mozilla has a great summary of the problem.
For other information on rendering specific to Gmail and other major email clients, view some of our past posts:
Design Tip of the Week: Email Rendering in Gmail
Email Design Tip of the Week: Gmail takes two steps forward and one step back
Email Design Tip of the Week: HTML for the Unique Email Landscape
Email Design Tip of the Week: Email Rendering in Hotmail
Email Design Tip of the Week: Email Rendering in Outlook 2007
Email Design Tip of the Week: Email Rendering in Yahoo
Above all, keep testing! Checking email rendering in the major email clients on a consistent basis is the best way to ensure a successful, holistic subscriber experience. It's also a good reminder to all marketers that even web-based email clients can function differently in different browsers.
Andrea Smith
Design Consultant
ExactTarget Campaign Solutions Team
Comments for Design Tip of the Week: Email Rendering in Gmail Update - Recent Change
blog comments powered by Disqus