Web Pages are a bit different than Word Processing or Desktop Publishing pages. When you use a Word Processor or you Desktop Publish a document, you determine ahead of time what the size the paper will be, what size margins you'll use, etc. You fix the pages to be a specific size and the reader of the document reads exactly what you produced.

With a Web Page, the viewer of your page can affect how big your page will be and what it will look like. It all depends on how big their browser window is. If they have a small screen or they have narrowed their browser's window, they may not see the entire width of your web page. They'll have to use scroll bars to see it all - not a good thing. If their screen is very large and they have maximized their browser's window, they may see a lot of "white space" on the right side of your pages - may not be a good thing. And you have no control over it!

Defining the Problem

Most web designers have had the same problem. The pro's have determined that they cannot control the size of the viewer's window. They have also determined that allowing the browser to re-arrange their professionally designed pages is not an option. Their clients have paid good money for the design of their pages and don't want a browser to blindly destroy their site's design integrity. They have also determined that there are only two ways to solve the problem. Design an entire site for each individual screen size they expect customers to have. Design one site for a specific size screen.

Solving the Problem

The pro's with unlimited budgets have gone with the first option. They have code on their pages that determines the current size of the browser window and sends the viewer to the nearest sized site. Remember, these people have created about five versions of their site for five different sized monitors.

The pro's with limited budgets (like all of us) use the second option. They design for a specific sized monitor. The question remaining is what size? It ends up that the most used monitor size today is 800 X 600 pixels. So, that's the size that they design for.

How Do I Do It?

You start by deciding to live with the fact that people with big screens will see blank space on the right side of your site. Remember, that is the big leap the pro's had to overcome as well. Secondly, you place your page elements on the page so that they don't go any further than about 780 pixels from the left side of the page. WebStudio can give you some help here.

If You are Starting a New Site

Go to the Site Properties dialog. On the first page of the dialog you'll see a section on Minimum Page Size. Enter 780 for the Width, and enter 600 for the Height. This tells the program the size page you want to have. However, you can put things outside of the 780 X 600 area and WebStudio will let you. You need to do one more thing to have WebStudio inform you. Click in the check box that says Automatically resize pages according to content. Make sure there is not a check in the box. What this will do is show you the 780 X 600 area with all space outside that area showing as white.

If you attempt to move an object into that space it disappears or is cut in half. You'll want to quickly undo any action that puts an object into the white zone. If you have a white background you won't see the white zone until you move an object into it. To make it more obvious you can add a light colored background to your pages to act as a page guide. Once you have finished your page, just right click on the background of the page and choose Remove Background..

If You are Modifying Your Existing Site?

You do exactly what was described previously, but you don't turn off the Automatically resize pages according to content check box. Make sure there is a check in the box. You then add a graphic to your page that you'll use as a guide to show if any objects fall outside your 780 X 600 area. Make the graphic narrow and make it deep. You can do this by using the selection handles in the middle of the top and side of the object. Then double click on the object to open the Properties dialog. Next click on the Lock Object Size check box and then type 780 into the Left field of the Position settings. This will set the left side of your object at the 780 mark. This can then be used as a visual guide to see if any of your present objects are out of the design space. If so, you'll have to move the objects and re-layout your page.

You'll want to do this for each of your pages. To simplify this copy and paste the guide object to each page. All you have to do is click on the guide object you added, choose Copy from the Edit menu, go each of your pages and choose Paste In Place from the Edit menu. That will place a copy of the graphic on each page in the same location it was on your initial page.