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~

Week 4 Blog - Web Design Hints

I have read a webpage about"Web Design Hints".

1. Easy to read, Easy on the eye – use the light pastel-colored backgrounds and dark text
2. Background colors – prevent use the grey background color
3. Images – use the less file size of the page to prevent the loading time
4. Colors and hyperlinks – different colors for indicating whether visit the page or not
5. Page Design – break into small page to avoid the scrolling
6. Navigation –good and well-organized navigator menu
7. Construction – do not put the construction image or text
8. Maintenance – use the CSS for separate the contents and layouts.

** Remark ** There is one wrong thing in this article. Formatting with tables is not good way for the web design. We should use the
for formatting the information and layout.

~Hope All of You Enjoy My Sharing~

Week 3 Blog - K.I.S.S

According to Blog 1, there is one special term called "K.I.S.S.". Therefore, I want to find more interesting things about this topic for week 2 blog.

K.I.S.S. does not mean the word kiss.

K.I.S.S stands for Keep It Simple Stupid.

This rule is used to design a web-site in user-friendly tones, presenting all information and removing unnecessary details.

In this article, there are many different kind of designs as the followings:

1. White Space and Simplicity in An Overview
2. 50 Beautiful Web Designs in 2006
3. 45 Fresh Designs
4. 30 Dark Designs
   

After reading those kind of designs, I realize that designing a good WebPages can be not very complex. I just need to simplify it into small piece to develop.

The advantage for using this rule, it can improve readability and make a great first impression.

To sum up, the K.I.S.S Principle can divide into two things:

1. People (including product and service users) generally want things that are simple, meaning easy to learn and use.
2. Company that makes products or furnishes services may find simplicity an advantage for the company as well, since it tends to shorten time and reduce cost.

~Hope All of You Enjoy My Sharing~

Week 2 Blog - 12 Steps To A Better Website

I have read an article called "12 Steps To A Better Website".

In this article, I learn there are twelve things to notice making the website as the following:

1. We need to know our target audience. Different target audiences will have different demands of the webpage design and content.
2. We need to have clear and decisive theme. The visitor can get the idea of the website is after reading the first paragraph of the index page.
3. We need to reduce the loading speed. No visitors want to wait for loading the content of the webpage.
4. We need to reduce the "click time" or "drill-down time". Visitors want to get their required information within 3 clicks.
5. We need to make consistency in the webpage design. Do not use too much different colors to indicate the same type of information.
6. We need to give enough contact information and clarification to increase the credible.
7. We need to have guaranteed to refund when the product is not suitable for the customers.
8. We need to make the payment process clearer, easier to use.
9. We need to provide the search engine for user searching their inquiries.
10. We need to validate the webpage through W3C. It can check whether the site have any bugs.
11. We need to make the webpage more compatibility through different kind of browsers.
12. We need to have two to three keywords in the each page.

~Hope All of You Enjoy My Sharing~

Week 1 Blog - Basic of Web Design

I have read an article about the Basic of Web Design

There are some hints for designing the webpages.

• Reducing the image file size - reduce the loading time
• Using the graphics - present the aims of the site
• Not use the blink images - distracting and annoying to the user
• Using the serif for headlines and Scans-Serif for text - Scans-Serif font much easier to read and print firendly page
• Not use many number of different fonts - can be used 2 or 3 standard font
• Not post many adventment in the site - the site will lose a lot of space
• Supporting multiple browsers - different users use different kind of browsers to go to your site.

~Hope All of You Enjoy My Sharing~