SEO Competition

We used these strategy to win the competition:

Register in Search Engines and Directories
Google, Yahoo, MSN Search Engine

Pick a Good Domain Name
http://www.locktao.edu.hk

Figure Out Your Key Word Phrases
"CityU Web Hacker" Butterfly

Set up your Meta Tags
eXtreme Web Designer Award - CityU Web Hacker Butterfly - Homepage

Set up your Meta Keyword Tag
CityU Web Hacker Butterfly

Set up your Meta Description Tag
eXtreme Web Designer Award, CityU Web Hacker butterfly award, at the City University of Hong Kong

Robots Tag Necessary


Validate your HTML code
XHTML, CSS

Get Links Pointing To Your Site
Blog:http://chrizchoi.blogspot.com/
Web page:http://www.locktao.edu.hk/
Forum: http://www.uwants.com

Google Web Analytic
Use it for analysis where the visitor come, how many visitor browse per date
from which search engine...

Key Word Density Checker
Use it for analysis the content that how many key word meet our Key Word Phrases
http://www.webconfs.com

Week 8

CityU

Week 7 Usability

We're not kidding about the benefits above; in teh reserach, about 42 websites found that usability projects increased sales by an average of 100%. For American Airlines reduced development costs by 90% by making corrections during the design phase.

How does it work? User Testing helps designers create simple products. Simple products are cheaper and faster to build. Simple products are easier to use and easier to maintain. Here's how we do it:
using Eye Tracking (video present of Eye Tracking action)

• Eye Tracking technology allows you to climb inside their heads and see your website through their eyes. It lets you see where they look, what they pay most attention too - and most importantly, what they miss.

In the Eye Tracking Testing:

Preparation

We'll work with you to understand your target audience and then recruit people who match. We're experienced in recruiting all types of people from Joe Public to senior-level professionals with specialist skills. We'll also develop a test script that addresses key user tasks, and can help you put together prototypes if you need us to.

Testing

A typical test consists of 8-10 one-to-one sessions (per user demographic). During tests we set them a series of real-life tasks to accomplish with your website. Our eye tracking equipment then records

Analysis & Reporting

After analysing the test data, we'll provide you with a detailed report, illustrated with session images and heatmaps for each of your webpage. Also present the findings and design recommendations to your design team in person.

Implementation

After the analysing, then we can redesign the web page. Put the main information on the user common look at which address the deeper usability and customer experience issues.

In the testing no need to wearany tool on head. It just keep the natural feeling.

Week 6 Care Accessibility

First, every one talk about the Accessiblity for the disable user, but anyone will forcus on they want, the developer just want attract the user to more customer. why i say that because I read the meesage in the ACCESSIBLITIY101.
They talk about the common mistakes of the designer and the Disabled People Favour Accessible Sites.

Website Design Mistakes
Typical problems encountered:

• Text size on some sites, particularly for headings and links is ‘hard-coded’ so that it cannot be easily enlarged – so vital for many visitors who have a vision impairment or dyslexia. With some sites offering small text and others carrying a watermark, effective access for this group is made very difficult.

• Alt-text labels attached to images upon which blind visitors and text browser users rely for an explanation are often uninformative or completely absent. Without these spoken labels on graphical links, navigation for a blind visitor is pure guesswork.

• Pictures of text are often used instead of actual text. This not only means that the user cannot modify the text size or colour contrast – essential for those with a vision impairment or dyslexia – it also prevents screen reader users from reading the content when – as so frequently happens

• Adverts and features made up of moving images that will be distracting for visitors with a cognitive impairment, or interactive presentations known as ‘Flash Movies’ which can present access problems for visitors who cannot use a mouse, are vision impaired or who use speech output or voice recognition software.

• JavaScript. People using older browsers, those with vision impairments using some special browsers and users whose organisations disable JavaScript for security reasons, will not be able to access the sites fully - links to the main sections do not appear or the search and shopping cart facilities do not operate fully.

Disabled People Favour Accessible Sites

The top of three accessible sites are:

• bbc.co.uk
• nationwide.co.uk
• google.co.uk (so vital for effective access for disabled visitors)

There is no doubt that organisations can create accessible sites to the broadest audience possible and we are now beginning to see examples of highly professional and accessible sites that prove this to be so.

The Disability Rights Commission shows that able-bodied visitors also benefit from accessible sites, finding them easier and quicker to use by a highly significant factor of 35%.

When we visit a website we are seeking critical functionality - namely speed and efficiency - not a life-changing experience.

Accessible sites are simply easier and more intuitive to use: they improve productivity for everyone.

week 5

Holiday

Week 4 Page Design (Start move hands)

How to design the web page?
use the modeling, paper drawing, cutting.....

Visual hierarchy
Organize the contents of a page by using size, prominence and content relationships.

• Size------The more important a headline is, the larger its font size should be. Big bold headlines help to grab the user's attention as they scan the Web page.
• Prominence---------The more important the headline or content, the higher up the page it should be placed. The most important or popular content should always be positioned prominently near the top of the page, so users can view it without having to scroll too far.
• Content Relationships---------Group similar content types by displaying the content in a similar visual style, or in a clearly defined area

Consistency

• It must be clear to a visitor he is still at the same site. When he clicks a link, he must recognize the connecting page as yours. It must resemble the previous one. The best would obviously be that he recognizes your style, if he happens to accidentally encounters one of your pages
• Just think of your TV set. When you push a button on you remote control, you have a fairly good idea about what's going to happen. The volume will go up or you'll get a different network on your screen.

Suggestion to make the web consistency

• Choose a fixed layout.
• Use the same background every time.
• Put menus at the same spot on every page.
• Always use the same symbols for navigation.
• Put a logo on your page.
• Use the same style of writing everywhere.

Page lenght
The page lenght can make more convinence to the user. When the user browse your web page more easily if the important content can present in top.



Use frame or not

• Frames have as a plus you'll need to write as much HTML.You only make a menu just once. On the other pages you can almost entirely suffice with the contents. Considering the waste of bandwidth on the internet this is very welcome. The layout of your site is easier and more consistent.
• Nowadays the frame will not be the best choice of the developer. But for the beginer, it may be useful.

Accessibility

The Web page should be suitable for every user, Such as "Disabled users------color blind user". So that the web page may have some special feature to support those user.

Although some people cannot use images, movies, sounds, applets, etc. directly, they may still use pages that include equivalent information to the visual or auditory content.

Finally, those are the common considing points for creating the web page. Also web developer with basic HTML and CSS design knowledge, and a bit of time on their hands, can easily learn and implement web accessibility. So put more time on the CSS to learn how to make the your own web page better.

Week 3 The Web Standard

This week we take about the web standard. all of you must hear or learn the web standard when you are getting start the web. Beside we need to use web standards' advantage when we develop web site .Moreover do you know that the next steps what should we do when we understandard the web standard.

Therefore in web standard, we may have the checklists are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop.

• They have the guide to show the breadth of web standards
• as a handy tool for developers during the production phase of websites
• as an aid for developers who are interested in moving towards web standard

The useful for the checklist and example for the question:
Check the quality of the code

Valid code will render faster than code with errors. Valid code will render better than invalid code.

• Does the site use Valid (X)HTML?
• Does the site use Valid CSS?

Use the CSS to separe the code of content

Use style sheets to control layout and presentation

• Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?

Accessiblity for user

suitable for the target user

• Does the site use relative units rather than absolute units for text size?
• Do any aspects of the layout break if font size is increased?
• Does the site use visible skip menus?

Accessibility for devices

The target users' device is that can run the web site

• Does the site work acceptably across modern and older browsers?
• Are visited links clearly defined with a unique colour?

Site management

meaningful and helpful 404 error page

• Does the site use friendly URLs?
• Do your URLs work without "www"?

Finally, Every proposed web standards replacement has been tested, verified and is working without a problem in modern browsers like MSIE 6, Netscape 7+, Firefox 1.x, Opera 7+, Safari 1.2+, Konqueror 3.x, etc. Test some popular brower and the quality, then provide the final version to the user. The web standard have

Week 2 website components

After the week 1, we discuss how to get start to develop web site, We need to remember that the first things, we analysis of the company, industry, and audience. Then get the right information.

Now we talk about the next step, We use our brain and hands to develop it.

"Do you know what components can make the web site to more attractive?"

• Content components, detailed organization and assembly
• Text, edited and proofread
• Finished interface graphics for page templates
• Header and footer graphics, logos, buttons, backgrounds
• Interface design
• Illustrations
• Photography
• Media

Those components are important to the web site. We do not focus the content here. This week, we focus on the color and graphic.

In HTML,the standard is the hexadecimal color code, we can not remember the code in our mind. So we need tool to do it. On the other hands, how we can choose the comfortable and good looking color of the site. This is the difficult part to determine. In following web site, we can see the color combination and let us easy to compare the color.

Sometime the color will play tricks on us, if we choose the two colors which are similar. And also if we can use the suitable graphic, then it can help us to save many texts on our web page. (Feel interest... )

Finally, if you want to read more detail about the Web site design, you can browse the web site for your reference.