html page size standard

Question

what is the standard width of an html page today? i know it changed from 10 years ago when people had different monitors, etc. what is it as of 2009?

Thanks!

Answer 1

you are usually safe with 1024x768

Answer 2

Depends on the audience. Also this probably a duplicate question because I've answered it before. Basically I think American consumers can be targeted for 1024 px widths, and international and corporate users 800 px widths.

Answer 3

A little less than 1024 pixels, to accommodate a scrollbar. 960 is popular because it's easily divisible by lots of other numbers, to make grid layouts.

Answer 4

When I develop new pages, I usually try to design for a minimum of 1024x768. Seems to be the most universally used resolution.

According to Google Analytics (on my pages anyway) there are still a few hits where people are using 800x600, but I'm not too worried about that small of a percentage typically.

Answer 5

I'd do 1024x768, but make sure it scales, or shows the most important items in 800x600 well

Answer 6

I think it's pretty safe to assume 800x600 to be the minimum resolution. So aiming or a minimum total width of say 760 ought to be fine.

Max is a different story; CSS frameworks such as 960.gs go for overall fixed maximums, but there's also much to be said for fluid widths in general.

One problem with fluid is that for larger resolutions, lines of text get longer and progressively less readable so what you might do is this: text elements with fixed width, 350 to 400px maybe, and the rest in ems or percentages.

Answer 7

Duplicate of:

http://stackoverflow.com/questions/456250/recommended-website-resolution-width-and-height

Answer 8

When in doubt, copy Yahoo. They switched to a minimum of 1024x768 screen resolution a while back. I checked the analytics on my professional sites, and most of those have < 3% of it's userbase at 800x600.

Also consider the popularity of 960px wide layouts, as demonstrated by the 960 project. I'd say you're in the clear for 1024x768 as your minimum monitor resolution, unless you're specifically designing for octogenarians and the visuall impaired.

Answer 9

Remember that not all of us maximize our web browsers. Make it flexible.

Answer 10

You might like some code? Here you go...

body
{
    margin: 0px;
    padding: 0px;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

#mr-workspace
{
    width:982px;
    margin-right:auto;
    margin-left:auto;
}

#mr-top-pane
{
   position: relative;
   left: 0px;
   width:982px;
   background-color:#000000;
}

#mr-left-pane
{
   position: relative;
   float: left;
   left: 0px;
   width: 180px;
   background-color:#FF0000;
   min-height:600px;
}

#mr-center-pane
{
   position: relative;
   float: left;
   left: 0px;
   width: 560px;
   background-color:#EAEAEA;
   border-right:1px solid #666666;
   border-left:1px solid #666666;   
}

#mr-right-pane
{
   position: relative;
   float: left;
   left: 0px;
   width: 240px;
   background-color:#FF0000;
}

#mr-bottom-pane
{
   position:relative;
   left: 0px;
   width:982px;
   background-color:#999999;
   clear:both;
}

HTML CODE:

<div id="mr-workspace">
  <div id="mr-bodyContainer">
    <div id="mr-titlerow"></div>
      <div id="mr-mainarea">
        <div id="mr-top-pane">
          TOP
        </div>
      <div id="mr-left-pane">
      LEFT
      </div>
      <div id="mr-center-pane">
        <video src="movie.ogg" controls="controls">
             your browser does not support the video tag
        </video>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at commodo nunc. Aliquam feugiat urna in ipsum varius et fermentum massa ullamcorper. Donec sed nisi quis lorem pharetra imperdiet. Quisque dictum vehicula ipsum ac laoreet. Morbi ultricies viverra rhoncus. In felis mauris, porttitor id imperdiet vitae, eleifend at elit. Donec consequat sodales odio et iaculis. Aliquam fringilla ipsum a magna convallis auctor. Etiam semper magna at urna egestas non tempor nunc consectetur. Nam vestibulum tincidunt odio vitae facilisis.</p>
      </div>
      <div id="mr-right-pane">
      RIGHT
      </div>
      <div id="mr-bottom-pane">
      Bottom
      </div>
    </div>
  </div>
</div>