Question: My Site Doesn't Look As Good In A Smaller Window

Doug,

I designed a site for our fire company using Frontpage. When you open the pages in a browser that is not maximized the layout changes, it wraps the text to the next line, moves the pictures, etc. Is there a code I can add to stop this. The site is www.Plymouthfireco.com. I have compensated for this on most of the pages by writing from the left side and only going halfway across. Check out the incidents page, that will show you the best example.

Thanks

Answer

Hi,

I'm going to first comment on something you didn't ask me about (I hope that's okay). I went to your "Incidents" page, and was greeted by a rather loud noise (siren? dispatch radio? pager?). Anyway, stuff like that is fun to do (nearly gave me a heart attack! ), but you should also consider the scenarios in which people will be viewing your site. Sooner or later you'll have students in a school classroom, or people in a business office accessing your site, and the noise could end up being disruptive to a school/business situation.


Just something to consider. I might make the sound a tad quieter!

Okay, now to your real question.

The answer I'm going to give you is one that not everyone will agree with, so you might want to get a second opinion! I looked at the source code for your page, and I found this line of code:

<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#000066" width="97%" id="AutoNumber1" height="40">

I'm not sure how well you understand HTML coding (Front Page can save you a lot of trouble by hiding the actual code from you) but I want you to notice there's a piece of code there that says: width="97%". That essentially means "Find out how wide the web browser is, and make my page stretch out to 97% of that width". That is actually "recommended" practice, even though it results in the width of the page changing, along with your layout, text wrapping, etc. whenever the user resizes his web browser.

Why is it recommended? The rationale is that each user knows what is a comfortable viewing width for him or her personally, and so we should let the viewer decide how wide he wants the display to be.

There is another way to do it, however. You can change that line to something like: width="750px". What does that mean? It means that the width of your page will always be 750 pixels, no matter what the user does with his web browser size. If the user resizes the web browser to less than 750 pixels, they will see a horizontal scroll bar at the bottom of the page, and the content of the page will go off the edge of the screen.

In theory, this is not recommended practice, but practically speaking, I've done it on almost every web site I've designed. 750 pixels seems to be a safe width; I haven't run into any browsers that can't handle that many pixels across. The last thing you want is to have a situation where it is impossible to view the entire width of your page, so I wouldn't recommend going any wider than 750 pixels.

Consider what happens when a visitor views your page as it is right now, and he has a small window to view in. He looks at your site and says "There's something wrong with this site", and he leaves.

On the other hand, if you've specified an absolute width, the visitor sees that the layout looks nice, and he says "There's something wrong with my browser" and maximizes it so he can see your whole site.

One method makes your site look bad, the other makes the visitor's web browser look bad. To me it's a no-brainer which option I'll choose!

Added Note By Doug:
If you visit the Plymouth Fire Company page and click the "incidents" link, hoping to hear the sound I referred to in my answer...it's no longer there. It has been moved to the home page, and no longer plays automatically: it's a link titled "To hear our tones click here".

For the curious, the webmaster explains: By the way that was a tone specific to our station on our incidents page, that’s how we know we have a call.