How to make that this webpage
shows similar in all this 800x600, 1024x768...1400x1050 resoultions?
Good web pages do indeed look similar at all resolutions, but it's
important to have the right meaning of "similar". It's about the number
of characters a particular user wants to see, not about counting pixels.
Imagine a user, with a monitor. Their eyes can see text of a certain
size, the image remains the same size, and the web designer wants to
present text to them ideally in lines of 15 words (usability studies
show that this is about the best for readng long blocks of text). Now
imagine that tehy have a number of computers, of different display
resolutions, all connected to this monitor through a switch.
When they switch displays. the number of pixels varies. The size of
letters, and ideally the number of letters across the browser window
width too, should _not_ vary. This gives the user the best possible
experience of consistent browsing.
Now imagine another user, logging into these same computers. They have
poor eyesight, so they adjust teh default text size in their browser(s)
to be bigger. This users should now see bigger physical letters which
they're able to read in comfort. Again it should remain consistent as
they swap display resolutions.
Another user also has a multi-display monitor switch, but their is
bigger and they like to work with many windows open at once. We don't
know what size text they prefer, but we do know that the ideal number of
words on a line is about the same. As they re-size their browser
windows (having also adjusted ther favourite text size) the web page
should ideally keep the line length roughly the same in terms of
character sizes, not in terms of pixel counting.
How do we do this? Well the surprise is that it's all very easy - just
set your widths in the "em" unit, not in pixels. CSS does the rest for
you. It's also a good practice to _avoid_ setting widths whenever you
can. Setting margins and letting the browser control overall size
generally works out far better than trying to set the absolute width of
some element in the middle.
This is particularly important when working with heights. Avoid setting
heights: set margins or padding, then let the browser fill the space and
stretch the canvas as far as it needs to.
Font sizes are best left unset, allowing the defaults to take effect. If
you do set them, body text goes at 1em / 100% with no exceptions! Do NOT
set them in pixels, points or mm.
If you _wish_ to, set the maximum width of your overall "content" (the
text block where the main part of the site content sits). Do this only
once, do it in ems, and allow for some padding inside this. This keeps
line widths constrained to the usability limit and avoids awkwardly
long lines.
Don't set the widths of nested elements. Set one, maybe set margins, let
the others work it out from their parents or children.
Where there are siblings (i.e. columns), set the width of _some_ of
these columns, but not all. Maybe set left and right columns (menus,
teasers and banner ads) to 20em each and let the centre fill out as it
can best do. Maybe also contrain the centre with max-width, as
described, but otherwise let it float to fill in the gap.
When an element contains images, these are inherently pixel-sized, not
character-sized. So here you might well set a rigid width, and do it in
pixels. This can get awkward if there are sibling columsn sized in ems,
and the users vary their window width a lot. Consider avoiding the
problem altogether by using a wider column altogether, sized in ems, and
floating the images inside this, allowing text to flow past them. it
can look a lot more fluid this way when re-sizing.
Whenever you design _anything_. use a crude HTML / CSS prototype to
display the overall sizing you've created. Watch its behaviour as you
re-size windows and adjust font sizes. You don't have to be perfect
allthe time, you don't even have to be perfect at one particular size,
you certainly can't avoid the layout breaking totally at some widths -
but you should watch and see how extreme these limiting widths are, and
make sure they're out of the likely range to encounter.
