A new Standard in screen resolution?

.. smaller or bigger?

A sequel to this article has been made. In that I discuss the current standard screen width you could design for. Based on data from the first months of 2007.

In a post today Tony Patton over on TechRepublic discusses Determining a standard screen resolution for your application. He has some point to keep in mind when designing a web site.

• There is a general trend towards bigger monitors with higher resolutions. Multiple screens are close to becoming a common household item as well.
• Never ever use your own screen resolution as the standard.
• Nor the monitors of your colleagues. Both will be probably more state of the art than the old CRT or cheapo flat screen from Joe Average.
• Screen resolution does not equal the viewable area or the browser window size. Most users will not have their browsers maximized on screen.
• It is good to look at visitor statistics, but be sure to sample the right audience. Taking the numbers from a site largely visited by developers will not do when the site you are designing is aiming at pensioners.
• Also keep accessibility issues in mind. The disabled users can use screen readers with or low resolution monitors with odd metrics. You should test, test, test.
• You can use JavaScript to establish the viewport size and serve the client a fitting design.

All in all, a not all too shocking article, but a good summing up of things to keep in mind.

Monitors are becoming smaller, not larger!

In a comment TechRepublic member Wombat Ron then adds the increasing use of handheld and smartphones that have much smaller screens. He predicts that the 640*480 resolution could be coming back into the charts. So, it is difficult to say whether we are moving towards bigger or smaller screens.

Separating content and styling

I think Ron is right, although I think these could be handled by using the mediatype'handheld' to serve special styling through a dedicated CSS file. This is where separation comes back in its full power. With a good design of the structure of your site (the html) you will keep that lean and you can then just as easily serve that to handhelds and adjust the styling so that it will fit on a small screen.

What is wrong in the article?

One thing struck me as quite odd in the article was the example code that was in the article. This code looks at the size of the window to determine what to present to the customer. See code.

<SCRIPT language="JavaScript">
<!--
if ((screen.width >= 1024) && (screen.height >= 768)) {
window.location="high_resolution_version.html";
} else {
window.location="low_resolution_version.html";
}
//-->
</SCRIPT>

Here the principle of separation is missed completely. The users is redirected to another page and I think that it would be more then enough to serve another CSS file.

Separation of structure and styling gives the versatile option of changing the style while still leaving the structure intact. At our new website we have a 'normal' version and an 'impaired' version. The only difference is that other stylesheets are delivered to the visitor. The html stays the same. (Mind you: this does not make the site accessible, there are still plenty of issues that we will tackle soon.)

Right now, I am working on changing the layout of the site so that it strechted from an 800 pixel wide design to a 1024 pixel wide design. I this is all relatively painful as I only need to make changes to a couple of CSS files and stretch a few background images.

Afterburner

What is the most odd really in the 'resolution business' is that apparently designs are made for 1024*768 or 800*600. I hardly ever design the height of a web page. The width is a valid parameter but the height of the page is usually determined by the content and as a designer you have hardly any influence on that unless it is your own site.

I usually design for a certain screen width. Also I have a preference for fluid or liquid designs.