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.
>> Note that this article is now a little old, for more information about modern design standards, check out our Responsive Design page. <<
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 most popular websites in the world, most of their page sizes are fixed width. Here are some examples of fixed width sites, along with the web page size:
- Facebook - 980 pixels
- YouTube - 961 pixels
- Yahoo! - 973 pixels
- MSN - 980 pixels
- Twitter - 919 pixels (partly fluid)
- LinkedIn - 980 pixels
- Bing - 970 pixels (partly fluid)
- Baidu - 900 pixels
- QQ - 974 pixels
The average size of these web pages is around 960 pixels, which is what you would expect as the most screen resolutions are 1024x768 or larger. W3Schools data from January 2011 found that around 1.1% 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 designs in the top ten, Google and Wikipedia, are 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 950 pixels wide, although we are of course happy to produce layouts to fit any screen. Contact us today to discuss your website.
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. Some newer laptops like netbooks will be even smaller than this.
Our designs always take the fold into account, especially on the home page.
Page alignment
If the average web page size is 960 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 a long way in Alexa's list of most popular websites in the world to find a site that is left-aligned. The BBC News website made headlines of its own in 2009 when they redesigned the site to be centre aligned and fit a 1024x768 screen size.
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 960 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.