Week 13, Web Design Practices

In the Web Design Practices, it collects many data and do many research about the best practice, and the relationship between consistency and usability on the web design.

The result of the research has 3 major parts, Navigation, E-Commerce function and page layout.

Navigation

• Global Navigation
• Global “Home” Link
• Breadcrumb Navigation
• Use of Faceted Classification
• Down-to-Child Links
• Down-to-Grandchild Links
• Across-to-Sibling Links
• Up-to-Parent Links
• Link Color, Treatment, and Rollover Behavior

E-Commerce Functions

• Search
• View Cart
• Manage Account
• Get Help

Page Layout

• Page Width and Length

Summary

I think the result of this research is very interesting, it can tell us about the normal of the web site design, and how do the designers design the web site usually. Collecting 12 weeks, we learnt about web standard, web design methodology, color theory, how to use fonts, usability and accessibility guideline etc. When I see the example and the result that I knew the most of designers are not fully to understand some best practice, and the importance of usability and accessibility. The managers or the designers are just show the information that they want the visitor knows. But they may ignore what is the best way to understand the objective of the organization, the detail service or products, or how to make the visitors easy to obtain the visitors’ needs.

Week 12, The Biggest Web Design Mistakes

The web site webpagesthatsuck.com talked about the biggest web design mistakes. The web site provides many usability and good web design by looking at bad web design.

The following is the 14 design mistake in2004:
1. Believing people care about you and your web site.
2. A man from Mars can't figure out what your web site is about in less than 4 seconds.
3. Mystical belief in the power of Web Standards, Usability, and tableless CSS.
4. Using design elements that get in the way of your visitors.
5. Navigational failure.
6. Using Mystery Meat Navigation.
7. Thinking your web site is your marketing strategy.
8. Site lacks Heroin Content.
9. Forgetting the purpose of text.
10. Too much material on one page.
11. Confusing web design with a magic trick.
12. Misusing Flash.
13. Misunderstanding graphics.
14. AFFrontPage.

Summary
The web site has a bad design that will make the visitor confuse, and then leave your website. It will not be success in the market. In these 14 points, I think the point 2 is the most important. It is because if the web site can't be easy to understand what the objective of the web site shortly, the visitor will not spend more time to guess the web site what is the web site talking about, and then leave the web site. Secondary, when the visitor is the first time to come the website or touch the organization. It should avoid that it comes to names and tag lines when the organization is non-profit organization. Due to the visitor don't know what is the organization background and mission.

Week 11, 10 Reasons of Don't Care about accessibility

Accessibility is regarded as being a part of the general issue of usability. Usability is the design of navigation, content and structure so that all users can carry out tasks effectively. Accessibility is very important that many people may think the web site should not accessibility. That concept is wrong. It is because increasing the accessibility of your online communications will increase sales if you have something to sell, increase audience reach, improve search engine rankings, reduce loads on the server and reduce load on server bandwidth. The following is the reasons of Don't Care about accessibility.

Reason 1: It’s the Law But There’s None to Follow
Reason 2: There Is No Immediate Benefit
Reason 3: Accessibility Is Sold As a Technical Problem
Reason 4: Disability Is Not Something Clients Want to Think About
Reason 5: We’re Past Inventing, We’re Maintaining
Reason 6: It Is Not Part of the Testing Methodology
Reason 7: Accessibility Seems Like a Party Pooper
Reason 8: Nobody Complains
Reason 9: It Requires Involvement
Reason 10: There Is No Leader to Follow

Summary
Web accessibility is most important thing with disabilities and achieve strong usable websites. It is fundamental to the creation of a better Internet. The disabled people maybe your customer. If you can serve the disabled people, you will increase your market share and the competitiveness

Reference: digital-web > articles > ten reasons clients dont care about accessibility

Week 10, Digital 21: Web Accessibility

This web site about the Digital 21 Strategy is under of HKSAR government. Digital 21 Strategy strived to position Hong Kong as a leading e-business community and digital city in the globally connected world. The following is the tips for making the web pages more accessible.

1. Provide text equivalent for audio and visual contents
Pure graphical contents are not accessible to users who are vision impaired. Pure auditory contents are not accessible to users who cannot hear. Alternatives should be provided

2. Ensure that the contents can be easily accessed even without using color
Users with color deficiency may not be able to differentiate the different colors and may miss out information that is presented in color alone. A good color contrast will help them to read the information clearly.

3. Identify clearly changes in languages used and make contents simple and convenience to read
Screen reader software with voice synthesizer is one of the assertive tools used by vision impaired users. Some voice synthesizers can 'speak' in multiple languages but changes in languages should be identified for the synthesizers to switch between languages.

4. Modify the structure tables so that they can be read easily and for complex tables, using suitable markup or a linear representation would greatly increase the accessibility
Some assertive tools can render simple tables automatically. Some assertive tools can render simple tables automatically, e.g. by telling the user the format of the table and then read out the contents of the cells one by one. The user can base on the format to map the subsequent contents of the table when the assertive tool is reading the contents. This works well with simple table such as those with 1 heading per column and the contents are similar for all rows, e.g. there are no intermediate totals among the rows.
For complex tables, e.g. those with several logical levels of heading and complex formats, interim subtotals and non-uniform row / column formats and with a large amount of information disseminated, suitable markup or a linear representation of the table will make the information much more accessible.

5. Avoid the use of flickering and blinking contents
Some people, e.g. people with photosensitive epilepsy may have seizures triggered when they encounter fast flickering or blinking objects. Some users, e.g. old people, may not be able to read fast moving information or have difficulties in manipulating fast moving objects.

6. Avoid the use of pop up windows or other windows without telling the user
Although some assertive tools can already switch to the latest opened window and read the contents of the pop up page, pop up windows may cause the following confusions

7. Avoid the use of complicated frames
Frames often make the navigation difficult for vision-impaired users, as the changes in the frame contents cannot be easily detected.

8. Provide clear and consistent navigation mechanism
Always make your site easy to navigate so that the visitor can move around the site easily and find the information / services required quickly.

Summary
Improve accessibility can gives an opportunity for disabled person to obtain the service and information from the Internet. It can increase the general usability of a website. In the business view, accessibly websites can serve more people include the disability and other customers in general

Week 9, Google Information for webmaster!

This is Google official web site for webmaster, (Google Information for webmaster). It provides seven information parts include guideline, facts & fiction, SEOs, googlebot, feedfetcher, removals and FAQ.

I want to introduce the guideline that has four major parts. Design and Content Guidelines and Technical Guidelines explained by Dr. Andy Chun. Another two parts are Quality Guidelines of principles. In these four parts, Quality Guidelines are strongly recommended to attention! If the webmaster against this part, it may get remove entirely from the Google index.

When the webmaster finished the previous 2 parts and built the web site, google provide some tools and ways to help the webmaster how to make google search your web site.

• Make other relevant sites link to yours.
• Submit the web site to Google at http://www.google.com/addurl.html.
• Submit a sitemap as part of Google Sitemaps (Beta) project. Google Sitemaps uses your sitemap to learn about the structure of your site and to increase the coverage of your webpages.
• Make sure all the sites that should know about your pages are aware your site is online.
• Submit your site to relevant directories such as the Open Directory Project and Yahoo!, as well as to other industry-specific expert sites.

The Quality Guidelines include

• Make pages for users, not for search engines.
• Don't deceive your users or present different content to search engines than you display to users
• Avoid tricks intended to improve search engine rankings
• Don't participate in link schemes designed to increase your site's ranking or PageRank
• Don't use unauthorized computer programs to submit pages, check rankings, etc.
• Avoid hidden text or hidden links
• Don't employ cloaking or sneaky redirects
• Don't send automated queries to Google
• Don't load pages with irrelevant words
• Don't create multiple pages, subdomains, or domains with substantially duplicate content
• Avoid "doorway" pages created just for search engines or other "cookie cutter" approaches such as affiliate programs with little or no original content

Summary

I think webmaster need initiative to find ways to get index by google. It cannot only stay here and wait google to search your site. It is because if the web site waits the spider to search the web site, it will not ensure when the search engine searches.

Week 8, How to improve the existing web site!

Nowadays, many web designers keep using traditional table layout or mixed content and layout. However, if developer needs to separate the content and layout, such as using XHTML and CSS, that may spend long time to learn it. Modify the existing web site to fit the web standard is not easy. The best way is step by step to finish each stage. Thus fulfill the web standard by modify the website.

• Adding correct DOCTYPE tags (DOCYYPE is document type, it explains what version of XHTML or HTML. The browser will base on the Document Type Definition (DTD) to interpret the code. It has 3 DOCTYPE, transitional, strict and frameset.
• Set up a namespace (directing declare after the DOCTYPE. ＜html xmlns=http://www.w3.org/1999/xhtml"＞It is the detail of DTD and allow a online address to identify the namespace.)
• Declare web site character encoding (it can let the browser knows which encoder to interpret. For example, Western is ISO-8859-1, Traditional Chinese is BIG5, Simplified Chinese is GB2312.)
• All tags are using lower case (XML is very sensitive about the letter that all XHTML must use lower case. Otherwise, W3C will verify the code invalid. such as ＜TITLE＞ change to ＜title＞)
• The image add alt attribute (alt is very useful because when the image can't display or using screen reader. That can easier understand by the user. For instance, ＜img src="logo_unc_120x30.gif" alt="company logo，click here will back the front page"＞)
• All attribute value add double quote (this is the web standard of the XHTML, such as height="100")
• When using XHTML, Close all of the tags (this rule can avoid mess of HTML code. For example, ＜p＞close the tags＜/p＞. In something single tag such as ＜br＞ change to ＜br /＞)
• Using CSS to define the layout (when we want to make font bigger, we use ＜h1＞ or add a point in front of the text, we will use ＜li＞. In fact, we use CSS that can easy to change the difference font size or font color. (For example, h1, h2, h3, h4, h5, h6{ font-family: Tahoma, serif; font-size: 12px; } )
• Using CSS to replace the HTML presentation (We use the structure code such as

＜li＞sentence 1＜/li＞＜li＞sentence 2＜/li＞＜li＞sentence 3＜/li＞

to replace the miscellaneous code

sentence 1＜br /＞sentence 2＜br /＞sentence 3＜br /＞.

• Each table and form named “id” for identification (For example, ＜table id=”menu”＞, we create id call menu, and we connect to a CSS style sheet. That represents how to show the forms, tags and other component. Therefore, we no need to spend each ＜td＞ to show the height, width, background or alignment etc… Using tag menu of id. We can use CSS style sheet clear to separate the layout and content.

The advantage of Web standard

• Convenient for developer to maintain or redesign website
• Guideline for develop to speed up the develop time
• Standard represent the best practice of the industry
• Convenient for screen reader

Reference site:

http://www.w3.org/MarkUp/
http://www.w3.org/TR/CSS21/

Week 7, About search engine optimization tools

In this week, I will talk about search engine optimization tools. Dr. Andy Chun introduced some technique how can make the site on the top of Google search. I found two web sites that it provides some tools to help us to check the performance of the web site. (webconfs & seochat)

When we use the search engine, the search engine will ignore some words, for example, what, why, without, often, everything etc (What is SEO). If the meta tags add some ignore words, it will not optimize for the search engine.

The IP address also a important things, the search engine will base on the physical location to classify, for example, ATV in Yahoo and ATV in Yahoo HK.

The keywords are very important, if we know the ranking of the keywords, it will be easier to insert about the keywords in the meta tags.

Using Search Engine Spider Simulator can check the web site when the search engine what is the search engine will capture about the texts and links. It can be easier to handle the meta tags what we use.

These web sites provide too much service and have many interesting tools, try it! I think it can help us to do our redesign project bonus part.