Maximum width for HTML emails
Posted by David Greiner on April 12, 2005
You've probably noticed that the majority of email newsletters you receive these days are designed with a fixed width as opposed to a fluid layout.
This is because the majority of email clients and web-based email providers don't use the full width of your screen to display an email message. Whether it's ads on Gmail, a menu in Hotmail or your Inbox in Outlook, a chunk of screen real estate is often already being used.
Remember, your recipients are busy and impatient, so horizontal scroll bars are even more of a no-no in email than a web page.
Because of this, it is a good idea to keep your emails to a fixed width of no more than 550-600 pixels. This should ensure that in most cases, your subscribers can view your email as you intended.
What about height?
Obviously the height of each email you send will vary depending on the amount of content. At the same time, it's good to keep in mind that a lot of your recipients may scan your email in a preview pane before they decide to read the entire thing.
The average preview pane is around 300-500 pixels high, so make sure you include any important bits of your email in this area. First impressions count.
11 comments so far
Stay in the loop
Prefer updates via email? Sign up below and we'll send you all the good bits each month.
Dig into a category
- Articles/Tips
- Designer Interviews
- Email Newsletter Design
- Happy Customers/Press
- New Features & Updates
- Observations & Answers
Damien Buckley
wrote on April 12, 2005 09:33 PM
Sounds reasonable and should help with making emails more easily printable too. I've noticed Macromedia & Apple stick to 650-670px wide or less. What's everyone else think?
Jamison Hiner
wrote on April 28, 2005 12:50 AM
I keep mine between 600 - 650 wide, As far as length goes I leave that up to the amount of content I have. I figure most people are use to scrolling by now.
Miranda Ball
wrote on April 28, 2005 11:41 AM
I find that when I create a fixed width email end-users ask for expandable, and vice versa! Catch 22! :0
Jonas
wrote on April 28, 2005 06:21 PM
I never use more space than 650 pixels. It seems to work just fine. The lenght can vary from 400 pixels to 2000 pixels. It really depends on the content. It more important to have interesting content than setting a max lenght.
David Greiner
wrote on May 2, 2005 01:43 PM
Jonas,
I completely agree with your comment about the height of email. I probably didn't explain my point clearly, but I still think it's a good idea to ensure the most important point/image/story of your newsletter should appear at the top of the email to increase the chances of it being read when in the preview pane.
As you say, good content is important and keeping it at or near the top ensures your readers notice it.
David Crowther
wrote on May 14, 2005 01:28 AM
What about using a Table and setting its width to 100%? Would this allow a fluid layout without invoking any horizontal scroll bars?
David Greiner
wrote on May 15, 2005 10:40 AM
David,
Sure would. As long as the minimum width of the fluid layout was still less than 550-600 pixels, you could assume a fluid layout will work fine and avoid horizontal scroll bars.
Nathan Rosenberg
wrote on August 18, 2006 10:08 AM
I'm confused. The new templates just released and the CSS templates are both 700px wide. Why is that if 550-600px is preferable?
Dave Greiner
wrote on August 18, 2006 02:37 PM
Nathan, you should be safe enough with either width, but I certainly wouldn't go over that and you should consider that as a maximum. This figure was never set in stone and really depends on what email environment's your recipient's might be using.
At the same time, resolutions are slowly getting bigger and don't forget this recommendation is more than a year old.
Amber
wrote on September 20, 2006 12:52 AM
I did some research comparing Outlook, Hotmail, and Gmail (interface similar to Yahoo/most web-based email clients provided by ISPs) and how much of a message was visible at 800x600 and 1024x768.
What I decided on is a 550 width b/c that is visible in all scenarios. As for height, you have between 250-370pixels before the fold, so I try and get as much imporant/compelling info in that space so readers will be interested in scrolling down.
Hope this is helpful for some of you.
HIMANSHU PANDEY
wrote on November 1, 2006 07:46 PM
hi there , i am a beginner.I made this emailer http://www.avantikaprinters.com/inductis/index.html
, tell me how to improve it.
Got anything to add?