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:

Message width notification

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:

Hotmail HTML Email Preview

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.

Hotmail Images in HTML Email

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.

Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

4 thoughts on “Is Your Email Too Wide for Hotmail?”

  1. Yeah, and what is my recourse when my Outlook contents (eg. my last 5 or so emails and the go back to prev page/advance to next page arrows disappear off the bottom of the screen thus limiting me to less than the first page of emails and I cannot advance to the 2nd page (or any page thereafter)???

  2. Craig,
    I’m not sure I follow. What is causing the navigation elements to disappear? What browser are you using?

  3. Everything is very open with a clear clarification of the issues.
    It was truly informative. Your site is extremely helpful.
    Thanks for sharing!

Comments are closed.

Free Email Goodies