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:
- 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.
- 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.
- 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
- Standards and Cascading Style Sheets can be designed to accommodate the various outputs.
STANDARD #1 - STRUCTURE & PRESENTATION
Like the construction of anything, there are two basic elements that always need to be addressed:
- Structure
- Presentation
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).
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.
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
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:
- XHTML elements must be properly nested
<p>Hello there <b>Honey</p></b>
is a no, no. It would work in HTML Transitional, but not here - XHTML documents must be well-formed
A well formed document has all the right
<html><body></body></html>
tags so that there is a definite beginning and end to the document. - Tag names must be in lowercase
<BODY> = no, <body> = yes</li>
- All XHTML elements must be closed
In HTML 4.01, you could leave a tag open such as:<p>Hello there, big boy. <p>How are you today?
This is incorrect. Even a tag needs closure:<p>Hello there, big boy.</p> <p>How are you today?</p>
This is correct. - No such thing as an empty tag
<br> and <hr>
are empty tags and its okay to write them as such in HTML. In XHTML, they need to be closed. You can write this:<hr></hr>
Or a better short cut is:<br />
<hr />
(There is a space between the end of the tag and the closing forward slash and ">" symbol.) - Attribute names must be in lower case
Like tags, everything in XHTML should be written in lowercase (eg:<table WIDTH="255px"
should be:<table width="255px"
- Attribute values must be quoted
Taking the above example you could write:<table width= 255px
But now it should be:<table width="255px"
Quotation marks should enclose all values. - The id attribute replaces the name attribute
Incorrect:<img src="picture.gif" name="picture1" </>
Correct:<img src="picture.gif" id="picture1" </>
or<form action="page.asp" name="form1"
(should be)<form action="page.asp" id="form1"
- The XHTML mandatory elements. This is the minimum that a properly formed XHTML document MUST have.
<!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> Body text goes here </body> </html>
DocType, html, Head, title, body,
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.
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:
- CSS validation (http://www.w3.org/QA/Tools/#validators)
- XHTML Validation (http://www.w3.org/QA/Tools/#validators)
- Use HTML tidy (http://www.w3.org/People/Raggett/tidy/)
- Use Bobby to test accessibility issues
- 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
- 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.
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:
- Netscape is a big goner.
- IE 5 is disappearing fast, which is lucky as it wasn't a very compliant browser
- Mozilla is growing fast, which is refreshing as it is the most Web Standards compliant browser at the moment
- Mac OS is less than 3% of the market. However, it is obviously important when working with design studios.
- Opera is a very good browser for anyone that has used it. Although little or no significance as far as usage.
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.
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
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)
