Amaronline.com » web quality http://www.amaronline.com Technology makes everything perfect Wed, 01 Feb 2012 18:17:01 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Web Quality – Internationalization http://www.amaronline.com/2008/11/web-quality-internationalization/ http://www.amaronline.com/2008/11/web-quality-internationalization/#comments Wed, 19 Nov 2008 04:00:42 +0000 amaronline http://www.amaronline.com/?p=43 Continue reading →]]>

The Internet is International
The Internet is International

With the Internet follows an absolute requirement to interchange data in a multiplicity of languages, which in turn utilize a bewildering number of characters.

H. Alvestrand, The Internet Engineering Task Force (IETF), January 1998.
International Character Sets

All W3C standards (since 1996), including HTML, XHTML, and XML defines an internal character set called Unicode (ISO 10646).

All modern web browsers are using this (Unicode) character internally. Most documents transmitted over the Internet do not use the Unicode character set.

Because of this, Internet clients (browsers) and Internet servers must have a way to agree about the character set used in the communication between them.

Labeling each document with the character set in use, is very important to the quality of your web site.

For your HTML and XHTML pages always use the following meta element inside the element:

Replace X with the character set you use, like ISO-8859-1, UTF-8, or UTF-16.
International Dates

Don’t use dates like “04-03-02″.

The date above could mean the second day of March in 2004. It could also mean the fourth day of March in 2002. Or even the third day of April in 2002.

The international standard organization (ISO) has defined an international standard format for dates as “yyyy-mm-dd”, where yyyy is the year, mm is the month and dd is the day.

When you use this ISO format, you can expect most visitors to understand your dates.

]]> http://www.amaronline.com/2008/11/web-quality-internationalization/feed/ 1 Web Quality – Accessibility (WAI) http://www.amaronline.com/2008/11/web-quality-accessibility-wai/ http://www.amaronline.com/2008/11/web-quality-accessibility-wai/#comments Wed, 19 Nov 2008 03:59:41 +0000 amaronline http://www.amaronline.com/?p=41 Continue reading →]]>

An accessible web site is a web site that can be used by disabled users.

Disabled users are users with disabilities or bad user conditions.
The Web Accessibility Initiative – WAI

WAI (created by the World Wide Web Consortium (W3C) in 1997) is a set of guidelines intended for web developers, authors, and designers- about how to make web content accessible to people with disabilities.

The goal of these guidelines is accessibility, but they will also help make web contents available to more browsers (voice browsers, cell phones, hand-held devices), and to more users working in difficult environments (hands-free, strong light, darkness, bad sight, heavy noise).
Is WAI Important to Your Web Site?

Yes it is.

Millions of people with disabilities are surfing the Internet every day, and even more millions are using poor browser equipment, or working under difficult user environments.

If your website lacks features such as resizable fonts, images with proper text descriptions, and easy navigation, these people will not be able to access your information.

lamp.gif In fact: Your site violates the rights of these people.

Here are some other reasons for making your site more accessible:

* It will improve your reputation and image
* It will improve your customer satisfaction
* It will increase your number of visitors
* It will let your visitors stay longer at your site
* It will increase the number of returning visitors
* It will make your site more usable also for people with no disabilities
* It will make your site more usable for users with images turned off
* It will make your site more usable for people with older equipment
* It will let you reach the fastest growing population: older people

Use an Adjustable Font Size

Use only relative font sizes, and let the user be able to use the browser menu (View – Text Size) to change the default text size.

Can you read this?

Can you read this?

Can you read this?

Can you read this?

lamp.gif To change the font size, select view – text size – in your browsers menu.
Use The “alt” Attribute

The alt attribute allows you to provide a text equivalent for an image (and for some other elements).

Example:

Banana

Sometimes a web browser will not display your images. The reason could be one of many:

* The user has turned off the display of images
* The browser is a mini browser without image display.
* The browser is a voice browser (used by blind or poor-sighted)

If you use the “alt” attribute, most browsers will at least display or read the “alt” description.

]]> http://www.amaronline.com/2008/11/web-quality-accessibility-wai/feed/ 0 Web Quality – Style Sheets http://www.amaronline.com/2008/11/web-quality-style-sheets/ http://www.amaronline.com/2008/11/web-quality-style-sheets/#comments Wed, 19 Nov 2008 03:57:46 +0000 amaronline http://www.amaronline.com/?p=37 Continue reading →]]>

Using Style Sheets is important to web page quality.
Don’t Use the Font Tag

The text size used to display information on a web page should be set using CSS (Cascading Style Sheets). Do not use the HTML tag.

Using the tag will increase the size of your document, and give you a nightmare every time you decide to change your standard text size.

Think of the following example:

One day you decide to change all the headers in your web to another color and another size. With CSS you can change the color and size attributes by rewriting one line of code. If you have used the tag, you will have to edit the tag for all the headers in all the pages of your web.

lamp.gif Using styles instead of tags makes it much easier to give all the pages of your web a high quality and consistent look.
Don’t Use Fixed Sizes

Never use fixed size values. Always use relative size values.

The most important reason for this advice is that fixed sizes can not be resized by the browser.

Your visitors will have different equipment (monitors), different viewing conditions (light), and possible disabilities (poor eyesight).

Setting your default text size to 100% (or medium), your main headers to 140% (or x-large), your sub headers to 120% (or large), as an example, will make it possible for your reader to resize your pages to their best fit.

Want to see how it works? Select view in your browsers menu, and change the text size for this page.

lamp.gif Adjusting the text size of a web page also changes the amount of text that will fit on a printed page.
Don’t Use a Small Default Font Size

Some web sites use a small text size just to “squeeze” more text into each page, or to make the page more “stylish”.

Again, visitors with different equipment, viewing conditions, and disabilities (and sometimes most people) will have difficulties reading the text.

lamp.gif Don’t force your visitors to enlarge the text size every time they visit your site.
Always Use a Background Color

Most web pages use colors for different text elements. Both headers and links are often in a different color from the body text.

As a web designer, you should be aware of the fact that your visitors are able to change their default color preferences.

If you define colors for your web elements (like header and links), you should also define the background color.

If you don’t define a background color, your web site might end up with some very bad combination of colors (like light red headers on a red background, or even worse, black text on a black background)

lamp.gif If you don’t specify a background color, your text might be invisible.

]]> http://www.amaronline.com/2008/11/web-quality-style-sheets/feed/ 0 Web Quality – Important HTML Elements http://www.amaronline.com/2008/11/web-quality-important-html-elements/ http://www.amaronline.com/2008/11/web-quality-important-html-elements/#comments Wed, 19 Nov 2008 03:56:53 +0000 amaronline http://www.amaronline.com/?p=35 Continue reading →]]>

are important tags to web page quality.
The Element

Doctype means a “document type declaration” (DTD).

All HTML and XHTML pages should use a element to define which HTML version it conforms to.

The doctype defines which version of HTML you are using, and gives important information to your browser so it can render your page faster and more consistently.

The doctype declaration also allows validating software to check the syntax of your page:
HTML 4.01 Strict, Transitional, Frameset
“http://www.w3.org/TR/html4/strict.dtd”>
“http://www.w3.org/TR/html4/loose.dtd”>
“http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict, Transitional, Frameset
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1 DTD
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Read more about DTD, Doctype and Page Validation at W3Schools.
The Element

The element is one of the most important HTML elements. Its main function is to describe the content of a web page.

Even if the title is not a visible part of your web page, it is important to the quality of your web site because it will be visible in

* search engine lists
* the windows title bar
* users bookmarks

The title should be as short and descriptive as possible.

When a user searches the internet for web sites, most search engines will display the title of your web site in the search result. Make sure the title match the content the user is looking for. Then it is more likely he will click on the link to visit your web site.

When the user is visiting your website, the title will be visible in the windows title bar. Make sure the title describes your site even when the window is minimized.

After the user has visited your website, the title of your web pages will be stored in his history folder (or even in his favorites folder). Make sure the title clearly describes your pages for a future visit.

Good title examples:

Bad title examples:

The

Element

The

element is used to describe the top level header of a web page.

Because some web browsers display the

element in a very large font by default, some web developers will use the

element instead of the

element for top level headers. This will not confuse the reader, if he is a person, but it will confuse most search engines and other software that will try to “understand” the structure of the web page.

Make sure you use

for top level headers,

and

for lower levels.

Try to structure your web page headers after this template:
This is the main header

Some initial text
This is a level 2 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.
This is a level 3 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.
This is a level 3 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.

If you don’t like the default size for headers, use styles or a style sheet to change it.

]]> http://www.amaronline.com/2008/11/web-quality-important-html-elements/feed/ 0 Web Quality – Standards http://www.amaronline.com/2008/11/web-quality-standards/ http://www.amaronline.com/2008/11/web-quality-standards/#comments Wed, 19 Nov 2008 03:55:43 +0000 amaronline http://www.amaronline.com/?p=33 Continue reading →]]>

Writing your pages to the web standards will improve the quality of your site.
The HTML Standard

XHTML is the latest HTML standard. XHTML is a reformulation of HTML 4.01 in XML.

Writing your pages to the latest HTML 4.01 standard will bring you as close as possible to the latest XHTML standard.

Read more about XHTML.
The CSS Standard

Using Cascading Style Sheets (CSS) is the preferred way of separating content from the style in quality web pages. By using CSS you can store all the information about the style of your web pages in one single document.

All modern web browsers have support for both the CSS 1 and CSS 2 standards.

Using CSS will improve the quality of your web site and increases the readability for many different browsers. It will also greatly reduce your web site development costs.

Read more about CSS.
Web Validation

A web validator is a software program that can check your web pages against the web standards.

When you use a validator to check an HTML, XHTML or CSS document, the validator will return a list of any errors found, according to your chosen standard. Normally the validator also returns the line numbers where errors are found.

Make sure you make it a habit to validate all your web pages before publishing.

Read more about page validation.
WAI – The Web Accessibility Initiative

WAI stands for the “Web Accessibility Initiative”, and is initiated by W3C.

WAI coordinates with organizations around the world to increase the accessibility of the Internet through six primary areas of work: technology, guidelines, tools, education, research, and development.

You can improve the quality of your web site, and make your information available to more people (and browsers) by writing your pages according to the WAI guidelines.

You will learn more about WAI in a later chapter of this tutorial.

]]> http://www.amaronline.com/2008/11/web-quality-standards/feed/ 0