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.

Week 6, Web page technique

In week 5, I will talk about web page technique. What is a good website? I think it is contain a beautiful design, fast speed, sufficient content, target is clear etc.

When we design the web page, we need to consider the web page position. For example, environment, mystery or technology etc., Dr. Andy Chun in this week taught us about the colors meaning. Such as, green for environment (Agriculture, Fisheries & Conservation Department), black for mystery (NASA) or Blue for technology (Intel). So the colors need to match the theme of the web page design. Collocation the color uses a series of the similar color. It will make softer.

When we choose the fonts, we should choose the screen fonts, such as Verdana or Georgia. The font size about the content may use 10- 12 points. If the font size is too large or too small, it will destroy the whole perception or it will make the people difficult to read. When we use the background picture, we need to consider the background and the font color match up that is suitable. And make sure the people will not tired when seeing the web page.

Week 5, About the web design

In this week, I would like to illustrate the important and advantages of excellent web page designs for the company. The web site of IBM and Chevalier iTech Holdings Limited are selected to be an example. Although they’re business scopes and the target markets are same, the website designs have many different. And I will introduce the web site of Chevalier iTech Holdings Limited at first.

For this website, it is not an excellent web page design. The important information is almost presented on the top of left hand side, and the graphics will attract more than the text, such as the company’s logo. However, this website is in the reverse order that the logo is meaningless. As the user click the logo, it cannot back to the index page automatically, it seems not effective and efficiency. The whole website also not consistency because each page is using difference font, difference font colour and the same page has difference language. The grouping is not uniform that may not easy to attract people, due to grouping is very important to show the content of the business that let the user know what kinds of product and service are providing. It is directly to affect the turnover. Moreover, it must open the new windows to show the require information with each link, when I click any target items. It is not convenient and not easy adapt for the users. In the source code, this website has not DOCTYPE and so many useless codes to decrease the accessibility.

On the contrary, the IBM’s website can perform the excellent web page design and access the clear message to the users, which it’s logo is on the top of left hand site. The users are easy to focus on the logo of IBM and can click it back to the index page automatically. This website uses smooth and consistence fonts that is so convenient for the users. It mainly uses the black, blue and white to show on the website and grouping is so clear and point out all the information regularly. For the layout, it is balanced and symmetry. In the source code, IBM is conform web standard in XHTML 1.0.