I thought I’d expand further on the whole paradigm of "website size" and how that is actually linked to physical screen size (and the device displaying it). I’ll also look further into the future and why "website size" will be shifting to a less definable concept. And finally why the whole concept of size is a bit misleading and in some ways unimportant.

From paper to screen

That all sounds rather confusing, so let’s start with a simple idea – the A4 piece of paper. Compared to the web, designing for print is decidedly easy. Everyone can visualize the difference between business cards and postcards. If we were to design a letterhead we’d almost always be talking about A4. Most people would be able to guess fairly accurately exactly the size of A4 (210 x 297mm by the way!). Paper size is a standard. And because of that it’s not a difficult task for even non-designers to conceptualize the positioning and layout of content.

We all know the limitations of the space available.

So what about a website, what size is that?

A website is viewed on a computer screen - so you might say a websites size is whatever can fit on a particular screen, be it a 4" mobile, 15" laptop, or a 30" desktop display. Almost all websites will be viewed regularly within these extremes of screen size. Imagine trying to design a single piece of printed work with a variety of text & image content that will be reproduced on everything from posters to stamps. That is obviously impossible with anything more than a single photograph. Therefore in print design each paper size has traditionally been given a specific role - like the A4 letterhead. Websites on the other hand - because of demand, distribution, availability and opportunity – are force to work without such bounds.

How do we design with no knowledge of space?

Most website owners, designers, and developers don’t do much to combat these viewing needs. We just design for what statistics tells us is the most commonly used screen resolution. At a rough guide this tends to be around 1000 pixels wide. It’s not just the unknown screen size that’s an issue. The web browser has the responsibility of providing windows, scrollbars, zoom tools and touch controls to make the website usable on any particular device. Different devices have different web browsers.

It’s a two way system. We design websites by trying to guess what screens and devices will be displaying them. And the browsers on those devices are built to accommodate the variety of web designs within the confines of its screen. What sits in the middle of this is web standards and good design principles. Providing both sides get these two things right the website design will have the best chance of working.

It gets more complicated when you realise that a website (be it 1000 pixels wide) on one 17" laptop screen is not necessarily the same "size" as a website on a different 17" laptop. That’s because a pixel on its own has no relative physical size in the real world. A pixel is simply a light source. A computer screen is an arrangement of pixels in a grid. We call this number of pixels the "resolution".

A 17" Mac Book has a resolution of 1920x1200, that’s 133 PPI (pixels per inch). The Sony Vaio E 17" Laptop has a resolution of 1920×1080 at 129 PPI. Though the difference is fairly small, you can see that even two widescreen 17" laptops will show the same website at varying sizes. The difference becomes a lot more noticeable when the resolution is changed from the native maximum resolution of the display.

The latest iPhone 3GS has a 3.5" screen with a 480x320 resolution, that’s 164 PPI. You can see that even if we know the physical size of a screen in inches we still don’t know exactly how a 1000 pixel wide website will be displayed. It depends on the resolution and width/height aspect ratio (screen sizes are measured diagonally). Just today the iPhone 4 was released with an incredible 326 PPI display. That's twice the number of pixels within the same physical space.

We design a website around what is considered the current "average" resolution. This use to be a fairly easy and safe estimate, and for a while it seemed like screens and websites were only getting bigger respectively. Then laptops came along which tend to be far smaller than a desktop screen but actually have a denser pixel arrangement – meaning websites still fit on the screen. The newest generation of screens are the smart phone market like the iPhone, BlackBerry and Nexus One. They are even smaller, but yet again increase the pixel density. They’ve also introduced a completely new touch-screen mechanic for website browsing.

A popular but flawed web design technique several years ago was to "force" a particular size of browser by using JavaScript to take over and resize the window. This ensured that the website was always seen at the "right size". Nowadays a device like the iPhone completely breaks this concept. That’s one reason why it’s important to follow web standards because when new web browsing devices come along we’ve done our best to ensure backwards compatibility.

Recent Google announced Google TV (bringing the Internet and websites to TV sets). This isn’t a new concept but it’s likely to be a lot more successful with modern technology. Take for example a 50" HD TV. This is a lot larger (physically) than the 17" laptop discussed earlier. A full HD TV means a resolution of 1080 pixels in height. At widescreen (16:9 aspect ratio) that is a resolution of 1920 x 1080. That’s exactly the same amount of pixel "space" as the 17" laptops. The pixels are just further apart (only 44 PPI). So with Google TV a 1000 pixel wide website will fill exactly the same amount of screen space on a 50" TV as it will on a 17" laptop. Even on the new iPhone 4 with a resolution of 960x640 our website will nearly fit horizontal (of course we'll need to zoom to read text).

So to answer the original question

A websites size is whatever the visiting device needs it to be for its screen. Websites will be scaled and displayed at hundreds of different sizes, and the device it’s being viewed on will handle presentation to maximise usability.

This is why asking for a website to be designed so that "it doesn’t scroll" is not only impossible, but it's also an incredibly bad idea because you’re trying to take away a device specific accessibility technique – the one that is certainly the oldest and most commonly used technique for displaying a website. It's best to design for the average resolution unless you're specifically targeting a certain device (like a mobile phone).

Rather than trying to design a website that "fits" into all possible screens, we should be designing (and developing) websites in a way that devices can understand how to display them to the user. After all, we don’t know what screens we’ll be dealing with in the future but the devices that own them will certainly know how to deal with our website.

A website is not an A4 piece of paper.

In the short term it may be profitable to develop two different websites (for both desktops and mobile devices) by trying to detect the screen size and serving up the two options. If that is the case it’s still important to remember that the web is continuing to move towards becoming more and more device independent. Trying to serve two variations of a website is a short-term solution because we cannot predict how they will look in the future.

If we follow web standards, accessibility guidelines, and general good design principles we can be a lot more confident that future devices will know how to display our website.