h1

775 px, make it your default webpage width

March 1, 2007

When designing a web-page, your hope as a designer is to have your work look the same on everyone’s computer as it does on your own. Wake up. That is not happening. All browsers don’t get along, and sometimes, it’s the web-pages that are the victims. Here is how you can help:

Start using CSS to manage every element on your web-page.

This page for instance, is laid out using CSS only, no tables. Yes. It’s true. But I’m not here to talk about CSS; I’m here to tell you about 775 px wide. The least you can assume is that people are browsing the Internet at a minimum of 800×600 resolution. For those of you who have it below this, get off of the Internet and think about what you did wrong. Then come back and increase the resolution of your computer.

Whether you are using tables or CSS to layout your design, you should set the width to 775 pixels wide. This way, if people are browsing at 800×600, your page will fit perfectly in any browser. Nobody likes to scroll left or right when viewing a web-page. I have seen a few sites that have gotten away with it, but this is rare. Do yourself a favor and avoid designs that have people scrolling horizontally.

And for those of you who follow in the myspace trend, please stop it with your enormous pages. It may look cool on your computer, but for those users with a lower screen resolution, your site can be a nightmare to navigate. Stop with the huge images too. They can totally skew your web-page and drive users up a wall. Consider reducing the size of big images using any imaging software.

The other (maybe not so) obvious option is to use percentages for the widths of tables (or layers if your going the CSS route). In the event that you have created your own interface with graphics, this really can’t apply. Just try and make sure your graphic is 775px wide.
And remember:
Scrolling horizontally on a web-page = crappy design

UPDATE: I posted a pretty cool update to this post. Check it out here:
https://funbytebitstop.wordpress.com/2008/04/16/775px-webpage-width/

Advertisements

15 comments

  1. […] details… […]


  2. to Share — to copy, distribute and transmit the work – yes i copy your article… is ok ?


  3. Yeah, go for it. Just as long as your readers know where it originated from.


  4. […] webpage width Published April 16, 2008 web design Awhile back I posted what the standard size for a web page’s width should be. I noticed that it has been very […]


  5. cool links, thanks!,


  6. You are very welcome NettieCooper. 🙂


  7. cool links, thanks!,


  8. You are very welcome DennyGross. I am glad you enjoyed it!


  9. I agree with you assuming that the majority of internet users have 800×600 resolution. However I don’t believe this to be true Windows xp & Mac equivalent were released in 2001 the default screen resolution 1024×768 so to assume that 800×600 is the default would mean the is a large amount of 8+ year old computers are in operation that are probably still on dial up and could barley search the web anyway.

    I believe the stranded has changed and new websites should be set to 950+/- pixels in width.

    I am in agreement with the css comment but only if you know how to use it or you just get boring webpages.


  10. You bring up a good point. I’ve been seeing sites going 950+ px too. However, I’m just always worried about the sad sack that has their resolution at 800×600. I guess you can’t please everyone.


  11. one question: if 775 is the ideal width, why is your page set to 780? just measured it using measureit (firefox plugin) and it’s definitely 780.


  12. I didn’t create this template. Although, if I would have, it would have totally been 775px.


  13. Width of 775 pixels is an understatement, I would say. Less than 10% browse the Web through 800×600 resolution. Should you please them and make vast majority suffer from narrow layout. I don’t think so.

    http://www.w3schools.com/browsers/browsers_display.asp


  14. Good point Henrik. However I should be noted that if you do decide to go past 775px, then that small percentage will not be able to see your site that well.

    In fact, judging by those numbers, they must also see the rest of the web the same way (side scrollers!).

    I guess you can’t please them all. Setting the width’s by percentages is the best way to go (if the design permits of course).


  15. The New York Times is around 1000 px wide. I think we have to move on at some point. You can get a used 1024 x 768 on Ebay for the price of a dinner out these days. Let the 800x600ers fall by the wayside.
    -Joe



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: