Most web pages follow a common set of sizes and layouts, which you'll recognise even if you aren't aware of them. For example, did you know that nine out of the top ten most popular websites in the world use a fixed-width, centre-aligned design? Maybe you should too.
Our article on web page size and layout breaks down web design into simple concepts, and helps you decide on a format for your website. To understand what the individual elements of a page are for, and why you need them, read our anatomy of a web page.
Page width
This is the first decision to make when designing a website. You have two choices - a fixed width or a fluid layout. In simple terms, fixed-width sites will look the same on every screen, irrespective of how wide it is, while fluid sites will expand to fill the screen.
Of the ten most popular sites in the world, nine of them are designed as a fixed width; only Wikipedia has a real fluid layout. Here are some examples of fixed width sites, along with the web page size:
The average width of these sites is a little over 900 pixels, which is what you would expect as the average screen resolution is 1024x768. A survey from 2007 found that around 8% of users had a screen smaller than this, a number which will continue to decrease.
That most sites use a fixed-width layout isn't really surprising; as design becomes more and more important, designers want to make sure that their sites look the same on every computer. The only truly fluid design in the top ten,Wikipedia, is heavy on content and light on design.
Most of our clients opt for a fixed-width layout, with an average web page size of around 900 pixels wide, although we are of course happy to produce layouts to fit any screen.
Page height
Clients often tell us "I want the site to fit on one page with no scrolling". Our response is that without scrolling, the amount of content on a page will be seriously limited.
A website will display a different amount of content depending on the visitor's screen resolution.The typical browser on the most common screen resolution will show around 600 pixels of your web page, after which the visitor will have to scroll. The area above this imaginary line is called above the fold from newspaper design, and is enough to show the first five search results from Google, or the top three rows of stories on the BBC News website.
Our designs always take the fold into account, especially on the home page.
Page alignment
If the average page width is 900 pixels and the average screen width is 1024 pixels, the average visitor isn't really going to notice if a page is aligned with the left side of the screen or in the centre. It's telling that you have to scroll down to #42 in Alexa's list of most popular websites in the world to find a site that is left-aligned (the French siteFree). An interesting comparison is theBBC News website, which is left-aligned and looks quite old now with its 760 pixel-wide design, and CNN, which uses a more modern centre-aligned design at 985 pixels with fluid top bar.
The main reason to centre-align your page is that it looks better on larger screens. On a 1600 pixel widescreen monitor, a left-aligned web page with a size of 760 pixels has a lot of white space on the right, but the space is a lot less obvious when centre-aligned. Unless your site has special requirements, we would always recommend a centre-aligned design.
From: http://www.iteracy.com/resources/size-and-layout-of-a-web-page/