Saturday, July 4, 2009

Screen Resolution and Template Size

What is the best screen resolution to target a web site template design? This is an important question for those who are interested in designing templates and also who customize templates. That is because the screen resolution is a determining factor when it comes to what your website’s visitors see and don’t see.

Firstly, what is screen resolution? In simple terms, it is the number of pixels (or dots) that make up your entire screen. It is usually expressed as the number of pixels horizontal in to number of pixels vertical. For example, a screen resolution of 1024 x 768 means that a screen can display 1024 pixels across and 768 pixels down. The total number of dots that make up your entire monitor is the multiplication of those two numbers.

It is difficult to pick one right resolution to target your template’s size. Monitors used by Internet users around the world range in resolutions from 640 x 480 (very rare now) to 1600 x 1200 or higher. Further, as technology advances and hardware becomes cheaper, more and more people will move in to high resolution monitors. According to w3schools.com, in January 2009, 96% of its visitors had resolutions of 1024 x 768 or higher. The flip side is that 4% still has 800 x 600 resolutions.

Some time ago, websites were designed targeting an 800 x 600 resolution. But now that the share of that resolution has gone down significantly, the current practice is to optimize a website design for 1024 x 768, a fact even recommended by Jakob Nielsen, the web usability guru, back in 2006.

So what’s the use of this knowledge for the regular blogger? Well, if you want to use a custom third party template or go for a modification of the existing template by adding a new column or increasing its width, check whether the resulting template fits within the 1024 x 768 resolution. You should worry more about the horizontal resolution than the vertical one. Generally, if your custom or modified template has a width of less than 1000 pixels then you can safely assume that a very large percentage of your readers can see the entire width your site without having to scroll horizontally.