Liquid Design

Liquid Design
· 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.
Ice sites, Jelly sites and Liquid sites
According to design style, websites 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.


Advantages of positioning with CSS
It allows disabled users to hear the content being read out first by their speech-based browser.
For all users the content will be the very first thing that loads (the loading time will be virtually instant) leaving the graphics and other bandwidth consuming elements to load in the background while the user is accessing the information. While this is a huge advantage for sites that use many graphics, it is not limited to them. Any site can reduce load time to a minimum by making use of CSS positioning.

Why Use External CSS?
It keeps your website design and content separate.
It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
You can make drastic changes to your web pages with just a few changes in a single CSS file.

This is cool for scope attribute:
Linking headers to data: the scope, id and headers attributes
Many tables are more complex than the example table I’ve been using so far. I’ll make it a little more complex by removing the “Company” header and changing the data cells in the first column into header cells: Company data

Employees
Founded
ACME Inc
1000
1947
XYZ Corp
2000
1973
In this table, each data cell has two headers. The simplest method, markup-wise, of making sure that a non-visual browser can make sense of this table is to add a scope attribute to all header cells:
The scope attribute defines whether a header cell provides header information for a column or a row:
col: header information for the column it is in
row: header information for the row it is in
Adding a scope attribute with the value col to the headers in the first row declares that they are headers for the data cells below them. Likewise, giving the headers that begin each row a scope with the value row makes them headers for the data cells to their right.
The scope attribute can take two more values:
colgroup: header information for the rest of the column group that contains it
rowgroup: header information for the rest of the row group that contains it
A column group is defined by the element. Row groups are defined by the , and elements. I’ll get back to those in a bit.

The benefits
It may look like a lot of work to create accessible data tables in HTML. For complex tables, it is. Sometimes to the point where it gets almost impossible to do by hand. For simple tables though, using header cells with a scope attribute is quick and easy.
It’s obvious that people using screen readers or other assistive technology benefit from tables that use the available accessibility features. Trying to make sense of a large and complex table by listening to it can still be very difficult, so if at all possible, simplify the table.
Less obvious is that designers and users of graphical browsers also benefit: an accessible table has plenty of structural hooks to apply CSS to, and good styling can make the table more usable for everybody.
… …

Date	Topic	What to read	What’s due
September 5	Course overview	Chapter 1
September 7	Accessibility standards	Introduction to WCAG 2.0	Written questions about Introduction