Week 13 Blog - 10 colour contrasting checking tools to improve the accessibility of your design

I have read an article about 10 colour contrasting checking tools to improve the accessibility of your design.

In this article, we can use the Color Contrast Tool to check whether the page is readable or not. The readability is very important factor in the web design.

Here are the difficult Colour Brightness formula and Colour Difference Formula.

Colour Brightness Formula
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
The difference between the background brightness, and the foreground brightness should be greater than 125.
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a colour.

Colour Difference Formula
Colour difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

Referene link:
Color Contrast Analyser - an detail article about color contrast and color check point tool mentioned
Color Contrast Calaculator - input RGB calaculator
Color Tool - Color match, Color calaculator
Color Check - Simple color contast and bright calculator

~Hope All of You Enjoy My Sharing~

Week 12 Blog - CSS Layout

During implement the website, i use the css for my layout design. But i have some difficultly about the css layout. It is not compatible for different browsers. I know there are some bug in IE and firefox. There are some bug in the IE and firefox.

I find the following online CSS layout generator is quite good.

CSS layout generator : You can choose which standard of website and then choose which layout you prefer.

3 column layout : In this website, there is good coding method for solving 3 column layout.

By the way, i suggest all of you need to implement the css coding by yourself. Do not copy and paste the css code. You need to understand what is the css coding meaning, otherwise you will find some difficultly in coding.

~Hope All of You Enjoy My Sharing~

Week 11 Blog - Elastic Design

I have read an article about the Elastic Design.

Elastic design can be a viable option that enhances usability and accessibility without the mandating design sacrifices.

Usability: Em is a square of its font size. Therefore, it can repsonds to user's text-size prefences.

Accessibility: allow user to change the size of text

EM online tools:

EM Calculator : It can calculate the pixel into em unit.

~Hope All of You Enjoy My Sharing~

Week 10 Blog - Guidelines For Website

I have read about guidelines for Website.

In this website, it states a lot of rules covering text, links, image, technical, misc.
I list out some of important point as the following:

Text

title tag: it is crucial and most important factors in determing search-engine placement. It is similar alt tag in the image but title tag is in the text.
header tag: this is crucial for high rankings in search engines

Link

New page open with the same window: do not use the pop up window. It is so annoying.
Valid link: make sure that all of the link are still work.

Image

alt text: allow provide a text equivalent for the image
properly sized image: do not use smaller or larger size. It will reduce the loading time and look blurry.

Technical

Valid the XHTML and CSS: the website is under the web standard
Correct character endoing: make sure all the text is readable

Misc

Cross-browser compatibility: the layout is same in different browser
No flash: the loading is too slow

~Hope All of You Enjoy My Sharing~

Week 8 Blog - Web 2.0 Design

I would like to introduce some free online tools. They can help you to design the professional and beautiful.

Banner and Logo

Web 2.0 Badges

Web 2.0 logo creatr

Web 2.0 Free Logo Generator

Button

Button
It can generate Web 2.0 Button.

Table

RoundedCornr
It can generate the rounded corner of the table.

Menu
Flyout Menu Builder – Only work at IE and FireFox

~Hope All of You Enjoy My Sharing~

Week 6 Blog - Web Design From Scratch

I have read a webpage called "Web design from scratch ".

In this webpage, there are a lot of useful article to learn. In this time, I read the Graphic Design for the web first.

The skill of Graphic Design Basic as the followings:

1. Clarity in web page design
   The root factor of effective visual design is creating relationships to show:
   what is part of what?
   what is different from what
   how different elements relate to each other
2. Color
   Example of not enough colour
   Keep intense colours for attracting the eye
   Comparing two example, we use intense color to attracts the eye, and greater the area, the stronger the attraction.
3. Contrast
   Example of insufficient contrast
   Example of sufficient contrast
   We uses black/white for the majority of body text, for maximum readability.
4. Readability
   Making pages easy to read by design
   In the article, there is a quite interesting example.
   When we enlarge the font size of Arial and Verdana, we will know the Verdana is most effective font for the text.
5. Effective text
   The strengths of using HTML text rather than words as graphics in web design
   There are a lot of the benefits of text over graphics. For example, comparing the text and graphic, the text can already be displayed quicker on screen than graphic file.
6. Imagery
   We need to consider site's goals and the users' goals, and apply graphics in a suitable proportion.
7. Attention Map
   It is just similar the prototype for helping you plan what your page should do before you get your hands dirty, example .

~Hope All of You Enjoy My Sharing~

Week 5 Blog - How to test your website

I have read an article about how to test your website.

Here are the steps of testing a website.

Document Type Definition (DOCTYPE)
We need to add < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
for each of pages.

Character Encoding
We need to add meta < content="text/html; charset=iso-8859-1" equiv="Content-Type">for each of page.

Validated the each page of the website
The W3C Validation Service.
WDG HTML Validator
Tidy the HTML coding tool and validation: HTML Tidy

Checked the spelling of the content in the website
WDG HTML Validator

Verified the all links in the website
broken links
Link Check

Determine the download times for each page
WDG HTML Validator

Testing the website by using different browser
Browsershots.org
For example, i test Dr. Chun Website, the result is Here !

Evaluation of comment from the other people
To see whether they are satisfied the website or need to improve the website

Backup copy of the files
To prevent data lose

~Hope All of You Enjoy My Sharing~