Universal Web Design ... Liquid Web Design
Liquid web design is used in order to make web sites more accessible
and user-friendly. Among the many problems web designers often encounter,
one in particular is the accessibility issue.
As we mentioned before in other articles, accessibility determines
in what degree a site is accessible to its users. Web sites
should be universally accessible disregarding the tools people use
to view them. One must take in consideration culture, language,
disabilities as well as technical details like width of design -
hence, the idea of liquid design. Creating an universally accessible
website is nearly impossible to achieve. However, there are
small things webmasters and web designers can do to get closer to
creating accessible sites.
What is 'liquid design'
As users, we often see the monitor screen as a square box which
displays information, images etc. We perceive it as a fixed medium,
at standard resolution, which never changes. For web designers the
monitor screen does not have fixed width or height because these
variables change, at times in unpredictable ways. People might have
larger buttons, toolbars such as Yahoo or Google, they open the
Favorites page on the left, they have a double task bar and so on.
Therefore the width and height of the screen is different from
user to user.
Liquid design means that the web site adapts itself to the
available space, the same way water takes the shape of the glass
it is in.
Importance of 'liquid design' in creating accessible web design
The goal of liquid design is providing similar experience to
people and eliminate possible irritating design flaws such as
too much white space, disappearance of certain sectors of information
due to lack of space etc. If you decide liquid design is suitable
for your web site, here is a simple way to do it.
Resolution statistics and interpretation
A web designer's task is to predict the available space the web
site can use to display. One must consider first of all what the
web site's target audience is. For example, people who work
with computers every day (programmers, other designers etc) often
like to have a "bigger picture" of things hence they are more likely
to have high resolutions - 1024x768 or even higher. People who access
the Internet from universities or educational institutes are likely
to use older computers and may use 480x640 or 600x800 resolutions.
Recent statistics show that most people use 1024x768 resolutions
(nearly 44%) and 600x800 resolutions (50%). Until recently, the
number of those who used 1024x768 resolutions was much lower, while
480x640 resolution was the preferred resolution by users. As technology
evolves, the percentages change. Nowadays, web designers have started
designing for the 600x800 and above.
The effective screen space is smaller than the actual number
of pixels (e.g. width of 800 pixels and height of 600 pixels
for 600x800 resolutions). The reason is that people use up space
by adding toolbars and different additional buttons to their browser
window. For example, when designing for a 600x800 resolution the
web designer should in fact design for 409x741 (width of 741 pixels
and height of 409 pixels) although this is not fail-proof for every
situation.
Ice sites, Jelly sites and Liquid sites
According to design style, web sites fall into three categories:
- Ice web sites: are very rigid sites. The box that holds
the content is fixed to the left. On higher resolutions appears
a blank space stripe on the right causing a lack of equilibrium
in the design.
- Jelly web sites: are the middle solution between rigid
and flexible. The box holding the content is centered at any resolution
thus preserving equilibrium, while still not using up all of the
available space.
- Liquid web sites: are the utopia of flexibility, a site
with no constraints whatsoever. Liquid sites expand or shrink
to the available space on the screen monitor, no matter what browser
window size or resolution the user might be using.
Is liquid design adequate for any web site?
In order to make a decision whether liquid design is suitable for
a web site, factors such as type of content, structure,
amount of information must be taken in consideration. Liquid
design is ideal for sites with a lot of information. The elasticity
of such sites increases readability.
Practical method of implementing liquid design
Unfortunately, in order make liquid web sites, you must think
the layout around the concept of elasticity.
If you're using tables the way to make them liquid is to specify
the width in percentages (e.g. 100%). Hence the copy inside the
table will expand along with it.
The problem arises when the content of the table cell is graphics.
It is difficult, but not impossible to apply liquid design to graphical
sites. When creating the graphics bear in mind that they have to
"stretch". The way to achieve that is to create a section of graphics
that, if repeated (either horizontally or vertically) it can still
give the impression of continuos and unified design. Once
you've done that, you will use the respective section as background
of the table.
Take this very site for example. You will notice that the header
at the top expands in the middle until it fills the entire screen,
no matter the resolution. That is liquid design. What we
did was to create the impression of continuity by repeating the
background over and over again until we achieved the desired effect.
One last tip for web designers
You must make sure text lines aren't too long and hard to
read. You should test this by trying to read the text yourself.
If you encounter difficulties while reading then try to shorten
the lines. One way to achieve this and still use liquid design is
to make tables 90% wide or less and also include columns in your
website's layout.
« Back to Articles
|
