Website width – getting it right!

8 August 2012

The ever changing user preferences keep the website designers on their toes when they design for variable resolutions. The web page width has assumed a vital significance especially in the wake of newer products hitting the market on a daily basis, like wide screen monitors on the one hand and hand-held tablets and smartphones on the other.

If we track the size of the monitors, 640X480 resolution was assumed as a standard for web page designers during the 1990’s. So, the focus was to design for browsers that were maximised on an up to 14 inches monitors at 640X480 resolution. The first five years of the 21st Century saw most internet users switching to 800X600 resolution, and most recently, 1024×768, and 1280×1024 resolutions are becoming more and more commonplace.

The changing preferred resolutions were not the only thing the webmasters needed to worry about. They also had to ensure that the web page does not lose its appeal if different users keep different browser widths. In other words, they needed to ensure that the web page is designed for maximised, full-screen and different-sized browser window.

Checkout the current display width stats here: http://www.w3schools.com/browsers/browsers_display.asp

Not only this, different browsers have different border width and design, which further shrink the available space by about 60 pixels.

Types of Web Pages in terms of Width

When we talk about web pages in terms of width, they can be either Fixed or Flexible or Mixed.

1. Fixed Width: The web pages with fixed width do not change at all, irrespective of the size of the browser. We simply fix the size of the width to a number, and the appearance of web pages remains constant whether your visitors have small browser width or maximised to full screen. However, such an approach of fixing the web page width is not visitor-friendly. For instance, if you’ve designed the web pages broader than the browser’s width, your visitors will need to scroll horizontally to view the page in its entirety. Similarly, a narrower web page width will mean loads of empty space on the browser screen.

2. Flexible Width: The web pages that can vary in width in accordance with the browser width are termed as web pages with flexible width. Such an approach is visitor friendly. However, even flexible width has a problem in terms of readability, as bigger (more than 12 words) or shorter (less than 4 words) scan length of a line of text is difficult to read.

3. Fixed and Flexible Mixed: A blend of fixed and flexible width is the best option for any good web page. Typically, text boxes are fixed at a certain width, while the other divisions can vary so that the web pages can adjust in accordance with the browser width. Creating mixed width pages is not too difficult either. All that’s required is to provide specific pixel numbers for the text divisions, and different percentages for the rest.

However you intend to render your website; try and make sure it looks as good as it can on as many browsers and devices as possible. Why not have a look at our Responsive Web Design Page for more information