Saturday, September 19, 2009

Web Quality Web Quality - Standards

Web Quality Web Quality - Standards


If your web pages conform to the web standards, it improves the quality of your web site.


The HTML Standard

XHTML is a reformulation of HTML 4.01 in XML.

Writing your pages to the latest HTML 4.01 standard, brings you as close as possible to the XHTML standard.

Read more about HTML.

Read more about XHTML.


The CSS Standard

Using Cascading Style Sheets (CSS) is the preferred way of separating content from style in quality web pages.

With CSS, you can store all style information for your web site in one single document.

All major 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 validator is a software program that can check your web pages against the web standards.

When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard.

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's goal is 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.

Web Quality - Important HTML Elements


<!DOCTYPE>, <title>, and <h1> are important tags to web page quality.


The <!DOCTYPE> Element

Doctype means a "document type declaration" (DTD).

All HTML and XHTML pages should contain a <!DOCTYPE> element to define which HTML version it conforms to.

The doctype defines which version of HTML or XHTML 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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"



Read more about Doctype and Page Validation at W3Schools.


The <title> Element

The <title> 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 browser's title bar
  • user's bookmark

The title should be as short and descriptive as possible.

When a user search for a web site, 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 the user will click on the link to visit your web site.

After a user has visited your website, the title of your web page will be stored in the user's history folder. Make sure the title clearly describes your pages for future visits.

Good title examples:

<title>HTML Tutorial</title>

<title>XML Introduction</title>

Bad title examples:


<title>Chapter 1</title>

<title>W3Schools has a collection of award winning, well organized, and easy to understand HTML, CSS, JavaScript, DHTML, XML, XHTML, WAP, ASP, SQL tutorials with lots of working examples and source code. </title>


The <h1> Element

The <h1> element is used to describe the main heading of a web page.

Because some web browsers display the <h1> element in a very large font by default, some web developers will use the <h2> element instead of the <h1> element for main headings. This will not confuse the reader,  but it will confuse most search engines and other software that will try to "understand" the structure of the web page.

Use <h1> for main headings, and <h2> and <h3> for lower level headings.

Try to structure your headings after this template:

This is the main heading

Some initial text

This is a level 2 heading

This is some text. This is some text. This is some text.   

This is a level 3 heading

This is some text. This is some text. This is some text.

This is a level 3 heading

This is some text. This is some text. This is some text.

If you don't like the default size for headers, use CSS to change it.

Web Quality - Style Sheets


Using Style Sheets is important to increase the web page quality.


Don't use the <font> tag!

The size, font, and color of text should be set with CSS (Cascading Style Sheets).

Do not use the HTML <font> tag!

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

Think of the following example:

One day you decide to change all the headings 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 <font> tag, you will have to edit the <font> tag for all the headings in all your web pages.

Using CSS instead of <font> makes it much easier to give all the pages of your web site 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 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.

Note: 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 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 might have difficulties reading the text.

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)

If you don't specify a background color, your text might be invisible.

Web Quality - Readability


Proper use of fonts and colors will make your website easier to read.


Mind the color contrasts

Black text on a white background, or white text on a black background, is best for people with viewing disabilities, and for display on bad equipment.

Grey text on a light background can give a poor contrast:

Grey text on a white background (#EEEEEE)

Grey text on a white background (#CCCCCC)

Grey text on a white background (#AAAAAA)

Grey text on a white background (#888888)

Grey text on a white background (#666666)

Grey text on a white background (#444444)

Grey text on a white background (#222222)

Grey text on a white background (#111111)

Grey text on a dark background can also give a poor contrast:

Grey text on a black background (#222222)

Grey text on a black background (#444444)

Grey text on a black background (#666666)

Grey text on a black background (#888888)

Grey text on a black background (#AAAAAA)

Grey text on a black background (#CCCCCC)

Grey text on a black background (#DDDDDD)

Grey text on a black background (#EEEEEE)

Some combinations - like black and red, black and blue, yellow and green - always strain the eye:

Black text on a red background


Black text on a blue background


Yellow text on a green background

And some combinations are not so bad:

Black text on a grey background


Black text on a light blue


Black text on antique white


White text on dark blue



Mind your letter spacing

Text with close letter spacing is difficult to read.

Text with extra letter spacing is easy to read.

Text with reduced letter spacing is difficult to read.


Mind your line spacing

Text with good line spacing
is easy to read

Text with reduced line spacing
is difficult to read


Avoid the fancy fonts

This font is easy to read....

This font is difficult to read....


Speak less Italian

Normal fonts are easy to read.

Italic fonts are not so easy to read.


Web Quality - Accessibility (WAI)


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 W3C, in 1997) is a set of guidelines intended for web developers, authors, and designers- about how to make the 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?

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, or images with no descriptions, these people will not be able to access your information.

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

Some 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?

To change the font size, select view - text size - in your browser menu.


Use the "alt" attribute

The alt attribute allows you to provide an alternative text for an image.


<img src="images/banana.jpg" alt="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

If you use the "alt" attribute, most browsers will at least display, or read the "alt" text.

Web Quality - Internationalization


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 character-set internally. Most documents transmitted over the Internet do not use the Unicode character-set.

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

Labeling each document with the proper character-set, is important for the quality of your web site.

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

<meta http-equiv="Content-Type" content="text/html;charset=x" />

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


International date formats

Don't use dates like "04-03-02".

The date above could mean the 2nd of March, 2004. It could also mean the 4th of March, 2002. Or even the 3rd of April, 2002.

The International Standard Organization (ISO) has defined an international 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.

No comments:

Post a Comment