Liquid Design and CSS layouts :

Liquid Design and CSS layouts :

Want to transform your standard layout websites into more accessible and user-friendly ones? Well, accessibility being a major issue encountered by web designers while working out their website designs, relentless research and continual monitoring should go into the creation of a website design that may lead to the path of increased accessibility. No matter what tools people use to view them, the bottomline is, websites should be universally accessible.

Liquid website design:

The use of “liquid design”, in this context, is worth mentioning. “Liquid design” websites were incorporated taking in consideration the culture, language, disabilities as well as technical details like width of design and more. Acquiring liquid website design and its technical nitty-gritty’s, webmasters and web designers today are getting closer to creating more accessible sites.

Now, let’s first make clear what “liquid design” really means. Internet users in general are accustomed to perceive the monitor screen, the square box displaying information and images, at a fixed medium, at a standard resolution. For web designers on the other hand, the height or width of the monitor screen act as variables. This is because they take into consideration the fact that the users might have larger buttons, toolbars such as Yahoo or Google, a double task bar and so on. It is here that the liquid design of a website comes to use, where the website is made flexible enough to adapt itself to the available space. The goal of such design is to eliminate the irritating design flaws like too much white space, disappearance of certain sectors of information due to lack of space etc. Every designer must know of the simple ways of using liquid design in case they such design is suitable for your website.

Remember, while incorporating such design, the designer must presume the available space the website can use to display itself, also keeping in mind its target audience. It has been noticed that while computer and IT professionals like programmers, designers are more likely to have 1024x768 or even higher resolutions, general Internet users, like the ones accessing Internet from universities or educational institutes are likely to use 480x640 or 600x800 resolutions. However, as technology evolves, the percentages change. Nowadays, web designers have started designing for the 600x800 and above. In spite of that, while the effective screen space is still smaller than the actual number of pixels (reason is that people use up space by adding toolbars and different additional buttons to their browser window), liquid website design has been a useful tool to increase the overall appeal of the site.

Website design experts have categorized websites into three distinct groups, keeping in tandem with the design styles. These are: Ice sites, Jelly sites and Liquid sites. While Ice sites happen to be extremely rigid, with the content space fixed to the left and a blank space stripe placed on the right causing a lack of equilibrium in the design, jelly web sites happen to be the middle solution between rigid and flexible, with the content centered at any resolution. On the other hand, liquid websites, without any constraints, are the utopia of flexibility, with the flexibility to expand or shrink to the available space on the screen monitor, irrespective of the browser window size or resolution. However, liquid design is not suitable for any and every website. In order to decide whether liquid design can be implemented to a site or not, it is important that the designer takes into consideration factors like type of content, structure, amount of information and so on. The elasticity of such sites increases their readability.

However, like all other design implementations, there are some practical methods of implementing liquid design too, woven around the concept of elasticity. In a way, this can curb the creative spirit of the designer. Moreover, it is difficult to apply liquid design to graphical sites. Here, the designer has to create a section of graphics that, if repeated (either horizontally or vertically), can still give the impression of continuous and unified design. Some designers attempt to create an impression of continuity by repeating the background over and over again until the desired effect is achieved. Some try to make tables 90% wide or less and also include columns in the website's layout in order to make it more readable and more easily accessible

Liquid CSS layouts:

A web designer having a basic understanding of the liquid design concept will be benefited to understand how CSS (Cascading style sheets) can work to the advantage of a site. While using CSS decreases the HTML/body text ratio, it increases the flexibility, accessibility and usability of the website. The process works remarkably on modern browsers and even some old ones (text-only browsers). However, there are few drawbacks of CSS, one being that a lot of time, patience and effort is required in order to make it compatible with old browsers. At the same time, one must grasp all the details of the process to make the liquid CSS layout perfect.

• Based on the concept of absolute positioning
• Every element of the site is perceived as a unique entity that can be placed anywhere on the page in relation to its   edges.
• While designing a page based on CSS, the web designer must see that the margins are set in relation to the edges   of the page.
• The stack order of the div boxes: Another important element of CSS web design. The margins must be can in such a   way so that the div box can be placed anywhere on the page. In the source code, the box can be placed anywhere.
• The stack order of the div boxes allow overlapping or preventing it, if necessary. By that, one can hide part of a div box   and place something on top instead.

Basic advantages of the CCS layouts compared to table layouts:

• CSS layouts are widely accepted and supported by modern browsers, allowing extreme flexibility in positioning
• They increase usability of the website by using liquid design
• They decrease the loading time of the websites by keeping the HTML/text ratio at a low level
• Most importantly, they allow the display of the main content, while the graphics load afterwards

All said and done, it is accepted now that the flexibility of CSS allows virtually any layout of a website to be easily created. Moreover, once done, the CSS layout even looks good, if not better than standard table layouts. Some feel that CSS layouts aren't as visually appealing as standard layouts; though such an argument doesn't have a strong base at all.