Sometimes when I'm working on a website, I'll be halfway through coding the interface when the client suddenly says something like “there's a gap between my site and the edge of the screen” or “So, my site will stretch to fit the whole screen won't it?” or even the dreaded “can you make it so that it doesn't scroll?”. This is generally followed by a bit of a pause, a (very small) sigh and an attempt to explain the dilemmas of website design over the phone and without the use of visual aids.
So, here is my chance to make a better job of explaining this, structure my arguments, include diagrams and my workings out and even go into a bit more detail and history. It's all really very dull, but somebody has to do it!
Too Many Devices
Designing websites is different to designing just about anything else. It's one of the few fields where people have such a choice over how they see the end product. Imagine, you can use different kinds of computers – mac, pc, linux, web TV, handheld. You also have a choice of different browsers – what's a browser you ask “I thought that was me, I'm the one doing the browsing”. A web browser is the programme that you use to look at web pages, it's what opens up when you click on “The Internet” on your desktop. That opens the web browser called “Internet Explorer”, you could have version 5, 6 or 7 on your computer depending on how old your computer is and whether you have downloaded the latest updates from Microsoft. Versions 5,6 and 7 behave in slightly different ways which make my job very fiddly, but that's a different story!
But then you might not be using Internet Explorer (or IE as we in the trade know it), you could be using Opera, Safari (particularly on a Mac) or my own personal favourite, Firefox. Again you could be using one of several versions of these programs, all with it's own slightly different ways of interpreting web pages.
So, hang on, why are all these browsers different? Isn't there a “right” way to display a web page, aren't there standards in place to to sort this kind of thing out? Why don't we all just stick to the standards and end this madness! To answer that, let's have a look at how the world wide web began...
In the Beginning
Many years ago in a galaxy far, far away, Tim Berners-Lee invented the web to let academics share research papers with other universities around the world. Web pages and the system for making them were designed to accommodate scientific papers, they had titles, headings, paragraphs, tables and not a lot else. Images were added later. This was great for sharing dry scientific papers but not so good for more exciting, visual content. The web was far too amazingly useful to be just the domain of a load of corduroyed beardies though and eventually ordinary people started to get their hands on it and use it for other things. They had to shoehorn the ideas that they had into the straight jacket of a scientific document – and that was how the web as we know it began. There were no standards, no rules, no books on 'how to make web pages', it was the wild frontier. If something worked, it was in.
We spent a lot of time reversing the polarity of the dilithium crystals and piggy backing on the transporter beam... (And I guess quite a bit of time watching Star Trek) but we somehow managed to make things work. The people who made browsers saw what was happening and they tried to make the browsers do useful things without all the hacks and workarounds, designers responded by abusing the new bits do do even more stuff. Duct tape and inspiration. Long hours and lots of coffee.
And that's pretty much the position we have today, browser makers are still catching up with what is happening in the real world and standards bodies are about 3 years behind that. The web has a lot of old content that doesn't conform to standards and new browsers have to try and handle those as well as the brand new up to the minute features. You can't force the internet to change because a lot of it is already built, while browsers still handle this type of content people continue to make it.
Different computers, different browsers, different monitors. When I started designing and building web sites, most people used 15 inch monitors with a maximum resolution of 800 x 600 pixels. The size in inches is not really as important as the number of pixels being displayed. On a computer screen everything is measured in pixels which are like the dots on a TV screen, but you can change the size of the dots according to your own preferences. The more pixels you have, the smaller things like menus and icons will be, the fewer pixels, the larger.
You can have a 42 inch monitor but if you have it set to 800 x 600, then icons will look pretty big. The same monitor set to a resolution of 1600 x 1200 would get twice as much on it because everything would be half the size.
Nowadays a standard laptop would probably have a resolution of 1024 x 768 and be about 17 inches. The monitor I am using to type this is 19 inches, widescreen and has a resolution of 1680 x 1050. If you right click on your desktop and go to “properties” then select the “settings” tab you should get a slider offering different screen resolutions. This can mess up the icons on your desktop though if you make the numbers any smaller. Modern “flat screen” monitors are designed to use one particular screen resolution and might look fuzzy if you aren't using the right one.
The browser itself has lots of bits of its own that take up space on the screen, the buttons, tabs and address bar at the top and maybe a status bar at the bottom. Browsers also have scroll bars on the right hand side and a bit of window frame on the left. Also, different computer operating systems have different amounts of stuff using bits of the screen, for example windows has a taskbar that can be set to different heights. So really, the best we can do is to generalise and say that there is a safe area of about 980 pixels wide by 550 pixels deep that most people *should* be able to see OK. Unless they have the browser window smaller than the screen or they are using a handheld. Or a smartphone.
The analogy I always use is a broadsheet newspaper I think the Guardian and the Telegraph are still hanging on to this format, the page is quite long but then it's folded in two horizontally. All of the important stuff is stuck at the top - “above the fold” and it's trying to get you to buy the paper. If you are interested you can buy it, open it up and scroll down. It's just the same with web sites, you have to grab them and sell them your site to get them to scroll down or click on something.
Stretchy Versus Static
But to get back to the original point, why is there a gap between the content of my site and the edge of the window? Why doesn't my site stretch to fit the full screen?
We've seen the large difference in sizes between different screen resolutions. Now lets imagine that a site expands to fill the screen. Unfortunately across all of the browsers there is not a good way saying “make the site wider up to a certain size and then stop” so we are left with just filling the screen. If it's a 3 column site we can expand all of the columns proportionally or fix the size of the side columns.
The middle column expands to either 800 or 1120 pixels depending on whether or not it is the only column to change size. Images and elements made of images like buttons and ad banners don't resize, they are made of pixels and so have fixed pixel sizes. Sidebars are very often fixed by the size of graphic elements they contain.
The end result is that the main content column becomes very wide and it starts to get uncomfortable to read the text. Every time you move to a new line your eye has a long way to track back and it's easy to lose your place. It's difficult to get people to read things on screen at the best of times, so it's important not to make it any more difficult for them.
And that in a nutshell is how we have ended up with the convention of a 3 column fixed size website. The 3 column 960 pixel width site works and works well. There are attempts being made to update things and create more intelligent solutions but they all struggle with being backwardly compatible with the 25% of users still on Internet Explorer 6. Sites need to work well for all visitors, not just the ones with the latest equipment and the biggest screens. Of course, if you have the money we could always detect the browser, operating system and screen size and feed them the appropriate code, but that does become an expensive option. We think you would rather spend the money on something a bit more likely to help your business make more money – like maybe Search Engine Optimisation for example...