Is Your Email Too Wide for Hotmail?
When it comes to designing HTML emails, it’s better to be safe than sorry with regard to the overall width of your layout. In reviewing some of our screen captures for Hotmail, we’ve noticed that if the email exceeds the width of the Hotmail viewport, a yellow box will appear with the following message:
So what causes the yellow box?
If your email exceeds the reader’s browser window width minus 370px, your email will get cut off along the right side and the yellow box will appear.
Here’s an example before:
If you click to “Show full message” your email will be displayed at its intended width and a horizontal scroll bar will appear along the bottom of the browser window.
At this time, I don’t have a suggested work-around, aside from keeping your email under 630px wide. This would presume that your average user will have their browser window sized to at least 1000px wide.
I tested this using images, DIVs and tables in Firefox 4.0 and IE 9.