What is a fluid web page?
In the simplest sense, a fluid web page is one that adapts itself
depending
on the resolution that's set on the viewers computer.
From a design perspective (and also a marketing perspective),
the aim is to create a page that looks good to all end users regardless of the type of computer
they are using.
The art of a fluid web page is in the layout. You don't really need to know
exactly how this is acheived but the following information may help you to understand why your
final product looks the way it does.
It may also provide you with information that may help you to decide
on whether to choose to have your website fixed width or fluid.
|
| |
Web pages are not the same as printed pages
Unlike the printed page, you do not have quite the same degree of control over
the layout when it comes to web pages. There are many reasons why this is so.
The most important reasons why a designer has less control over the
way the final product looks are:
1.
people have different sized computer screens (or resolutions); 2.
they use differnt sized fonts; and 3.
people use different "web browsers" - and the different browser
do not all render pages in the same way. |
| |
Screen resolution
Computer screens are not all the same size. Also, people have their screens
set to different resolutions and font size (the size of the text). This is most apparent when
you buy a new computer - you can suddenly see a lot more on the screen. When you
buy a new computer it usually has the latest and greatest screen resolution. The words get smaller
but more fits on the screen.
The most common variations of screen resolution are:
|
| Width |
|
Height |
|
| 640 |
by |
480 |
(although this is becoming rarer) |
| 800 |
by |
600 |
|
| 1024 |
by |
768 |
|
|
|
These are shown to scale (unless you have your font size set very large
- a good example of the resolution challenge!) in the following diagram.
|
|
|
|
Many websites are designed to exactly fit the dimensions of the middle of the three
sizes above (800 by 600). The reason for this is simply because, over the last few years,
this has been the most common resolution.
While this is still true now (ie. this is still a very popular size) the
problem is that on the smaller screens it is necessary to scroll left and right to see the
whole page. This is hardly 'the look' that was intended when the page was designed.
On larger screens the page looks a bit odd as it has a very large blank space
(usually on the right hand side). Even wider screen resolutions are now also becoming quite common making
these 800 wide screens look even odder.
|
| |
Not all web browsers are created equal
The other hurdle in the way of design is that fact that different web browser programs
display certain bits and pieces of the page differently to each other (or not at all).
Avoiding the non-display of some items is simply a matter of adequate testing (something
that not all designers undertake.
At bpresent we test your pages on the three most commonly used web browsers. Namely:
Netscape (Mozilla);
Opera;
Internet Explorer (IE). |
| |
The solution is a compromise
The solution is to make 'fluid pages'.
 A good example of bpresent's approach
is, not suprisingly, our web site.
We have attempted to make this site readable, and attractive,
on any variety of screen resolution and web browser. One of the most important techniques employed to achieve this is to allow
text to flow between lines as the screen changes size.
Also, you will note that the text flows around the image to the right and, on W3C compliant browsers
(such as Mozilla / Netscape),
the image grows and shrinks in size depending on the width of the browser window.
|
