How do you determine page layout?
This website best viewed at 1024x768 using
Microsoft Internet Explorer with a medium text size setting on your
browser. Ever wonder why people put that on their websites?
That's what we're going to talk about now.
Think of
designing a website as you would designing a house. A house plan
should include spacious rooms to stuff with furniture, wall space to
clutter with art work, and windows for viewing the landscape
outside. The house
dimensions must fit on a building lot of fixed size and within the
predefined easements and building set-back lines. Plumbing,
electrical, AC/heating has to be hidden in the walls.
Similarly, each element of a website design --
the visual elements and text a website visitor sees and the coding
essential to operation seen by search engines -- has to be
included in a website design plan. Let's talk about the real estate
first.
Size Matters. Like sizing a house plan to fit
a specific building lot, a website has to be sized to fit the width
and height of a monitor screen. The question is -- what monitor
should it fit? A 15-inch home monitor? A 17- or 19-inch office
monitor? A 21-inch or larger monitor? Web TV? One of those hand-held
devices?
To answer that question, you will have to decide who
the targeted viewers will be and what it is you want to tell those
website visitors. What you're going to tell them will be a large
part of the design
decision process -- the more you have to say, the more space you
will need. Who you expect to be telling, is another part of the
equation. If you're going for the home-viewing market, you probably
should size for the small to mid-size monitor; if you're going for a
business market, you might size for larger monitors.
Georgia Tech reports that 25.50% of computer
users have a 14-inch monitor, 24.97% have a 15-inch monitor, and
22.77% have a 16- to 18-inch monitor. Laptops accounted for 5.7% of
computer users. So, different viewers will be looking at the website
on different sized screens.
If you access the Internet from more than one
computer, you already know that websites tend to look different on
different monitor screens. Some of that is due to the size of the
monitor, some of that is due to the color card used by that computer
and monitor, and some of it is due to the settings on those
monitors. In addition, if you use more than one browser -- say
Microsoft Explorer and Netscape and Firefox -- you already know that
websites look different with different browsers on the same monitor
because each browser interprets the underlying HTML code
differently.
Let's talk about monitor settings a moment:
If you click the "Start" button on the bottom left side of
your screen, you will get several options. Click on
"Settings" and you will see an array of things you can
choose to change. One of them is "Active Desktop." Click
on Active Desktop and you will be allowed to "Customize."
One more click on "Settings" inside Customize and you'll
be presented with options for viewing size. Typical options are
640x480 (pixel width by height), 720x480, 800x600, 848x680, and
1024x768. If you have a newer computer, you may also have other
lager options for the newer larger monitors.
If you want to experiment, change the settings on
your computer and look at several websites with different settings.
You'll quickly see that a website like ours fills the screen on a
640 setting and is surrounded by a lot of empty space (background)
at a 1024 setting. If you've looking at a website built for a 1024
width on a 640 setting, you will have to scroll sideways to view all
the page.
Interesting you say, but you're the web
designer. How will you make my website look good on all monitors
using all browsers?
Not easy, we answer, but we can design it so it
doesn't look bad on most monitors. Here are your options:
The first is to size the design using percentages of
screen width. If you want the main portion of the design to fit the
entire screen no matter the size of the monitor or the setting, then
you set the page for 100% and center the content within a portion of
that width. If the content is within the middle 80% of that 100% of
the screen page, you'll see 10% background on either side of the
content.
Using percentages solves the "one size needs to
fit all" problem, but it can create another set of problems.
Images are generally a fixed size and the resolution is optimized
for that size. If your website uses a lot of pictures and you want
them to be seen in a certain position, then you'll need a
fixed-width design.
Text is generally "sized" as well. It
reads better if the font size is bigger than 8 points but smaller
than 14 points; it reads better if a "computer" type face
is used rather than a manuscript or a book type face; it reads
better if the column width isn't too wide or too narrow. The amount
of text you're trying to put on a page will, to a certain extent,
determine the page width. If you have a lot of text that you want
"above
the fold," you'll need a wider layout than if you have just
a little text.
We take all that into consideration when setting up
our style sheet parameters so that a fixed amount of text will take
up a fixed amount of space. Obviously, 80% of 1024 is a bigger than
80% of 640. That's the major problem in using a
"percentage" kind of design. The text and the images may
not always be where you expect them to be. A visitor looking at the
site with a 640 setting will see the same elements a visitor using a
1024 sees, but the effect and viewing pleasure will be substantially
different.
The second approach is to fix the size of each
element of the design. That's the approach we use most often. If the
website is a business to business website and we expect the viewers
to be using the latest and biggest in monitors, we size things for
best viewing on 1024 or larger monitors. If we expect the majority
of viewers to be looking at the website on an older and smaller home
monitor, we might size it as small as 640.
If we think the visitors will be mixed office and
home visitors, or they will be viewing the site on different
monitors (office, home, and laptop) during the course of their 24/7
workday, we usually design for the mid-point of the range, typically
for a 800x600 screen. Then we use a smaller area for the most
important content, placed so that it will be viewable without
sideways scrolling on a 640x480 setting. We also try to put the most
important information "above the
fold" to reduce the downward scrolling.
That said, we think you'll find our website much
easier to view and navigate if you set your monitor for 800x600 or
greater and your browser font size for medium. Even at a 1024x768
setting, the text will come across readable, but not too small. The
images will be crisp. At a 640 setting, everything will appear a
little too large. And, at a 1024 setting, you'll be able to catch
the vast majority of other websites in the format the designer
intended. Some may have a huge amount of background around them
because they were designed for smaller monitors. Some will have a
little; others will have none.
We've discussed some aspects of sizing above, both
the percentage and the fixed approach. Now, let's talk about the two
ways to do web page design -- custom
versus template.
Email info@oakridgewebdesigns.com
if you have questions on this topic.
Size matters in web
page layout