Web page width – how wide can a web page be?

Web page width – how wide can a web page be? cover image
  1. Home
  2. Web Design
  3. Web page width – how wide can a web page be?

We all know that usage of high screen resolution and wide screen monitors is increasing. With technological advances such monitors have become very cheap – LCD displays which we would once drool at are now so commonplace.

Should this have an impact on web design principles especially when it comes to web page width? The point is, if you have 800 pixels wide web site displaying in a 1280 pixels wide screen, why do we need to waste the 480 pixels extra space? Shouldn’t we use this space for ads or a vertical navigation bar? On this page, I attempt to answer some such questions.

Sponsored Links

Fixed or “liquid” design

As most web developers and designers would be aware, web site design template widths can be either fixed or “liquid”. In a fixed width template, the horizontal size of the web page remains constant across different monitors. In the case of liquid design layouts the web page width changes depending on the monitor. On higher screen resolutions the web page automatically widens and vice versa.

When you use actual pixel values (in CSS or HTML tables) you get a fixed width web page. Liquid design templates result from using percentages as widths.

Should I always use liquid design?

Though liquid design templates are more flexible (I had to use the word) than their fixed counterparts, they have their own drawbacks. Yes, fixed width web pages might result in horizontal scrolling when displayed on monitors that are not as wide as the design.

But liquid template would increase the width of the web page to monitor size and probably make the web page difficult to peruse – imagine what happens to a web page ideally made for 800 pixels displayed on 1600 pixel wide monitor. Assuming users of very wide monitors have adjusted the browser windows width (decreased it) is unwise.

Another big problem with liquid designs is that they widen the main column (the one that has the web page text) as per the monitor size. Probably, most of you would know it is hard to read web page text that is displayed in a section wider than 600 pixels because it’s not easy to follow it to the next line – it’s tough spotting where the new line begins. However, liquid web page design templates can be developed where the width of the text section is kept static.

Selecting a fixed or flexible (liquid) layout is like choosing between the devil and the deep blue sea. One piece of advice – let the web site content provide the answer.

Fixed web page width for text heavy pages

If the web pages on your site have lot of text content, I strongly advice using a fixed width web page template. You can get a 3 column layout quite easily if you constrain the text to 500 pixels. As the 800×600 pixel screen resolution is dying (?) you can even extend the width of your web site pages by a 100 pixels.

And on this note, if you use analytics software on your site you can quickly solve the fixed-liquid width puzzle if you go over the visitor profiles. For example, on this web site, the percentage of people using 800×600 screen resolution is a little over 3% much smaller compared to the ones using higher end monitors. So I increased the page width to about 900 pixels. This would lead to bad usability experience for thousands of visitors who come to this site using 800×600 each month but it does benefit a lot many.

Remember, you can’t always have the best of both worlds – there are times when you do need to choose. Anyway, the issue remains… how we can make use of the extra real estate on the monitor?

On this site, for instance, I place the important navigation on the left column and the right one that may be hidden in smaller monitors contains slightly less important links and ads.

Two versions of your web site

You can also have two versions of your web site with two different web page widths. The smaller width version is for people working on smaller monitors and vice versa. You can use a programming language such as JavaScript to determine the screen resolution of the client’s computer but be careful of duplicate content issues as far as search engines (especially Google) is concerned.

Web Design