Menu
Liquid Design – A Step Forward To Make Your Website Accessible
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.
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 – 1024×768 or even higher. People who access the Internet from universities or educational institutes are likely to use older computers and may use 480×640 or 600×800 resolutions.
Recent statistics show that most people use 1024×768 resolutions (nearly 44%) and 600×800 resolutions (50%). Until recently, the number of those who used 1024×768 resolutions was much lower, while 480×640 resolution was the preferred resolution by users. As technology evolves, the percentages change. Nowadays, web designers have started designing for the 600×800 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 600×800 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 600×800 resolution the web designer should in fact design for 409×741 (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 [URL=http://www.dangsoftsolutions.com/innerpage/webdesigning.html]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.
[URL=http://www.dangsoftsolutions.com]website designer and PHP web development Dangsoftsolutions