Liquid 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 this 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.
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.
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.
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.
According to design style, web sites fall into three categories:
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.
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.
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.