Standards

The Web

DocType DOM javaScript css 508 Associations
Web standards are the tools with which all of us can design and build sophisticated, beautiful sites that will work as well tomorrow as the do today. Jeffrey Zeldman
Initially there were not any web standards. This forced web designers to resort to a variety of tactics. There was a time when you arrived at some sites to find a notice declaring that the experience would be better if you used a particular browser. There was also browser-sniffing, a technique used to determine the particular browser and then serve browser specific content. The latter forced designers to create more than one site which added to the cost and frustration.

browser wars

The browser Netscape was released in 1994. Netscape supported all of the HTML2 elements and quickly introduced a number of design elements along with javaScript. Netscape took off rapidly and had the lion's share of the browser market until 1997. Internet Explorer was released in 1995, immediately both Netscape and IE started to jockey for the top spot by rapidly introducing new features and technologies often at the expense of standards. Within a few years IE became the most popular browser, it had the edge not necessarily in terms of technology but because of distribution, it was shipped as part of Windows. IE won the war but inconsistencies would still continue. New browsers would be released in the next decade which would once again emphasis that users would not get the exact same experience across all browsers.

css / tables

CSS, Cascading Style Sheets were proposed in 1994 and became a W3C recommendation in 1996. It would be some time before most browsers complied entirely. Another problem was that Tables (being used for layout) had already taken hold and it would be years before many designers made the switch and unfortunately some never did. Opera was one of the first Browsers to support CSS but although Opera is considered to be a very good browser it has never captured a large audience.

accessibility

Many websites are used by individuals with disabilities which also pinpoints the importance of adhering to web standards. The assisted technology use by these individuals relies on perfect compliance with standards. Section 508 specifies that individuals with disabilities must have the same access to technology as everyone else.

associations

The lack of compliance to web standards, and also the direction the web should take, has been addressed and is still being addressed by a number of associations and individuals.

arrowDown

DOM


Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by some tools processing the document. W3C

identifying the document

The Doctype which is placed at the top of the page, (in order for it to work nothing should be placed above it, not even a comment) is used to identify the document as (X)HTML or XML  which in turn implies that it meets certain standards. The Doctype was introduced with HTML 2.0 in 1995. In 1997 HtML4 was released, it had 3 different specifications which were:

  • Strict: Did not allow any deprecated element or frames
  • Transitional: excludes only frames
  • Frameset: which allows almost anything


Now there were standards, the main problem for the browsers was how to display non-standard html. If the browser strictly inforced the new standards then many older websites would not display correctly. This lead to the development of Doctype Switching.

doctype switching

With the release of IE5 for the Mac, programmers found a way for the older none standards' websites to still work. If the Doctype specified one of the new specifications the browser would render the HTML in Standards Mode. If not it would render in Quirks Mode. Here is a list showing the different DocTypes and which browser triggers which mode. There was also an additional mode class Almost Standard Mode. Almost Standard was to address a problem of sizing of table cells and whitespace. This problem lay with some browsers. There was also a major problem in the way Internet Explorer interpreted the box model. The standard for the box model is for the padding to add to the size of the space used by the box. For example:
.box{
width: 500px;
padding: 20px;
}
The space required for this box would be 540px wide. All browsers used this standard except IE. For IE the space used would always be 500px. After adding the padding the area for the content would be reduced. Internet Explorer 6 and 7 could only work in the Almost Standard Mode. Unfortuately when IE8 was released there were more problems. Pages originally created for IE6 and 7 did not display correctly in IE8. More work arounds had to be made.

Click here for current list of Doctypes

DOM


The Document Object Model is a platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. w3c

the dom

The DOM, Document Object Model is a programming interface for HTML and XML documents.

The DOM standards are defined by W3C specifications.

The DOM provides a structured representation of the elements (objects) in html and xml documents, and how they relate to each other. These objects can then be manipulated within the page by the user without accessing the server.

The DOM allows the interactivity of a scripting language such as javaScript. 

All browsers use a DOM in-order to allow scripting languages to interact with elements within the web page, but not all comply with all of the DOM standards defined by the W3C specifications.


In 1998 W3C met with the browser companies to work on a standardize DOM in the hope that this standard would be used by all. It provided a complete model for an entire html or xml document but although web browser companies adopted these standards for the most part, they still did not completely conform to this recommendation for a number of years. By 2005 large parts were supported by most browsers but still not completely supported by all. Support gets better every year.

The DOM was written as a set of levels but by 2013 is decribed as The DOM Living Standard.
DOM Level 1 was recommended by W3C, 1998
DOM Level 2, 2000.
DOM Level 3, 2004
DOM Level 4 working draft
DOM Living Standard. 2013

javaScript


Brendan Eich created javaScript, which was originally named LiveScript. It was first released with the beta version of Netscape Navigator 2.0 in September 1995.


javascript

JavaScript is a scripting language designed primarily for adding interactivity to Web pages. Its scripts can be included within the html. It allows for user manipulation of content without the need of reloading the page, this is known as Client-Side scripting (there is also Server-Side javaScript).

internet explorer, netscape different scripts

Internet Explorer had its own version of javaScript called jScript which was included in IE3 and released August 1996. One of the main problems in the beginning was that Netscape and Internet Explorer each had a different scripting language which were not compatible. This was ONE of the reasons that many web designers created at least two different versions of each web site.


standardization

The World Wide Web Consortium (W3C) got together with Netscape Communications and Microsoft along with other companies to develop a standard for scripting languages called ECMA. The first standard was published in 1997. Later versions of javaScript and jScript implemented the ECMAScript standard. Although ECMAScript is being used it is still commonly called javaScript.
ECMA International


CSS


CSS, Cascading Style Sheets, is a style sheet language. The main purpose of CSS is to separate the style from the structure of the html page which improves accessibility and provides more control.

Originally there were not any style sheets for html but even from the beginning there had been the intent to introduce them. When Tim Berbers-Lee wrote his browser/edition (for NeXT computer) it included a simple style sheet. Pei-Yuan Wei introduce the browser Viola in 1992 which included in-line graphics, scripting, tables, and a style sheet. In 1993 Mosaic, the browser that thrust the web into the limelight, came out, this led to Netscape which introduce some styling elements within the page. There were other style sheets, among them was one from Robert Raisch of Reilly Publishing which had been written in 1993.

tables

Very early-on designers discovered that they could subvert Tables for the layout of the web page which lead to aesthetics taking precedence over accessibility. The mark-up became more and more complex. Designers created complicated table structures. Images were sliced to fit into these structures. Tables were nested into cells often to the point of breaking the entire design. Even after a solution, (CSS) had been implimented many designers still stuck to Tables for their layout. It would take years to change this course and unfortunatly even today some designers still cling to Tables. Today if designer wants to create sites that meet with web standards (and they should) then Tables are only to be used for tabular data.

css

first draft of Cascading HTML Style Sheets

Håkon Wium Lie wrote the proposal for CSS which came out in October 1994 right before the first version of Netscape. He presented it at a Web Conference in November 1994. The following year CSS was presented again and at this time Bert Bosb also presented style sheets. At this time there were a number of possiblities, but CSS took into account that on the Web the style of a document couldn't be designed by either the author or the reader on their own, but that their wishes had to be combined, or 'cascaded,' in some way; and, in fact, not just the reader's and the author's wishes, but also the capabilities of the display device and the browser w3c . Some wanted a complex programming language and felt that CSS was too simple. It was simplicity that would win out in the end. Designers would be able to create beautifull presentations without having to first learn a programing language. Håkon Wium Lie along with Bert Bosb, developed CSS1 which became a W3C Recommendation  in 1996. Håkon W Lie along with Bert Bos wrote the book: Cascading Style Sheets, Designing for the Web.

separate the styles from the stucture

The main purpose of CSS is to separate the styles from the structure of the page. This separation can improve content accessibilty and provides more control. In addition:
  • Css allows multiply pages to share the same styles.
  • Css allows for different types of styles (Media Types) and rendering methods.
  • Css allows for different styles (Media Queries) depending upon the size or the device on which the page is viewed.

the cascade

Cascade Rules

A key feature of CSS is that style sheets can cascade. That is, several different style sheets can be attached to a document and all of them can influence the document’s presentation. In this way, an author can create a style sheet to specify how the page should look, while a reader can attach a personal style sheet to adjust the appearance of the page for human or technological limitations, such as poor eyesight or a personal preference for a certain font. Håkon W Lie and Bert Bosb

cascade rule one

Sort by Importance
Find all the declarations that apply to each selector. As each page loads the browser checks every element on the page to see if a rule matches it.

If there are any conflicts in your css, there is an order of importance in which some selectors are more important than others:
  • an ID will win out over a class
  • a class will win out over a tag

cascade rule two

Sort by weight
The styles are checked in the following order, each subsequent style sheet has a greater weight than the previous.
  • Default: Browser
  • User: Style Sheet
  • Author: Style Sheet - Linked
  • Author: Style Sheet - Embedded in the head of the web page
  • Author: Style Sheet - Inline within the body of the web page
The information in the Inline style sheet would have the most weight.

cascade rule three

Sort by Specificity
  • Determines how specific the selector is.
The most specific has the most weight.

standards support


Opera 3.5* which was released in 1998 was the first browser that had almost total CSS1 support. At that time Netscape 4 and IE4 had recently been release but their support for CSS1 was limited at best. In March 2000 IE5 for the Mac was released and was considered the best IE browser so far when it came to meeting standards, but far from perfect. Here is A List Apart article on IE5 for the Mac. Netscape eventually left the scene but for years there were problems with IE's interpretation of CSS, one of the main problem was how it displayed the box model which was different than any other browser, the space used for the box remained the same as the width it did not change when padding was added and the space for the content was reduced.

internet explorer

Browers were reviewed in 1998 and the following are some of the problems that were found with Internet Explorer's compliance with the standards. This should give you some idea of what web designers were up against.
The Box Model
Display Properties
Float and Clear
Alternative Style Sheet
Inhertance with tables
Tiled Backgrounds
Pseudo elements
White Space
Vertical Align


*Opera was not free in the beginning which probably accounts for why it was not popular. Free versions were issued in 2000 which included sponsored ads. Opera's popularity would start to grow.

zen garden

http://www.csszengarden.com
The website Zen Garden created by Dave Shea came out in 2003. This site encourages designers to use CSS and submit a web page to be used as an example on the Zen Garden site. The only requirement was that all sites would contain the same html and use standards compliant CSS. For the first time many web designers they were able to experience the power of CSS. This site play a large part in pushing designers to use CSS. There is also the Zen Garden book which was released in 2005.

browsers

The first major version of Firefox was release in 2002 and Safari in 2003. Chrome was not release until 2008. These browsers were more standards compliant but for the rest of this decade there would be some juggerling to get a site to be display pretty much the same in all browsers.

 

reset

Today there are still minor differences between browsers and one way to reduce these inconsistancies is to use a reset for your CSS. The reset deals mainly with margins, padding and border widths (browsers can have a different default for these elements) so that you can start from scratch at zero but other elements can be added. Eric Meyers created a reset which you can find here, this one is used by the majority of web designers. The first known reset was Tantek Çelik’s UndoHTML.css, which he created in 2004.


508

... Section 508 requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency. www.section508.gov


law-suites

Although originally Section 508 only applied to federal agencies there is now an expectation that its requirements extend far beyond the government. There have been a number of law-suites against companies whose websites were not Section 508 compliant one of the most prominent cases was The National Federation for the Blind vs Target.

Regardless of your client or expected user you should make sure that your project complies with Section 508 standards.

jaws

JAW is a screen reader that allows blind and visually impaired users to read the screen.
Video: Aaron Cannon giving a demonstration of JAWS, Job Access With Speech which shows the important of using the correct Headings <1> - <6>.

See test for JAWS

excerpted standards from section 508

The following standards are excerpted from Section 508 of the Rehabilitation Act.
The information in the right two columns is not part of the official Section 508 document and is given as a guideline only.

Section 508 Description
Documents shall be organized so they are readable without requiring an associated style sheet. Organization of information within the code Place the information in the code in a logical sequence so that the information will make sense when read from top to bottom.
Style sheets can be used but the web page still needs to be understandable without the style sheet.
A method shall be provided that permits users to skip repetitive navigation links. Skip repetitive navagation links This provides users with assisted technology to skip the repetitive navigation links that appear at the top or side of the page and go straight to the content.

As this link is included only to be used by screen-readers it does not have to be visible.

Create a link at the top of the page and link it to an anchor that is below all of the navigation, advertistments etc and directly before the main contant.

 

A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. Other content that is not accessible to users with disabilities You are required to create a text-only version.
You are required to up-date this version whenever you update the main version
When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assisted technology. scripts All scripts (e.g. Javascript) are either directly accessible to assisted technologies and the keyboard or an alternative method of accessing equivalent functionality is provided (e.g. a standard link). OR Information within the script is text based.
Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. Headings , titles, sub-headers Use Heading to show hierarchy.
Must use at least <h1> for the title of the page. Must use <h2> for the title of each paragraph section. Use other <h3> - <h6> when necessary

Use color only as decoration and not to emphasis a concept, point, etc or importance.
Use <strong> or <emphasis>
to make a point. But not for titles and subtitles.
Row and column headers shall be identified for data tables. tables

Tables: Row and Column titles must be identified using, the <th> tag

When electronic forms are designed to be completed on-line, the form shall allow people using assisted technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. FORMS All form elements must have text labels which are associated with them in the markup. : labels, id,
Frames shall be titled with text that facilitates frame identification and navigation. Frames Give a title to each frame which describes its purpose and/or content
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. Flicker, which can cause seizures There cannot be any elements on the page that flicker at a rate of 2 to 55 cycles per second.
Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. Image Maps Client-side image maps are used and appropriate alt text is provided for the image as well as each hot spot region.
Redundant text links shall be provided for each active region of a server-side image map.

Server-side image map: You need to provide separate text links in addition to the server side map. Cannot use client-side image map as the replacement.

A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content). Image Must include an “alt” tag with a description that conveys the content.

Flash
Video
Audio
Graphs
Charts
JavaApplet
A detailed text description needs to be included either in the body of the of the page or you need to include a link to a separate page that has a detailed description. Or longdesc, attribute alt.
A method shall be provided that permits users to skip repetitive navigation links. Skip repetitive navigation links This provides users with assisted technology to skip the repetitive navigation links that appear at the top or side of the page and go straight to the content.

As this link is included only to be used by screen-readers it does not have to be visible.
Create a 1 pixel by 1 pixel gif with a transparent background.

Create an anchor on the page directly above your main content: <a name=”skip” id="skip"></a>

Place the link directly under “body” (it needs to be in a div. <a href=”#skip id="skip"”><img src=”blank.gif” width=”1″ height=”1″ border=”0″ alt=”skip navigation and go to content” /></a>
These are just some of the main points.
This page is only an introduction to Section 508 visit: http://www.section508.gov/index.cfm?fuseAction=stdsdoc for more information.

supporting standards


There are a number of individuals and associations that have organized to promote web standards and influence the evoluation of the web. Below are some of the main ones.


associations

1994 - w3c

http://www.w3.org/standards
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. w3c


1998 - the web standards project (WaSP) 

http://www.webstandards.org
List of members
Founded in 1998, The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. We work with browser companies, authoring tool makers, and our peers to deliver the true power of standards to this medium. WaSP


2004 - whatwg community

http://www.whatwg.org
The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications. The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organizations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born. whatwg


books

Designing with Web Standards

There have also been a number of books on web design and standards but the one that stands out the most and seems to have had a direct result on designers adhering to web standards is Designing with Web Standards by Jeffrey Zeldman first publish in 2003. The third addition, 2009 was written in collaboration with Eric Meyers.


Zen Garden

The Zen Garden was released in 2005. For more information see below under websites.

websites

A List Apart
By far one of the most important websites to influence web designers is A List Apart which explores the design, development, and meaning of web content, with a special focus on web standards and best practices List.
Jeffrey Zeldman founded the site in 1998 and is the Executive Creative Director

http://www.csszengarden.com
The website Zen Garden created by Dave Shea came out in 2003. This site encouraged designers to use CSS. This site played a large part in pushing designers to use CSS.





timeline

Year event
1991

www online
WWW went Online
The WWW program was developed between 1989 and 1990 by

Tim Berners-Lee and it went Online in 1991.

1992 www online
Pei-Yuan Wei"s introduce the browser Viola in 1992 which included in-line graphics, scripting, tables, and a style sheet
1993 Marc Andreessen
Mosaic Browser
Mosaic Browser Released, which was created by Marc Andreessen and a team of students from NCSA at the University of Illinois.
1994 Tim Berners-Lee
W3C Founded
Tim Berners-Lee founded the World Wide Web Consortium, (W3C) at the Massachusetts Institute of Technology, in collaboration with CERN, with support from DARPA and the European Commission
1994

Hakon - CSS
CSS
Håkon W Lie proposes the Cascading HTML Style Sheets language.

1996 CSS

Håkon Wium Lie along with Bert Bosb, developed CSS1 which became a W3C Recommendation  in 1996.
1996

CSSInternet Explorer was the first browser to support CSS and this was before Lie's recommendation.

But this support was limited and there were some major problems with some elements. Web Designers would be struggling with this for a long, long time. Way more than a decade.

1996 nsfnet
Doctype
Todd Fahrner proposed using the DOCTYPE of an HTML document as the basis for deciding whether a browser should implement a strictly standards based approach to rendering a page.
1997 nsfnet
javaScript
Standardization of javaScript begins. Netscape submits JavaScript to ECMA International for standardization
1997 nsfnet
Internet Explorer
Microsoft released its first browser, Internet Explorer, which was based on source code licensed from Spyglass, itself derived from NCSA Mosaic.
1997 nsfnet

Netscape 4
It featured CSS support
1997

nsfnet
Html 3 - 4
HTML 3.2 was the first version developed and standardized by the W3C.

1998 nsfnet
DOM Level 1 was recommended by W3C, 1998
DOM Level 2, 2000.
DOM Level 3, 2004
DOM Level 4 working draft
DOM Living Standard. 2013
1998 nsfnet
Opera 3.5
Opera 3.5 was the first browser that had almost total CSS1 support.
1998 nsfnet
CSS 2
CSS2 introduced a large number of new features.
1998 nsfnet
The Web Standards Project (WaSP)
WaSP fights for standards that reduce the cost and complexity of development.
1998

nsfnet
A List Apart
A List Apart is publish which is by far one of the most important websites to influence web designers.

Founded by Jeffery Zeldman

2000 nsfnet
Section 508
Federal Law which requires that all technology created for the Federal Government must be accessable to all who have disabilitities.
2003 nsfnet
Designing with Web Standards
Designing with Web Standards stands out and seems to have had a direct result on designers adhering to web standards. Author: Jeffery Zeldman
2nd edition written joinly with Eric Meyers was published in 2009.
2003

nsfnet
ZenGarden
The Zen Garden website encouraged designers to use CSS. This site played a large part in pushing designers to use CSS. Founded by Dave Shea.
A book by the same name came out in 2005

2004 nsfnet
WHATWG Community
The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web.