SEO: "CityU Web Hacker" Turtle CS3382 - Week 6

In order to participate 2007 eXtreme Web Designer Award about SEO, i have built the web page for the keyword : "CityU Web Hacker" Turtle web page as followings:
SEO steps and related SEO software:

1. For SEO, Make the correct robots.txt to prohibit Spider to index your private folder. (SEO tools provided)
   
2. For SEO, Add meta tags (includes robot, title,heading, keywords and description) within ＜head＞, don't spam (the keyword appears more than once in same tag). (SEO tools provided)
3. For good SEO, Include the keyword in ＜title＞, if better at the first 3-5 words.
4. For SEO, Use less javascript in the previous part of ＜body＞, if long, put them in the latter part.
5. For SEO,Visible text having the keywords appear as near the top of ＜body＞ as possible, if better it appears in the first 5-7 words. (SEO tools provided)
6. For SEO, Make sure have alt property in ＜img＞, title property in ＜a＞
   
7. For SEO, Add text of the web page > 250 words, better if >500words.
8. For SEO, Make sure the keyword density is >5%, better if 8%-10% (too much will be considered as spam). (SEO tools provided)
9. For SEO, Make the web page with valid XHTML (1.0 strict or better) , CSS, ECMAScript, etc. (SEO tools provided)
10. For SEO, Get a static IP hosting for the website rather than dynamic website. (SEO tools provided)
    Input your website URL:
    
    
    
    
    This tool provided free by Bruce Claya
    


11. For SEO, Include the keyword in URL.
12. For SEO, Submit the URL to search engines, e.g. Yahoo,Yahoo directory, Google, dmoz, etc. (SEO tools provided)
13. For SEO, Set sitemap file to Yahoo and Google. (SEO tools provided)
14. For SEO, Increase the quality(high PR, highly related website point to your website) and quantity of the backlinks(links that point to your website), you can use backlink Anchor Text Analysis Tool to check the backlinks. (SEO tools provided)
15. For SEO, Make sure the Spider able to "read" your website clearly. (SEO tools provided)
16. For SEO, Keep update the content(more text) of web page as frequently as possible.
    

SEO Tools:

• Spider simulator - SEO Tools
• Google Page Rank monitor - SEO Software
• Query Keyword usage frequency tool - SEO Tools
• Similar webpage checker - SEO Tools
• Backlink Builder - SEO Tools

SEO : CS3382 - Week 5

To participate in eXtreme Web Designer Award which this year's topic is "CityU Web Hacker" : turtle, i have read some articles about SEO and robots.txt .

Robots.txt
What is a robots.txt? This website has several articles about SEO and robots.txt.
Robots.txt is a text file in ASCII for declaring the web page not to be searched by the search robots (or search spider). Although not many search engine robots support the Robot meta tag, some famous search engine such as GOOGLE can completely support, and even add a comment of "archive" to limit if the GOOGLE can keep the screen shot of the web page.
e.g. ＜meta name="googlebot" content="index,follow,noarchive"／＞

Location: /robots.txt (root directory)
Format: example from google
User-agent: robot-name (can see the Web Robots list for details)
Allow: /page/
Disallow: /page/

Meta-tag (can be 1 of 4):
＜meta name="robots" content="INDEX, FOLLOW"／＞ , can be written as ＜meta name="robots" content="ALL"／＞
＜meta name="robots" content="NOINDEX, FOLLOW"／＞
＜meta name="robots" content="INDEX, NOFOLLOW"／＞
＜meta name="robots" content="NOINDEX, NOFOLLOW"／＞
Meaning:
INDEX is for declaring to index your page in search engine, while NOINDEX is not.
FOLLOW is for declaring to index the links from your page in search engine, while NOFOLLOW is not.

Exchange links
Links is very important for Internet, so many search engines always see links (mainly in-links) as important factors for indexing. Beacuase of this, many sites improve their SEO by take the convenience of exchange links. However, despite of of common of exchange links, google has penalty of this behaviour due to decrease the quality of the links.
Therefore, we should not use the method of exchange to increase the number of in-links of the website.

Other useful links for SEO:

• Bloghuman
• SEO month magazine from Dunsh

Font and color notes

Fonts:

• Moderns are best used with short to moderate body copy, not for extended reading;
• Clarendon-style serif faces usually carry a very high readability;
• Slab serif faces can be appropriately used in applications.
  

Color:

• Complementary color schemes are really bad for text, good for standing out something;
• Analogous color schemes usually match well and create serene and comfortable designs;
• Triadic color schemes tend to be quite vibrant and should be carefully balanced - let one color dominate and use the two others for accent;
• Split-complimentary color scheme is difficult to mess up, but has less tension than complementary color scheme.
• Square and Tetradic color schemes offer plenty of possibilities for variation and work best if you let one color be dominant.

Color Meaning:

• Blue
• Calming and sedate
• Cooling
• Aids intuition
• Green
• Soothing
• Relaxing mentally as well as physically
• Helps alleviate depression, nervousness and anxiety
• Offers a sense of renewal, self-control and harmony
• ........
  

Tools: Many Web Design Tools
Game: Google Image Labeler

CSS : CS3382 - Week 4

To learn more about CSS, i have browse several article about CSS's properties as the followings:

1. Differences between inline and blocks element

inline elements (em, strong, a, span; anything with display:inline)
block elements (hX, p, li, div; anything with display:block)

There is an important difference between their padding and border formatting.

• The position of Block: includes its padding and border and
• The position of Inline: includes only horizontal paddings and borders
  

2. Bugs in IE

1. MSIE 5+ for Windows ignores the "_" at the beginning of any CSS property name
• e.g. in WinIE, _color:red treated as color:red
2. treating overflow:visible as height:auto

3. Dynamic width of background

1. Prepare the background image in the same ratio as the columns.
2. Position the image in the background in the same ratio as well.

3.    #content {
   ...
   background: url('bkgr.gif') 30% 0% repeat-y;
   ...
   }

Color scheme : CS3382 - Week 3

After reading the website from heiman's Blog, i have found some website about color scheme.

Color schemes are harmonized sets of colors. In the absence of harmony, colors can clash or otherwise affect each other adversely. Here is the example1 and example 2.

Points from the websites:

• Warm colors (yellows, oranges, browns, yellow-greens, orange-reds, etc.) :
• aggressive and exciting, apply in small doses.
  

• Cool colors (blues, greens, pinks, purples, blue-greens, magentas, blue-reds) :
• soothing, calming , used in large amounts.

• Neutral colors (white, black, gray) :
• for back-grounds and for enhancing the effect of warm colors.

• Multi-color (warm + cool colors) :
  
• too much color can be cluttered and ambiguous, lowest visitation time.

• Color Harmony
• similar to musical chords, which simply means they're pleasing to the eye.
• too little can be boring.
  

• Color Association
• blue is associated with serenity
• red is associated with impulse buying

Suggestion

• choose a couple of colors and stick to them.
• Use only a few different colors on a page.
• Avoid using an excessive amount of colors.
• Blend and use warm and cool colors.

For chose a couple of right color you desired, you may try to use some tools for generating the color scheme. There are some color scheme tools as the followings:

1. Color Schemer, Color Schemer Online V2
   
2. Color Wheel Pro
   
3. Color Scheme Generator 2.

To know more about classic color scheme, you can go to see the color theory basic.

Creative Brief : CS3382 - Week 2

I have read several articles about the Creative Brief. Two of them are quite useful.
One is about "What is a Creative Brief" and "why do you need one?"
Another is about "How The Brief Is Developed?" and what should it include?


Points from the websites:

A creative brief is a written document that summarizes business and creative objectives affecting creative direction as comprehensively and concisely as possible.

It is not a proposal, RFP (request for proposal) or initiation form, that are tactical and include project specifications, such as deadlines and budget.

• Who?
• result of number of meetings held between the developer and the client
• When?
• At Define Stage, when establishing requirements
• What?
• Role: For develop team, procides ideas of creative direction of the project
• Purpose: Enable the creative group and the client to agree to a common set of objectives
  

"Position" of Creative Brief

1. Research and discovery phase
1. Identify key stakeholders, decision makers and people on your team who will be part of the process
2. Review background material provided by the client
3. Conduct a planning meeting with the client and stakeholders
4. Collect additional research if necessary
2. Relationship between design and development
   
3. Creative Brief
• about the business objectives
• discovers the goals and objectives driving the creative strategy
• idea of the creative direction for the project
• Demographics of the audience
• Expectations of audience
  
• Communication strategy behind the site
4. Development of any design solution
5. Summary (align the client’s business objectives with your creative strategy)
   
• Findings and related recommendations
• A clear set of expectations
  

Web Design : Top 10 Web 2.0 designs

Here are the best website and the wost ten mistake in web desgin:
Top 10 Web 2.0 Designs and Top Ten Mistakes in Web Design

From the observation, there are common good points from them.

• Color: use same color family


• Simple: use pictures and icons insteand of words


• make use of Web 2.0: user can interact with the website and change the appearance of the website
  

It is difficult to design a pretty website that follows the design aned UI principle.

From the design point of views, using more graphics(pictures and icons) instead of words not only can avoid users' working memory overload, but aslo help user to fasten to target and find the desired links and infomation.