Browse by category

Blog archive

2020April 2020 (1)March 2020 (3)February 2020 (1)2019December 2019 (2)October 2019 (2)September 2019 (2)July 2019 (3)June 2019 (2)May 2019 (1)April 2019 (2)March 2019 (1)February 2019 (2)January 2019 (2)2018December 2018 (2)November 2018 (1)October 2018 (2)September 2018 (1)August 2018 (2)July 2018 (1)June 2018 (1)May 2018 (1)April 2018 (1)March 2018 (2)February 2018 (2)January 2018 (4)2017December 2017 (6)November 2017 (4)October 2017 (5)September 2017 (3)August 2017 (3)July 2017 (3)June 2017 (1)May 2017 (2)April 2017 (1)March 2017 (1)February 2017 (2)January 2017 (2)2016December 2016 (2)November 2016 (1)October 2016 (1)September 2016 (1)August 2016 (1)July 2016 (1)2015December 2015 (1)January 2015 (1)2013December 2013 (1)2012November 2012 (1)

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:

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.

Tagged under: Build a better website   Web page size   Design