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.

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