Thursday 29 November 2007

SEO : Website structure CS3382 - Week12

Optimization of website structure
  1. Physical Structure (e.g. menu, navigation bar)
    1. Flat structure
    2. Tree structure
  2. Logical Structure (e.g. quick links, internal links )
For SEO, the most important point is not how well the physical structure (URL depth), but how deep is the page from the homepage.

Flat structure is better than Tree structure due to the depth of the website.
However, for large website, using flat structure may probably reduce the Usability. To make use of logical structure such as making hot links/back links to hot pages in the homepage, not only it can enhance the SEO, but also increase the Usability.

Tuesday 20 November 2007

CSS : Priority of display, float and position CS3382 - Week11

There is priority between display, float and position, so their setting may cover each other if not in appropriate use.
Symbol meaning
=> : become setting of
: other than

1. display : none => no position, no float
2. display : none => position : absolute OR fixed
3. display : block AND float : none => top, bottom, left. right (use absolute position)
4. float : none=> display : block, box use float
4. => display

position : relative
means the latter item's position will be calculate by the former item +
top, bottom, left. right.

e.g.
the parent container of former item and latter item is at (10, 10)
former item at (100, 200)

latter-item {
position : relative;
top : 10px;
}

latter item will be at (110, 200)

However,
latter-item {
position : absolute
top : 10px;
}

latter item will be at (20, 10)

Tuesday 13 November 2007

CSS : Solve min-width Problems CS3382 - Week 10

How to Use CSS to Solve min-width Problems in Internet Explorer
http://www.webreference.com/programming/min-width/2.html

Maximum and Minimum Height and Width in Internet Explorer
http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

CSS Layout template
http://www.intensivstation.ch/en/templates/

Thursday 8 November 2007

Web Design : Usability Testing CS3382 - Week 9

DON'T MAKE ME THINK

In order to handing in Book Critique, that is the book i read.
It has mentioned some interesting testing method for the website.

Trunk test
  1. Site ID
  2. Page Name
  3. Sections and subsections
  4. Local navigation
  5. "You are here" indicator(s)
  6. Search
"Homepage" Test
  1. What's the point of this website? (any tagline of logo/title)
  2. Do you know where to start? (any big button, obvious image/text indicates?)
  3. Meaningful and clear grouping?
  4. Getting greedy for user data? (get users to engage in site quickly)

Thursday 1 November 2007

SEO : redirect method (301 and 302) CS3382 - Week 8

301(Permanently Moved), 302(Temporarily Moved) are often used because of the web hosting of website changes.
The method and steps need to do as the followings
(taking Linux using Apache as web server as example):


  1. Redirect 301 In PHP
    <?
    Header( "HTTP/1.1 301 Moved Permanently" ) ;
    Header( "Location: http://www.bloghuman.com" );
    ?>
  2. Setting .htaccess file in the root directory of the website
    Options +FollowSymLinks
    RewriteEngine on
    RewriteRule (.*) http://www.fromHere.com/$1 [R=301,L]
    rewritecond %{http_host} ^ToHere.com [nc]
Tools

Thursday 25 October 2007

SEO : Search Engine Spider catcher

To check what types of the Spiders reach your website and their frequencies, you can use the php code to know the Spiders' movement built by 黑色梦中 from bloghuman.

The php code is as the followings:
function get_naps_bot()
{
$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);

if (strpos($useragent, 'googlebot') !== false){
return 'Googlebot';
}

if (strpos($useragent, 'msnbot') !== false){
return 'MSNbot';
}

if (strpos($useragent, 'slurp') !== false){
return 'Yahoobot';
}

if (strpos($useragent, 'baiduspider') !== false){
return 'Baiduspider';
}

if (strpos($useragent, 'sohu-search') !== false){
return 'Sohubot';
}

if (strpos($useragent, 'lycos') !== false){
return 'Lycos';
}

if (strpos($useragent, 'robozilla') !== false){
return 'Robozilla';
}
return false;
}


function nowtime(){
$date=date("Y-m-d.G:i:s");
return $date;
}

$searchbot = get_naps_bot();

if ($searchbot) {
$tlc_thispage = addslashes($_SERVER['HTTP_USER_AGENT']);
$url=$_SERVER['HTTP_REFERER'];
$file="robotlog.txt";
$time=nowtime();
$data=fopen($file,"a");
fwrite($data,"Time:$time robot:$searchbot URL:$tlc_thispage\n");
fclose($data);
}


If you have interest, please free feel to go to read the original post by him (in Simplify Chinese).

Thursday 18 October 2007

SEO: "SEO Tools for Firefox"

SearchStatus can search rapidly for SEO message, including content of meta tags, whois message of the webite, content od robots.txt, keyword density, number of internal links and backlinks, other useful information.
Here is the screen shot:


If you like it, you can download from here.

Sunday 14 October 2007

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:
CityU Web Hacker turtle web page
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:

Thursday 11 October 2007

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:

Thursday 4 October 2007

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

Thursday 27 September 2007

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;
    ...
    }

Friday 21 September 2007

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.

Wednesday 19 September 2007

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


Friday 14 September 2007

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.

Wednesday 12 September 2007

CSS : pro and cons + tricks

The website shows some information about CSS in point form.
It seems that CSS nearly has no disadvantage.

Disadvantages of CSS:
  • Non-standard and semi-standard compliant browsers have problems rendering full CSS sites.
  • standards-compliant browsers are still buggy.
  • Dreamweaver 4 and MX do not render positioned CSS or XHTML correctly.

On the other hand, there are some tricks about CSS. Maybe, it is the reason why the website using CSS usually does not have a standard.

SEO : CS3382 - Week 1

After i had the lecture in week 1, i knew the importance of SEO(Search engine optimization).
In order to know how to apply SEO, i have found a few website about that. One of these is quite interesting and useful.

The website has indicated that Google 's 80 off-page/20 on-page optimization rule.
On-page optimization:
  • Add keywords into various HTML tags
  • Content of the website
Off-page optimization:
  • The amount of links pointing to the site and its pages
  • The actual linking text (anchor text) of these links
  • The quality of the pages which the links are on