Daniel Beck
Daniel Beck

Related Articles  

The Battle of Resolution

July 27, 2007
.: Every artist needs to know what "canvas" they are designing for. A painter needs to stretch canvas, a caver needs to find a piece of rock or wood and a photographer needs to get paper. So what then happens to web professionals? The seasoned web professional has seen their canvases grow and change through the years; 640x480, 800x600, 1024x768, 256 colours, 16 bit colour, 32 bit colour, dial-up and broadband. This becomes a problem for everyone in the web professional community. What IS the web canvas and how does one figure out what they can design for?

.: The main assumption to start with is “Design for what is default installed on whatever the major operating system of the day is, minus 2 to 3 years”. There is an exception to this rule that will be discussed later, though as stated previously, it is a good starting point. There are three major clauses in this statement to discuss: Why use the defaults, Why the major operating system, Why subtract 2 to 3 years.

Why use the defaults.


.: Even though most, if not all, web professionals and their friends play with their systems to customize their work environment, that is not the normal order of things. Most people don’t change their system defaults, either through ignorance or lack of ambition. Even college students fall short in the hope of people customizing their systems. Less then 40% of the incoming college freshman, change their screen resolutions away from the defaults (stats acquired from 2006 freshman class of UW Oshkosh).

.: As computers get faster, thinner and on the whole, "better", web professionals have always wanted to push the limits of the new technology. Make things more interactive, bigger and use more system resources. Though not always wrong, one should always consider the defaults because the majority of people surfing the internet are using them.

Why the major operating system.


.: This should be pretty obvious after the last section, though in a bit more of a restrictive case. All operating systems have different default setting: an install of Windows XP is going to have different defaults when compared to a default install of Apple OS X and Windows Vista (all who have market shares). However, a major note in this section is the point about Apple OS X’s “maximize” mode leaves a few extra pixels on either side of the screen so the maximum width of a page is smaller then the same settings on a Windows box.

Why subtract 2 to 3 years.


.: This is the most debatable point so far. This subtraction is based on the fact that not everyone buys new computers every year or even every other year. Most people hold onto their computers until they have to get new ones. At any given point the average age of a computer that will be looking at a website is 2 to 3 years old. Some will be the newest, the latest and greatest, while others will be 5 years old running Windows 95. By using this average rule you will give yourself the biggest deck of cards to work with, without leaving to many people behind.

"Know your audience"


.: Though using the rule “Design for what is default installed on whatever the major operating system of the day is, minus 2 to 3 years “ will give web professionals
a good place to start, the point must be made that there are exceptions. The main exception is the rule of “Know your audience”. This point can negate everything previously said, however, in normal web development, your audience is “The Internet” and therefore the exception doesn’t work.

.: If you can do a little audience analysis, you may find that you can develop using more up-to-date technologies and have more space to work with. For example, if you were developing a website for a company’s employees to use on their network where the network administrator has version control of all the machines, then you can use that as your standards to design against. If you’re making a website for the design community, then once again, you can be safe in the assumption that they will have better resolution then if you’re designing a site for a retirement home. So before you begin, always ask yourself and the client, “Who is going to looking at this page?” If you can get your hands on the web logs from their previous site, all the better.

So what is my canvas.


.: Since this article is written based on the concept of normal web development standards, not the exceptions, the definitions given here after will be based on best practices and averages.

.: For the last few years most websites where designed in based upon 800x600 16 bit colour on a 56k (or dsl) connection. However, in the last few months there has been a major shift to this default. Looking back two years, the commonality of Windows XP being installed with 1024x768 resolution was increasing (though not 100%). Also, looking at current trends in broadband verses dial-up also negates the importance of certain size restrictions.

.: Though slow to move, major web pages such as Apple.com, ESPN.com, CNN.com as well as TNT.tv have all gone to a wider layout. Granted that they all are marketing toward a little bit more web savvy clientele, their adoption of this wider standard has marked an important shift in web standards. Though much discussion with others in the web development community, the general consensus is that it time to move the standards up to 1024x768 32 bit colour on broadband. Though there are plenty of reasons to not follow this standard yet, all of which revolve around “Know your audience”, the new rule of thumb is that most people can see your site if it is designed for this wider resolution.

.: As stated previously, the different operating systems have different application widths when using the same display settings. This should come into consideration when creating layouts. When designing for an 800x600 screen the maximum width that is safe is 770 pixels wide with a fold (the initially viewable space on a page) at 450 pixels tall. When designing for a 1024x768 screen, your measurements should be 1000 pixels wide (though 990 is suggested) with a fold at 600 pixels tall.

.: Given that web professionals should always be doing audience analysis before they start, a default canvas can be defined. Currently, that canvas is 990x600 32 bit colour on a broadband connection, but time, equipment and applications will always change that definition.