Have Geek Brain

Standard html page size

what is the standard width of an html page today? I know this has changed since 10 years ago, when people had different monitors, etc. what since 2009?

Thanks!

+1


a source to share


9 replies


Slightly less than 1,024 pixels to accommodate the scroll bar. The 960 is popular because it is easily divisible by many other numbers to make a grid.



+9


a source


Depends on the audience. Also, this is probably a duplicate question because I answered it earlier. Basically I think American consumers can target 1024px wide and international and corporate users 800px wide.



+2


a source


I would do 1024x768, but make sure it scales or displays the most important elements at 800x600

+2


a source


you are usually safe from 1024x768

+1


a source


When I design new pages, I usually try to create at least 1024x768. This seems to be the most universally used resolution.

According to Google Analytics (on my pages) there are still a few hits where people use 800x600, but I am not too worried about this small percentage.

+1


a source


I think it's pretty safe to consider 800x600 as the minimum resolution. So a target or minimum total width like 760 should be ok.

Max is a completely different story; CSS frameworks like 960.gs go for general fixed maximums, but there's also a lot to be said for fluid width in general.

One problem with fluid is that for high resolutions, lines of text get longer and gradually become less readable, so you can do this: fixed-width text elements, 350 to 400px, and the rest in ems or percentages.

+1


a source


If in doubt, copy Yahoo. They switched back to a 1024x768 screen resolution. I have checked analytics on my pro sites and most of them have <3% of its 800x600 user base.

Also consider the popularity of wide 960px layouts as evidenced by the 960 project . I would say that you are pure for 1024x768 as the minimum monitor resolution, unless you are specifically designing for HMX and visibility impairments.

+1


a source


Remember, not all of us are maximizing our web browsers. Make it flexible.

+1


a source


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>
0


a source






More articles:


All Articles