WINDOW
SIZES ARTICLE, PAGE 5
And finally, some solutions
Solution One: One of the very best is the flexible pages
technique (with tables, CSS-P, or frames). This allows
you to "fill the page" at literally any browser window
size. But it isn't necessarily the perfect answer in all situations.
Unless done carefully, these pages can have very long lines of
text and be hard to read. And with some designs, it is just plain
difficult to make it so that the content looks good even across
just the most common range of window sizes. One common problem
is having enough content to fill a large window horizontally, while
not having way too much content when the window size is smaller.
However, done well, these types of pages represent a solution
to our problem which is just about ideal. If you've never learned
at least one of these techniques, I highly recommend that you do.
There are several excellent free tutorials on this subject available
on the web:
James Shook's Flexible Tables Tutorial
http://www.jshook.com/flexible_pages
MaKo's CSS Positioning Tutorial
http://www.mako4css.com/Tutorial.htm
MaKo's tutorial site itself is a good example of a flexible CSS-P
site. CSS-P provides what is probably the ideal solution to this
problem: a way of separating structure and content, while also
allowing the structure to be a "liquid" one.
Solution Two: Fixed-width table pages can work well too,
but building them requires some care. Using a fixed width gives
you the clear advantage of being able to specify to a much larger
extent how and where your page content will display. It's also
much easier to avoid the usability issue of too-long-lines-of-text.
Of course, they have the drawback of appearing the wrong size when
the browser window is considerably bigger or smaller than your
chosen width. However, there are some techniques which make these
sites much more palatable in larger and smaller windows.
When using tables with this method, you put all of the page content
in a single table with its width defined in pixels - or in a stack
of tables with the same pixel-width. I suggest a width of about
700-750 pixels; this will look ideal for the large majority of
users, at least at this time. Center all of these outer tables
to avoid
"little site in the upper-left syndrome". Nest tables
within these tables as necessary.
At higher resolutions, you'll begin to have "skinny little
site in the middle syndrome", but there's a technique that
helps with that. Simply don't use clear borders around your page
content. Leave the page edges un-bordered, and allow the
content to fill the tables in such a way that their edges are not
clearly defined. An example of this "uneven border"
technique can be seen at www.caseyinsuranceservices.com*.
This page, while a fixed width, doesn't look noticeably "skinny"
even with the browser window at 1,024 or 1,280 pixels wide.
There are other ways to deal with the issue of varying browser
window widths; I've simply named my personal favorites. And there
are certainly other ways to look at this issue. As long as we web
developers don't act like ostriches, and at least take this issue
seriously, we'll be on the right track. |
