Browser Compatibility: Intro & Display Size

If you're reading this article, it's probably because you've stumbled across the dark, tangled labyrinth of a web developer's existence -- different browser issues waiting to trip you up at every turn. What looks great on your system and browser may not look so great on someone else's. With technology constantly evolving and browser makers who are decidedly inconsistent about interpreting HTML, your web site may need to go through some changes to get it looking about the same for the majority of users.

First, a quick look at browser and display stats shows that:

• Internet Explorer 5 and 6 are pretty evenly divided - 47% for IE5 and 43% for IE6.
• People are still using Netscape 4 (2%) and a few use other Netscape-compatible browsers (for version 6, less than 1%). (Note that AOL will probably soon use/bundle Netscape as its browser, and the number of people using Netscape will jump up.)
• 49% of users are at 800x600 resolution. 45% of users are at 1024x768 or more. About 2% are still at 640x800 resolution.
• Then, there's always the 4% of "unknown" or "other" people.

The first lesson to take away from this is that you can't please everyone. The second lesson is that if you can get your site looking decent in an 800x600 browser window in Internet Explorer 5, IE 6, Netscape 4, and Netscape 6 and 7, you can pretty much sit back and relax. It's just getting to that point that's the hard part...

Display Size

We've already established that it's reasonable and safe to create your web page so that people with 800x600 browsers can view without scrolling horizontally. FrontPage's "Preview in Browser" command has some pretty handy options of sizing the browser window to different sizes. By going to File > Preview in Browser you can choose which browser you want to view it in (you'll have to add additional browsers and versions on your own), and what window size you want to preview at.

Now, keep in mind that you don't really have 800 horizontal pixels to work with. Remember that the browser window usually has a scrollbar on the right for longer pages. Also, part of the 600 vertical pixels is filled up by toolbars, menubars, and possibly the bottom task bar on PCs. So your canvas size will really look more like:

Usually your web page will "grow" vertically, so the height of the canvas only impacts what information you want your user to first see.

A great article about how much canvas size you have for different browsers already exists at webmonkey.com, so we'll spare you the details and give you the summary:

Display size recommendations:
Maximum width: 748 (no scrollbar: 759)
First screen height: 410

What does this mean for you?

• If you use a monitor with a view bigger than 800x600, be sensitive.
  What fits on your window may not fit on someone else's window that is sized at 800x600. Use FrontPage's Preview in Browser feature to make sure that your page works at that size.
• Beware of pictures that are too wide.
  A common mistake of new web developers is to throw in photographs or other images into their web page that are way too big for the page. If you already have a table structure with various columns in the page, putting a picture that is too big for the page will force the page wider even more. Be sure to keep your pictures small enough so that your web page will "size down" to 748 if necessary.
• Beware of dragging on table lines too wide.
  Similarly, it's easy to drag on table lines to make your page structure look the way you want it too... but then freeze your page at a width that doesn't work for smaller screens.

Next: Consistent Page Margins