The WebSquad is working
about us     portfolio       opinions       home

All companies say they have standards. We thought it would be appropriate if we placed ours on the site for clients to view and comment on.

STANDARDS, LOVE THEM OR HATE THEM, WE ALL HAVE TO LIVE WITH THEM.

The reason behind this document is to begin to standardise the methods used to design, build, develop and maintain the websites that are implemented by The Web Squad. Please note this is a living document and will be revised regularly.

Contents

CONTEXT FOR STANDARDS
STANDARD #1 - STRUCTURE & PRESENTATION
Why XHTML and not HTML?
STANDARD #2 - THE DOC TYPE
STANDARD #3 - THE DIFFERENCE BETWEEN HTML & XHTML
STANDARD #4 - USING FONTS
STANDARD #5 - VALIDATION
STANDARD #6 - BROWSERS
APPENDIX
ELEMENTS THAT HAVE BEEN DEPRECATED IN THE MOST RECENT VERSION OF HTML/XHTML, XHTML 1.0, HTML 4.01.
READING MATERIAL
STATISTICS, MORE STATISTICS AND THEN SOME LIES

CONTEXT FOR STANDARDS

There is a growing momentum across the development and design community to implement a standard set of elements that are understood by all working in the field.

More importantly, the standards have been put in place so that when a page is designed it will appear as the designer wanted it to appear.

The importance of standards is that the more people follow these, the more pressure is placed on the browser makers, particularly Microsoft, to conform to the standards.

This is no longer a matter of "if", but "when". The reasons to consider:

  1. Microsoft WILL eventually conform. Without preparation and adherence to standards, websites developed to conform to IE 6 may fall apart when IE 7 is introduced.
  2. The world has chosen IE 6 as its browser of choice. Most, if not all, major institutions use it as their default. However, other browsers such as Opera, and particularly Mozilla are starting to gain ground.
    • The fear is that a website may look great on the CEOs workstation in the office.
    • They are proud of it and want to display it to their family.
    • The site looks like shit on their son's Mozilla browser at home.
    • Who gets the blame for this? It's not the Marketing Manager or the Brand Manager, or the CEOs secretary.
  3. The world is changing to accommodate a variety of devices that can now integrate and communicate via the web. These include:
    • Laptops of various sizes
    • Mini PCs
    • Hand Held PDAs
    • TVs
    • Mobile Phone with ever increasing screen sizes
    • Internet fridges
  4. Standards and Cascading Style Sheets can be designed to accommodate the various outputs.

Back to top

STANDARD #1 - STRUCTURE & PRESENTATION

Like the construction of anything, there are two basic elements that always need to be addressed:

Structure and Presentation are our friends

We will come to love them and cherish them. You'll hear a lot about Structure and Presentation as you do a bit of reading on building web pages on the internet.

Definition: Structure is the framework that holds the page together. This is the code that sits in the background and is defined as a markup language such as HTML or XHTML. Presentation refers to the look and design of the page to the user. This is normally handled by the Cascading Style Sheet that is attached to the page.

The Structure that we use is XHTML.

The Presentation aid that we use is Cascading Style Sheets (CSS).

Back to top

Why XHTML and not HTML?

The HTML standard is basically not being looked at again. It will remain where and how it is in its current iteration of HTML 4.01.

XHTML is the next phase on from HTML. Its structure is based on XML which is fast becoming the language of the internet for the transfer of data and information.

XML is a very strict language and has definite rules that cannot be messed with. XHTML also has a strict version, but allows you some leeway in a transitional version.

Many HTML standards have been deprecated over the last few years. In the near future, standards based browsers may disregard such elements all together.

Back to top

STANDARD #2 - THE DOC TYPE

As you come back from an overseas trip, you'll often see signs that re-direct you to the line that is relevant to the passport you are holding.

Coming back into Australia, there are lines for International Passport Holders and Australian Passport holders.

Customs knows how to deal with Australian Passport holders, so the line can be processed quickly and efficiently.

With International visitors, Customs won't know how to deal with them until they arrive at the counter and see the passport they are holding.

Each country has its own quirks and requirements as does Australia. So the process is slower. Each new person may need to be processed differently.

The Doc Type, or Document Type Declaration, works in exactly the same way.

What is the Doc Type?

If you open the source code to a page and view the first line of text, you should see something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

What a Doc Type does is tell the browser how the page should be rendered and what standards to follow.

From a very good article on Doc Types, great bedtime reading.

"Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4, Internet Explorer 4 and 5. Standard mode renders a page according to W3C recommendations. Depending on the document type declaration present in the HTML document, the browser will switch into either quirk mode or standard mode. If there is no document type declaration present, the browser will switch into quirk mode."

There you have it. If you don't have the Doc Type set, the browser will treat it like someone from another country; an alien, rather than someone who is recognised.

Definition: W3C (www.w3c.org)

It stands for the World Wide Web Consortium and universally recognised as the standard bearer for Web Standards and Guidelines. If you go to the site you will see references to standards for all kinds of areas such as XHTML, XML, HTML. The site also includes validators where your page can be tested for compliant code.

Doc Types are the first building block for a compliant website. It's where every Thinking website should begin.

You can see how browsers treat a page depending on their Doc Types at this link: http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html

Doc Types we will love

There are only a few Doc Types we will need to use and should use.

1) For normal use (HTML). This should be implemented now on all Thinking sites:

Preferred for HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

Only if using Frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

2) Preferred choice (XHTML):

Preferred and to be used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

For Framed sites:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"<
<html xmlns="http://www.w3.org/1999/xhtml">

Eventually moving to a stricter version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

Doc Type Templates from Web Standards project
http://webstandards.org/learn/templates/
http://webstandards.org/learn/reference/
http://webstandards.org/learn/reference/common_ideas.html

Back to top

STANDARD #3 - THE DIFFERENCE BETWEEN HTML & XHTML

What is the difference between the two languages and how difficult is it to implement?

We will be using a "Transitional" Doc Type, so the differences are minimal, but there are some rules that we will adhere to. The main differences are outlined in the W3C Guidelines and can be found here: http://www.w3.org/TR/xhtml1/#diffs

In principal the main differences are:

DocType, html, Head, title, body,

Back to top

STANDARD #4 - USING FONTS

Most designers and developers on the web come from a print background and then take that across to the development of sites.

10, 12, 18 pts mean something in a printed document, but could mean something quiet different on a web page.

At first the thought was to change all "pts" over to "px". And this became the standard for a while for many designers.

However, the problem with this is that a pixel is a defined space on a screen and it can change depending on the screen resolution that you have.

A pixel looks very different if you look at a screen set to 800 x 600 as compared to 1600 x 1200.

So the feeling changed.

The new thinking is to use the default in browsers. They are set to a given font size which is roughly equivalent to a 16pt size. So the idea is to use this size.

What's the plan, Stan?

The basic way to implement this is through your CSS style sheet. Your body should have a value for font-size which equals 100%. This will draw on your browser setting.

All other elements that cater for font size then become a percentage of this.

So a good reading size is around 76%.

A good small text size is around 65%.

I hope you get the picture and see how this would then cater beautifully for all screen resolutions.

This works for me.

Another very good way of doing it is to use "ems" as the unit of measure. And Owen Briggs has found a very nice way of doing just that in his article. http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html

It's very simple and very effective. He even has 264 screen shots to prove his case. What a patient man.

Back to top

STANDARD #5 - VALIDATION

There is a lot of validating that occurs at Thinking before a site is launched or just before major changes are sent live. Validation contains the following processes:

  1. CSS validation (http://www.w3.org/QA/Tools/#validators)
  2. XHTML Validation (http://www.w3.org/QA/Tools/#validators)
  3. Use HTML tidy (http://www.w3.org/People/Raggett/tidy/)
  4. Use Bobby to test accessibility issues
  5. Use WebExact for single page test. It's a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues
  6. Use WebQA for links, accessibility and quality issues

All results should be printed out with the settings showing that tests proved successful. In most cases, this should be provided in a document along with a CD of the site as launched to the client.

Back to top

STANDARD #6 - BROWSERS

The following stats come from this link. It is the information that Yahoo uses to comment on browsers. www.w3schools.com/browsers/browsers_stats.asp

Browser Stats

2004 IE 6 IE 5 O 7 Moz NN 3> NN 4 NN 7
June 72.8% 8.9% 2.2% 11.2% 0.3% 0.3% 1.4%
May 72.6% 9.2% 2.2% 11.0% 0.3% 0.3% 1.4%
April 72.4% 10.1% 2.1% 10.3% 0.3% 0.3% 1.4%
March 72.1% 10.7% 2.1% 9.6% 0.4% 0.4% 1.4%
February 71.5% 11.5% 2.2% 9.0% 0.4% 0.4% 1.5%
January 71.3% 12.8% 2.1% 8.2% 0.4% 0.5% 1.5%
               
2003 IE 6 IE 5 O 7 Moz NN 3 NN 4 NN 7
November 71.2% 13.7% 1.9% 7.2% 0.5% 0.5% 1.6%
September 69.7% 16.9% 1.8% 6.2% 0.6% 0.6% 1.5%
July 66.9% 20.3% 1.7% 5.7% 0.6% 0.6% 1.5%
May 65.0% 22.7% 1.4% 4.6% 1.0% 0.9% 1.4%
March 63.4% 24.6% 1.2% 4.2% 0.9% 1.1% 1.4%
January 55.3% 29.3%   4.0% 1.2% 1.7% 1.1%
               
2002 IE 6 IE 5 IE 4 AOL NN 3 NN 4 NN 5+
November 53.5% 29.9%   5.2% 1.1% 2.0% 4.9%
September 49.1% 34.4%   4.5% 1.3% 2.2% 4.5%
July 44.4% 40.1% 0.5% 3.5% 1.2% 2.6% 3.5%
May 40.7% 46.0% 0.7% 2.8% 1.2% 3.4% 2.7%
March 36.7% 49.4% 0.7% 3.0% 1.2% 4.1% 2.4%
January 30.1% 55.7% 1.0% 2.8% 1.3% 4.4% 2.2%

From this, I think we can assume that:

Back to top

APPENDIX

ELEMENTS THAT HAVE BEEN DEPRECATED IN THE MOST RECENT VERSION OF HTML/XHTML, XHTML 1.0, HTML 4.01.

It is important to note that HTML 4.01 is the final iteration of this standard. There is no further development happening. This does not mean it will just disappear, it will continue to be used for many years to come.

This information is taken from: http://webdesign.about.com/library/tags/bltags-deprecatedtags.htm

Deprecated Elements

<applet></applet>

The applet element has been deprecated in favour of <object></object>.


<basefont />

The basefont element has been deprecated in favour of style sheets.


<blackface></blackface>

The blackface element is a WebTV (MSN TV) element that has been deprecated in favour of style sheets.


<blockquote></blockquote>

The blockquote element is deprecated in favour of style sheets when used to indent text.


<center></center>

The center element has been deprecated in favour of style sheets.


<dir></dir>

The dir element has been deprecated in favour of <ul></ul>.


<embed />

The embed element has been deprecated in favour of <object></object>.


<font></font>

The font element has been deprecated in favour of style sheets.


<i></i>

The i element has been deprecated in favour of style sheets.


<isindex />

The isindex element has been deprecated in favour of the input element and CGI forms.


<layer></layer>>

The layer element has been deprecated in favour of style sheets.


<menu></menu>

The menu element has been deprecated in favour of <ul></ul>.


<noembed></noembed>

The noembed element has been deprecated in favour of <object></object>.


<s></s>

The s element has been deprecated in favour of style sheets.


<shadow></shadow>

The shadow element has been deprecated in favour of style sheets.


<strike></strike>

The strike element has been deprecated in favour of style sheets.


<u></u>

The strike element has been deprecated in favour of style sheets.

Deprecated Attributes

alink

The alink attribute defines the colour of an active link on the Web page. It has been deprecated in favour of style sheets.

align

Used to align elements vertically and horizontally on the document page, the align attribute has been deprecated in favour of style sheets.

background

The background attribute is used to define a background image for the element. It has been deprecated in favour of style sheets.

border

Used to define a border around the element, the border attribute has been deprecated in favour of style sheets.

colour

Used to define the colour of the enclosed text, the colour attribute has been deprecated in favour of style sheets.

compact

The compact attribute is used in list tags to create a list that takes up less space. It has been deprecated in favour of style sheets.

face

Used to define the font face of the enclosed text, the face attribute has been deprecated in favour of style sheets.

height

Used to define the height of the element, the height attribute has been deprecated in favour of style sheets.

language

The language attribute is used to define the language used by the script element. It has been deprecated in favour of the type attribute.

link

The link attribute defines the colour of a link on the Web page. It has been deprecated in favour of style sheets.

name

The name attribute names the element for use with dynamic content; it has been deprecated in favour of the id attribute.

noshade

The noshade attribute removes the 3-D effect from horizontal rules. It has been deprecated in favour of style sheets.

nowrap

Used to stop table contents from wrapping, the nowrap attribute has been deprecated in favour of style sheets.

size

Used to define the size of the enclosed text, the size attribute has been deprecated in favour of style sheets.

start

The start attribute of list tags defines the starting number of the list. This attribute has been deprecated in favour of style sheets.

text

The text attribute defines the colour of the text on the Web page. It has been deprecated in favour of style sheets.

type

The type attribute of list tags defines what type of list should be used. This attribute has been deprecated in favour of style sheets.

value

The value attribute of list tags sets the value of the list item. This attribute has been deprecated in favour of style sheets.

version

The version attribute defines the version of HTML used by the document. It has been deprecated in favour of DTDs.

vlink

The vlink attribute defines the colour of a visited link on the Web page. It has been deprecated in favour of style sheets.

width

The width attribute defines the width in pixels of the element. It has been deprecated in favour of style sheets.

Back to top

READING MATERIAL

XHTML

Better Living Through XHTML
http://www.alistapart.com/articles/betterliving/

Forgiving Browsers considered Harmful
http://www.alistapart.com/articles/forgiving/

Fix your site with the Right Doc Type
http://www.alistapart.com/articles/doctype/

The differences between XHTML and HTML from the Standards Group
http://www.w3.org/TR/xhtml1/#diffs

Some common validation errors in XHTML
http://www.blackwidows.org.uk/resources/tutorials/xhtml/common-errors.html

CSS

An excellent article that links to a number of great CSS resources
http://www.456bereastreet.com/lab/developing_with_web_standards/

A number of articles on CSS at A List Apart
http://www.alistapart.com/topics/css/

A good article on printing via a Style sheet
http://www.alistapart.com/articles/goingtoprint/

Designing page Elements with CSS
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

CSS Panic Guide (A Guide for the Unglued)
http://www.thenoodleincident.com/tutorials/css/

Position is Everything (Good CSS Reference)
http://www.positioniseverything.net/index.php

CSS Layout Techniques for fun and profit
http://www.glish.com/css/

3D CSS Box Model (very interesting)
http://www.hicksdesign.co.uk/journal/2004/05/3d_css_box_model/

Designs using CSS

Web Standards Awards
http://www.webstandardsawards.com/

CSS Zen Garden (Beautiful site showing the power of CSS)
http://www.csszengarden.com/

Airbag Industries
http://www.airbagindustries.com/

A Powerpoint article on why tables shouldn't be used anymore
http://www.hotdesign.com/seybold/05killer.html

Standards in General

W3C Group
Http://www.w3c.org

The Web Standards Project
http://webstandards.org/

Creating Accessible HTML/XHTML Forms
http://webstandards.org/learn/tutorials/accessible-forms/03-accessible-forms.html

What the W3C believes you should do to be Compliant
http://www.w3.org/QA/2002/04/Web-Quality

Fighting for Standards. An article from the Web Standards Group
http://www.w3.org/QA/2002/04/Web-Quality

What are Web Standards and why they should be used.
The Web Standards Group http://webstandards.org/learn/faq/

The business benefits of Web Standards
http://devedge.netscape.com/viewsource/2003/why-web-standards/

Web Standards for Business
http://webstandards.org/learn/reference/web_standards_for_business.html

Back to top

STATISTICS, MORE STATISTICS AND THEN SOME LIES

OS Platform Statistics

Current trend is that Windows XP is growing fast. The windows family counts for more than 90%:

2004 Win XP W2000 Win 98 Win NT Win 95 Linux Mac
May 51.0% 29.3% 8.2% 2.0% 0.3% 2.9% 2.5%
April 49.7% 30.2% 8.7% 2.2% 0.3% 2.7% 2.5%
March 48.0% 31.1% 9.4% 2.4% 0.4% 2.6% 2.4%
February 46.0% 32.8% 9.5% 2.9% 0.4% 2.6% 2.5%
January 44.1% 33.6% 10.4% 3.0% 0.4% 2.7% 2.4%
               
2003 Win XP W2000 Win 98 Win NT Win 95 Linux Mac
December 42.6% 35.2% 10.5% 3.4% 0.4% 2.7% 2.3%
November 42.6% 36.3% 10.9% 3.5% 0.4% 2.6% 2.2%
October 39.4% 37.8% 11.5% 4.0% 0.5% 2.5% 2.1%
September 38.0% 37.9% 12.1% 4.1% 0.5% 2.4% 2.0%
August 36.3% 39.9% 12.6% 4.6% 0.5% 2.4% 2.0%
July 33.9% 40.6% 12.6% 5.3% 0.6% 2.3% 1.9%
June 32.8% 40.4% 13.4% 5.4% 0.6% 2.3% 1.8%
May 31.4% 41.0% 13.9% 5.8% 0.7% 2.2% 1.8%
April 30.8% 40.9% 14.7% 6.0% 0.7% 2.1% 1.8%
March 29.1% 41.9% 14.8% 6.6% 0.8% 2.2% 1.8%

Display Resolution

The current trend is that more and more computers are using a screen size of 1024x768 pixels:

2004 Higher 1024x768 800x600 640x480 Lower
January 10% 47% 37% 1% 5%
2003          
October 9% 45% 40% 2% 4%
July 8% 43% 44% 2% 5%
April 7% 41% 46% 2%     4%
January 6% 40% 47%     2% 5%
2002            
October  6% 38% 49% 2% 5%

Web developers be aware: Many users still have only 800x600 display screens.

Colour Depth

The current trend is that more and more computers use 24 or 32 bits hardware to display 16,777,216 different colours:

2004 Higher 1024x768 800x600 640x480 Lower
January 10% 47% 37% 1% 5%
2003          
October 9% 45% 40% 2% 4%
July 8% 43% 44% 2% 5%
April 7% 41% 46% 2%     4%
January 6% 40% 47%     2% 5%
2002            
October  6% 38% 49% 2% 5%

Older computers and laptops often use 16 bits display hardware. This gives a maximum of 65,000 different colours.

Handheld computers (and very old computers) often use 8 bits color hardware. This gives a maximum of 256 colours.

Java Script Statistics

There are no absolute trends about the use of Java Script. Some users have scripting turned off. Some browsers don't support scripting:

2004 Java Script On Java Script Off
January 92% 8%
2003    
October 90% 10%
July 89% 11%
April 90% 10%
January 89% 11%
2002    
October 88% 12%

Statistics can often be misleading

You cannot - as a web developer - rely only on statistics. Statistics can often be misleading.

Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, other sites attract hobbyists using older low spec computers. Design focus sites would have a large Mac population.

Also be aware that many stats may have an incomplete or faulty browser detection. It is quite common by many web stats report programs, not to detect new browsers like Opera and Netscape 6 or 7 from the web log.

(The statistics above are extracted from W3Schools' log-files, but they are also monitoring other sources around the Internet to assure the quality of these figures)

Back to top

  • Standards keep you healthy, flexible and wise
  • Work hard, work well and go home happy
  • The tools we deliver
  • Maintain yourself today you'll be better placed tomorrow