Blog


Repurpose your Images for Mobile Email

10.19.2011

Read More Design Emails for Mobile Devices

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

By Michelle Klann
September 19, 2011
 

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:

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.

Comments

thanks for the tip
By cc on 10/04/2011

Share Your Comment

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:



Share/Save/Bookmark

If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Follow us on Twitter Become a Friend on Facebook Subscribe to our Blog Digg Us! Recommend on StumbleUpon