top of page

Web page size and layout

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, 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 (Facebook , YouTube , Yahoo!, MSN, Twitter, LinkedIn, Bing, Baidu, QQ

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

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.

Designs need to take fold into account, especially on the home page.

Page alignment

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.

Blog

  • Facebook Classic
  • 160x160.jpg
  • Pinterest Classic
  • LinkedIn Classic
  • Twitter Classic
  • Google Classic
Follow Me
bottom of page