|
By Eddy R.
10-18-00
Ever since the Internet, and therefore the Web were introduced,
Web builders had to deal with one major issue when developing web
sites: How to design a web site that suits an audience's viewing
needs. This may not seem to be much of a problem at first, however
if one takes into account that people run their systems at different
resolutions, the importance of dealing with this issue becomes apparent.
Enter Liquid Design
Liquid Design refers to developing web pages that can scale at
different resolutions and window sizes.
Developing Liquid web sites isn't difficult, however there
are many things that one must consider and keep in mind before implementing
this kind of design. For example: Will the design of the web page
remain constant as the page scales at different resolutions? Also,
gifs do not scale but text does - how will this affect appearance
of a Liquid web page? In other words, one must develop a
web site that "works" at different resolutions before
implementing a "Liquid Design".
Want an example of a web site where the Liquid Design has been
implemented? Look no further, you are already looking at one! Yes,
Webbuilder101.com has a Liquid Design but how can you tell
whether the design is liquid or not? Simply resize your browser
window and watch as the web page scales to match the new window
size. (Minimize and maximize your browser window to see the effect).
How to implement the Liquid Design
To create Liquid web pages one has to use a combination
of both relative and fixed table sizes - percentages and pixels
respectively. For example, look at the HTML below and pay attention
to the tag attribute Width.
<table width="70%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="200" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
As you can see, the first line of code contains a tag with the
width attribute set at 70 percent and the fourth line of
code has a width attribute set at 200 pixels.
Remember: Creating the HTML that makes Liquid pages possible is
easy, it's making the design work what's difficult.
|
