Create a free account

Blog

News, tips and all things Campaign Monitor

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.

21 comments so far

Damien Buckley

wrote on April 12, 2005 9: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 6: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 1: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 1: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 2: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 7: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.

Michael Philip

wrote on April 24, 2007 11:28 PM

Got a little question for all you gurus:
Is it possible to use DHTML in an e-mail newsletter (for example having expanding content?)

Dave Greiner

wrote on April 24, 2007 11:43 PM

Sorry Michael, but pretty much every email client out there blocks JavaScript by default. Because of this, scripting just isn't an option in email.

sholast

wrote on October 31, 2007 3:03 AM

Thanks. Good post

kiat

wrote on November 5, 2007 9:27 PM

i'll stick with 650 for both adequate width and sufficient coverage exposure both in 2007's resolution trend, webmail/desktop email clients viewable area.

:)

Erudit

wrote on December 4, 2007 6:03 AM

Who tried email-client Foxmail?
... very convenient html editor

Actualist

wrote on January 6, 2008 2:22 AM

>no more than 550-600 pixels
not agree
presently, the monitors allow and more

JohnBH

wrote on January 15, 2008 10:10 AM

Why not go almost to 800 px wide (like 790) since most PC's are native 1024 x 768 and the newer ones are all 16 x 9 wdiescreens and have at least 1024 for width? Is the huge unused border for readability (white space?) How many 800 x 600 displays are still out there among your email targets, anyway?

JAaronAnderson.com

wrote on January 26, 2008 3:43 AM

I understand default preview is 530px for AOL & the average email viewer can see 60 characters in his subject line

Raye

wrote on March 27, 2008 5:39 PM

if you look at outlook 2003, the preview is in columns. so the preview email column is actually only half the screen depending on how the user sets their outlook. so small is still good. and all the users who use their mobiles to check emails.

Bridget

wrote on March 29, 2008 4:21 AM

Any ideas on how to print a very long email - many of my clients want to keep it to one page - even though they have a lot of content.

Would scaling the images and typing a @media = print style to the header of the email be the best - or...?

Got anything to add?

Name

Web site

Your comments (basic HTML is fine)

Search all posts

Dig into a category

Stay in the loop

Subscribe to our RSS feed

Prefer updates via email? Sign up below and we'll send you all the good bits each month.

Popular articles

Why we need standards support in email
Read why standards in HTML email are so important, and what we're doing about it.

Email design guidelines
Learn how to design for images being turned off, preview panes and other useful tips.

CSS support in email in 2007
The CSS support of every popular email environment with recommendations to boot.

Image blocking in email
A roundup of how each of the popular email clients suppress images in HTML email.

Can I use flash in email?
We test flash support in all the popular email clients. The verdict - don't do it.

Email design gallery

Our email design gallery showcases more than 150 amazing email designs sent by our talented customers.