Boxed Content Approach for Web Design

Introduction

Welcome to my first web development guide! The aim of this guide is to introduce you to what I call the ‘Boxed Content Approach’ to developing web pages. I don’t know if there is an official term for the technique I have developed over the years of building web sites, and although I taught myself this method without any references, I am, by far, no where near the first person to use it.

What is the ‘Boxed Content Approach’? Imagine if you will…

You have spent ages building a nice looking banner header for your web page. Its 800 pixels in width in order to fit on a screen resolution of 800x600, and you put it into your web page. You fire up your favorite browser and yes! You are over whelmed by a sense of accomplishment. You think hey ho, another job well done… until you switch your screen resolution from 800x600 to 1024x768. Oh Dear. What just happened? Your page content fills the entire width of the browser but the image no longer reaches across the entire width of your page. In fact its barely 3/4s the width and its broken your whole design. You take the plunge and switch your screen resolution up to 1280x1024 and disaster! Now it doesn't’t even fill half the screen width! For an example of this see the diagram below.

Non-Boxed Content Approach

Why is this? Well the content of a web page is dynamically sized to fill your browsers dimensions, and of course when you change your screen resolution your browsers dimensions will change as well because the browser will be resized to fill the new screen resolution. Most html objects are movable such as text and when you shrink a browser window the text moves so that it all fits in place. This isn't’t much of a problem. Most html elements such as tables and layers will also resize themselves when the browser is resized. However, Images don’t, and this is for a very valid reason – When you resize an image, you are stretching it and the pixels of that image will be stretched as well giving a very unpleasant and pixilated mess.

One possible workaround for this problem seems obvious – Create a number of different banners of different sizes for each available screen resolution, and then write a JavaScript function, which display whichever banner is appropriate for the current screen resolution. Sounds simple doesn't’t it? What most people fail to take into account when formulating this idea is:

Not everybody has JavaScript Enabled, so this would break the page on those peoples browsers
Not every browser reports what screen resolution is being used, so this would have the same effects as the previous point.
How many screen resolutions are there? A lot. 800x600, 1024x768 and 1280x1024 are just the everyday common screen resolutions. What about wide screen resolutions and the resolutions that are supports now by higher end monitors such as 2048xwhatever? That’s a lot of image work to be done – and it also takes up a lot of server space. Not to mention the length of the JavaScript function required!

Another common problem with building web page is when you have content that is wider than the page is and you get the dreaded horizontal scrollbars appear. This you really do not want and is a symbol of bad page design.

So what’s the answer to these horizontal sizing woes?

Welcome to the Boxed Content Approach.

The Boxed Content Approach

The boxed content approach as I call it, is a very simple method I discovered for ensuring that all of your page design will fit within a browser window, without horizontal scrollbars, on any screen resolution and will look exactly the same with the exception of blank spacing due to higher resolutions using smaller pixels.

As mentioned above, page content is automatically sized according to the browsers dimensions, where as image sizes are static and don’t support being dynamically resized without using browser scripting in someway. Even then, as mentioned, this leaves you with a very undesirable and unprofessional looking effect on your banner – that of pixellation.

The Boxed Content Approach does away with dynamic resizing and forces you to build content within a confined, static page width. The basics behind this is that you add a 1x1 table (a table with one column and one row for a total of one cell) to your page and assign it a static width of something like 780 pixels (so that it will work on resolutions down to 800x600), and then build all of your content in that table cell, ensuring that any images you place in it are no wider than 780px.

This effect can also be achieved by using a CSS DIV Layer if you have moved away from table-based layouts (and rightly so). The main Boxed Container can be aligned left, center or right. I always use center for preference.

Now using the Boxed Content Approach, your page would like this:

Boxed Content Approach

That looks much nicer doesn't it? Using this method you can guarantee that your page designs will work on any screen resolution that are viewed on. The only drawback people find with using this method is the loss of space down the sides of the main table, but that’s the price you pay for efficient design and it’s a worth while one as this kind of design not only looks more professional but it also gives you more flexibility with your page design as you can place things anywhere within the box and they will not move out of place regardless of screen resolution.

For examples of sites I have developed using the Boxed Content Approach, see the following list:

My Personal Web site – http://www.neutron2k.co.uk
My Girlfriends Web site – http://www.laurajerome.co.uk
Callout Computer Services – http://www.callout-computers.co.uk
Pace Electrical Services - http://www.paceelectricalservices.ltd.uk