If your subscribers are viewing in Windows Live Hotmail, you'll want to be aware of a few rendering changes that come along with the Wave 4 Beta enhancements released recently.
Email Alignment, Background Color Rendering
Since the Hotmail Wave 4 Beta release this summer, previous emails that were center-aligned in the Hotmail inbox might now be left-aligned when viewing in Firefox, Chrome, Opera and Safari. Email rendering in Internet Explorer has not been affected.
This change is caused by Hotmail constraining the width of an email to the largest defined width in pixels. In the past, we have included a container table with a width of 100%, then defined align=center in a subsequent <div> tag to center the body of the email. Now, Hotmail is overlooking this code and only rendering the email after the first specified width (usually 500-700px). This also means any background colors and/or images included within the table of 100% will be ignored.
Hotmail Before
Hotmail After
The Solution:
Include the CSS below in your email to keep Hotmail from restricting the width of your email. This solution works in all browsers listed above and does not have any ill-effects in IE or other email clients.
<STYLE type=”text/css”>
.ReadMsgBody
{ width: 100%;}
.ExternalClass
{width: 100%;}
</STYLE>
Hotmail After with CSS
Hotmail Active Views
In the new "Hotmail Active Views", users can preview and view YouTube and Hulu videos as well as Flickr photostreams directly above their email. All it takes to trigger the Active View is including a text url within the email to any of Hotmail's partner sites. See Windows Live Preview for a complete list of partners.
YouTube Active View
In our testing, the preview will only display if the URL is not hyperlinked. If the URL is referenced in a text or image link, the preview will not display. For display purposes, I formatted the URL as white text on a white background in my test, so as not to be seen by subscribers. By doing this, the preview will still display without affecting the email design.
Active Views: Pros and Cons
While Hotmail Active Views make it easy for subscribers to stay in their inbox to view rich media, email marketers will not be able to track the engagement from these views unless a subscriber clicks to an external page from a link within the email. Active Views also do not allow subscribers to view related videos that they would normally see on YouTube pages.
For transactional emails that include USPS shipping information, this could be a major value add. If a USPS tracking number is included in an email, an Active View of shipping information will display. As a consumer, this would be much faster to view within my inbox than clicking to a website.
USPS Active View
Therefore, in some cases this feature can enhance the Hotmail experience and add value for subscribers. However, the Active View is very prominent in the inbox, so consider the importance of the preview content if you decide to include a URL.
For more information on Email Rendering in Hotmail, read our past blog post or for information on email design tips download our Design Toolkit.
Anna Meier
Design Consultant
ExactTarget Campaign Solutions Team
Email Alignment, Background Color Rendering
Since the Hotmail Wave 4 Beta release this summer, previous emails that were center-aligned in the Hotmail inbox might now be left-aligned when viewing in Firefox, Chrome, Opera and Safari. Email rendering in Internet Explorer has not been affected.
This change is caused by Hotmail constraining the width of an email to the largest defined width in pixels. In the past, we have included a container table with a width of 100%, then defined align=center in a subsequent <div> tag to center the body of the email. Now, Hotmail is overlooking this code and only rendering the email after the first specified width (usually 500-700px). This also means any background colors and/or images included within the table of 100% will be ignored.
Hotmail Before
Hotmail After
The Solution:
Include the CSS below in your email to keep Hotmail from restricting the width of your email. This solution works in all browsers listed above and does not have any ill-effects in IE or other email clients.
<STYLE type=”text/css”>
.ReadMsgBody
{ width: 100%;}
.ExternalClass
{width: 100%;}
</STYLE>
Hotmail After with CSS
Hotmail Active Views
In the new "Hotmail Active Views", users can preview and view YouTube and Hulu videos as well as Flickr photostreams directly above their email. All it takes to trigger the Active View is including a text url within the email to any of Hotmail's partner sites. See Windows Live Preview for a complete list of partners.
YouTube Active View
In our testing, the preview will only display if the URL is not hyperlinked. If the URL is referenced in a text or image link, the preview will not display. For display purposes, I formatted the URL as white text on a white background in my test, so as not to be seen by subscribers. By doing this, the preview will still display without affecting the email design.
Active Views: Pros and Cons
While Hotmail Active Views make it easy for subscribers to stay in their inbox to view rich media, email marketers will not be able to track the engagement from these views unless a subscriber clicks to an external page from a link within the email. Active Views also do not allow subscribers to view related videos that they would normally see on YouTube pages.
For transactional emails that include USPS shipping information, this could be a major value add. If a USPS tracking number is included in an email, an Active View of shipping information will display. As a consumer, this would be much faster to view within my inbox than clicking to a website.
USPS Active View
Therefore, in some cases this feature can enhance the Hotmail experience and add value for subscribers. However, the Active View is very prominent in the inbox, so consider the importance of the preview content if you decide to include a URL.
For more information on Email Rendering in Hotmail, read our past blog post or for information on email design tips download our Design Toolkit.
Anna Meier
Design Consultant
ExactTarget Campaign Solutions Team
Comments for Design Tip of the Week: Email Rendering in Hotmail – Recent Changes
blog comments powered by Disqus