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
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...
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
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
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