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~