A clickstream is the recording of what computer user clicks on while web browsing. It is a kind of web analytics which measures the behavior of visitors to a website.
The researchers from Web University of Hamburg found that the nature of web navigation has changed over time.
| Time of study | 1994 | 1995-1996 | 2004-2005 |
| No. of users | 107 | 23 | 25 |
| Length (days) | 21 | 35-42 | 52-195 |
| No. of visits | 31,134 | 84,841 | 137,272 |
| Recurrence rate | 61% | 58% | 45.6% |
| Link | 45.7% | 43.4% | 43.5% |
| Back | 35.7% | 31.7% | 14.3% |
| Submit | - | 4.4% | 15.3% |
| New window | 0.2% | 0.8% | 10.5% |
| Direct access | 12.6% | 13.2% | 9.4% |
| Reload | 4.3% | 3.3% | 1.7% |
| Forward | 1.5% | 0.8% | 0.6% |
| Other | - | 2.3% | 4.8% |
- Links following has remained the most common navigation activity, accounting for 43.5% of page transitions.
- Direct access through bookmarks, typing in urls, or home page button has remained relative steady around 10%.
- New window has jumped from less than 1% to over 10% in the past 11 years.
- Form submission has increased from 4.4% to over 15% of all navigation actions reflecting the increase in web services.
(43% of all form submission involve search submission, followed by online dictionary and travel planners) - With the increase in new windows and use of AJAX, the back button has dropped from over 35% to less than 15%
Today, I am going to talk in details on how a website can be created without using any tables. Since "table" is used for data only and is not recommended to use table for building the structure, so we should avoid using it.
Now, I will show you how to convert the traditional tables to <DIV> tags in a HTML file. Suppose we have a website like this:
The first thing we need to do is to separate each part into different blocks. Here we have the header, horizontal menu, left menu and the content.
If we use tables for this layout, we may need to cheat and use a lot of colspan, rowspan or even worse, the infamous transparent GIFs (spacers). This increases the weight of the HTML.
However, if we use DIV, we will have 4 blocks here. We need to set the width, height and background on each block. For the "leftmenu", we can either use "position:absolute;" to set the absolute position or use "float:left;" to align on left. After that, we should also set the left margin for the "main" block, so that the content will not overlap with the left menu.
Now, all blocks are completely allocated and it's the time to build the menu buttons. Since we are not using table, we can't put each of the menu item into cells. So we need to find another way that can do the similar thing.
ul,li {
list-style-type: none;
margin: 0;
padding:0;
line-height: 30px;
}
For the left menu part, we can use HTML list (<UL> and <LI>). Simply use one <LI> for one item and remember to set the list-style-type to none (to avoid showing the bullets / black dots).
How about the horizontal menu? We cannot use HTML list for that, right? The solution is also simple. Just use the <A> tags instead and put them inside a <DIV> block. Finally, we will have the result here:
http://tutorials.alsacreations.com/tutocss/tuto.htm
Is that easy? If you have time, you can have a look on the sites below. They are the good examples that the whole pages does not contain any table:
http://www.cs.cityu.edu.hk/~hwchun/AIProjects/
http://courses.cs.cityu.edu.hk/cs3382/50141775/aiprojects/
References:
http://tutorials.alsacreations.com/tutocss/
http://www.htmldog.com/reference/cssproperties/
Accessibility means access to information for all - not only focusing on people with disabilities or elders people, but also the people who:
- may not have or be able to use keyboard or mouse
- may have a text only screen, small screen or slow internet connection
- may not speak or understand fluently the language in which the docuemnt is written
- may be in a situation where their eyes, ears or hands are busy interfered with
- may have an early version or different type of browser
The guidelines from W3C address 2 general themes about accessible design:
1) Ensuring Graceful Transformtion
2) Making Content Understandable
Here are the 14 guidelines from W3C:
- Provide equivalent alternatives to auditory and visual content.
- Don't rely on color alone.
- Use markup and style sheets and do so properly.
- Clarify natural language usage.
- Create tables that transform gracefully.
- Ensure that pages featuring new technologies transform gracefully.
- Ensure user control of time-sensitive content changes.
- Ensure direct accessibility of embedded user interfaces.
- Design for device-independence.
- Use interim solutions.
- Use W3C technologies and guidelines.
- Provide context and orientation information.
- Provide clear navigation mechanisms.
- Ensure that documents are clear and simple.
So, you may ask, how can we know or check our website is satisfied to these guidelines or not?
There is a website call WebXACT allows you to test the accessibility of your pages. Just simply type the URL of your page and it will generate a report for you.
After the report comes out, you will find some checkpoints there. Each checkpoint has a priority level assigned. According to W3C's guidelines, priorities have the following meanings:
Priority 1 - A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
Priority 2 - A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
Priority 3 - A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.
By using WebXACT, you can now easily find out the problems of your website and fix them one by one to improve the accessibility of the site.
References:
http://www.w3.org/TR/WCAG10/
http://www.research.ibm.com/journal/rd/485/maeda.html
http://webdesign.about.com/library/weekly/aa121800a.htm
Useful Link:
http://webxact.watchfire.com/
I think most of you may try to click the links one by one. Of course, it is certainly natural. And I think most of you will spend only a few seconds to look through those sites. Once you enter a site, your mind will almost immediately determine whether the content is the information you want to obtain or not.
Since audiences will only pay attention to your site for a few seconds, you should ensure that your content pages are understandable to users and you should also make sure you have designed content pages that communicate the essential information effectively.
So, how can we know our site is understandable to users or not?
Simple! By using a very simple usability testing technique, we can quickly measure how a content page performs with users. We call it the 5-Second Test. This test involves showing users a single content page for a quick 5 seconds to gather their initial impressions.
Here is an article giving the example of using 5-Second Test:
http://www.uie.com/articles/five_second_test/
From the article, the author tried to test the RedCross.org website with some users by using the 5-second test. They just gave only 5 seconds to their users and told them to remember everything they saw in that short period. After that, they asked users to write down everything they remember about the page.
"What is the most important information on this page?"
By asking the above question, we can easily know the user's initial impressions. If the page is understandable, users will easily recall the critical content and accurately identify the page's main purpose.
Since 5-second test is quick and easy to implement, we can test very early in the development cycle and we can gather large amounts of user data in a short time.
References:
http://www.uie.com/articles/five_second_test/
http://www.uie.com/events/roadshow/
http://www.redcross.org/donate/donate.html
All visual differences are the result of the CSS. It means that you never need to change the code in any HTML markup. You only need to modify the external CSS file and the design and outlook will be totally different. This is the concept of CSS skinning.
This blog is also build with the same technique. You may try to click on the links below to see what it will change:
Style 1 Style 2 Style 3
Style 4 Style 5 Style 6
How to do that?
To build a skinnable website, you should have at least some basic understanding of CSS and XHTML. After that you need to create at least the following CSS files for your website:
1) Base CSS with simple structure
2) Advanced CSS with final structure
3) Skin CSS
4) Fonts
5) Printer Friendly CSS
What are the benefits?
Since we have both the base CSS and advanced CSS, this is good for forward and backward compatibility. By using separated CSS files, modification on website style becomes easier and faster. We can also save our bandwidth, because the CSS files are cached.
Here are some useful references that help you to create skinnable website with CSS:
http://www.alistapart.com/articles/sprites/
http://www.digital-web.com/...image_replacement/
Other references:
http://www.csszengarden.com/
http://antenna.readalittle.net/thumblink/zenGarden/
http://www.uwplatt.edu/web/webstandards/WiLS/index.html
