We know by now that all email clients are not created equal. Your email campaign will not render the same in Outlook 2007 as it does in Yahoo, Gmail or Lotus Notes. This week we’re focusing on email rendering in Hotmail. Look for design tips for other email clients in weeks to come. Below are six important topics to consider when building your email campaign in order to create the best experience possible for Hotmail subscribers.
Preview Pane
Hotmail users have the option of viewing their email in a vertical or horizontal preview pane. Be sure to consider the content of your top left email real estate to ensure your primary message is received. Read Considering the Preview Pane for more information.
Image Blocking - Alt Tags
Images are blocked by default in Hotmail. Hotmail also uses gray rectangles in place of blocked images and does not display “alt” tags. While there is no way to force Hotmail to display “alt” tags, we recommend including them for other email clients that do render them when images are blocked by default.
Images
When a subscriber uses a Firefox browser to view email in Hotmail, the subscriber may see extra white space under images, severely impacting email rendering. Avoid this problem by placing a “display: block” style in image tags: <img src=“image.jpg” style=“display: block;”>. This workaround could potentially cause rendering issues with other email clients, so be certain to test.
Hotmail automatically displays all links without an underline, and the underline only appears when the mouse hovers over a link. If underlined links are desired, you will need to set the “text-decoration” property to underline with inline CSS in the <a> tag of every individual link. For instructions, read last week’s Design Tip of the Week.
Non-Black Default Font Color
Hotmail will set any text without a specific font color to dark gray. To ensure colors maintain brand standards and display as intended, assign a specific color (even if it’s black) to all text in your message.
Avoid Forms
Hotmail will render forms properly, but disables the submit button—so forms will not function as intended. Encourage subscribers to view the email as a webpage or drive them to a website where the form can be rendered properly.
Be sure to read our design tips in the coming weeks for rendering tips in other email clients. Portions of this blog, Design Tip of the Week: Email Rendering in Hotmail, and more information on email rendering can be found in our whitepaper “Email Marketing Design: The New Essentials”.
Preview Pane
Hotmail users have the option of viewing their email in a vertical or horizontal preview pane. Be sure to consider the content of your top left email real estate to ensure your primary message is received. Read Considering the Preview Pane for more information.
Image Blocking - Alt Tags
Images are blocked by default in Hotmail. Hotmail also uses gray rectangles in place of blocked images and does not display “alt” tags. While there is no way to force Hotmail to display “alt” tags, we recommend including them for other email clients that do render them when images are blocked by default.
Images
When a subscriber uses a Firefox browser to view email in Hotmail, the subscriber may see extra white space under images, severely impacting email rendering. Avoid this problem by placing a “display: block” style in image tags: <img src=“image.jpg” style=“display: block;”>. This workaround could potentially cause rendering issues with other email clients, so be certain to test.
*View in Hotmail with images on and off.
LinksHotmail automatically displays all links without an underline, and the underline only appears when the mouse hovers over a link. If underlined links are desired, you will need to set the “text-decoration” property to underline with inline CSS in the <a> tag of every individual link. For instructions, read last week’s Design Tip of the Week.
Non-Black Default Font Color
Hotmail will set any text without a specific font color to dark gray. To ensure colors maintain brand standards and display as intended, assign a specific color (even if it’s black) to all text in your message.
Avoid Forms
Hotmail will render forms properly, but disables the submit button—so forms will not function as intended. Encourage subscribers to view the email as a webpage or drive them to a website where the form can be rendered properly.
Be sure to read our design tips in the coming weeks for rendering tips in other email clients. Portions of this blog, Design Tip of the Week: Email Rendering in Hotmail, and more information on email rendering can be found in our whitepaper “Email Marketing Design: The New Essentials”.
ExactTarget Feed
Powered by Compendium Blogware
Comments for Design Tip of the Week: Email Rendering in Hotmail