Lean and clean! Building a site with web standards 1. What are web standards? "Web standards are intended to be a common base ... a foundation for the world wide web so that browsers and other software understand the same basic vocabulary ". Eric Meyer Who sets the webstandards? The World Wide Web Consortium (W3C) and other standards bodies have established technologies for creating and interpreting web-based content. These 'web standards' are carefully designed to: deliver the greatest benefits to the greatest number of web users ensure the long-term viability of any web document simplify code and lower the cost of production deliver sites that are accessible to more people and more types of Internet devices continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market

1. What are web standards?

"Web standards are intended to be a common base ... a foundation for the world wide web so that browsers and other software understand the same basic vocabulary ". Eric Meyer

Who sets the webstandards?

The World Wide Web Consortium (W3C) and other standards bodies have established technologies for creating and interpreting web-based content. These 'web standards' are carefully designed to:

deliver the greatest benefits to the greatest number of web users

ensure the long-term viability of any web document

simplify code and lower the cost of production

deliver sites that are accessible to more people and more types of Internet devices

continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market

Lean and clean! Building a site with web standards 2. The web standards Structural Languages Extensible Hypertext Markup Language (XHTML) 1.0 XHTML 1.1 Extensible Markup Language (XML) 1.0 Presentation Languages Cascading Style Sheets (CSS) Level 1 CSS Level 2 CSS Level 3 Object Models Document Object Model (DOM) Level 1 (Core) DOM Level 2 Scripting Languages ECMAScript 262 (the standard version of JavaScript) Additional Presentation Languages (Markup) Mathematical Markup Language (MathML) 1.01 MathML 2.0 Scalable Vector Graphics (SVG) 1.0

2. The web standards

Structural Languages

Extensible Hypertext Markup Language (XHTML) 1.0

XHTML 1.1

Extensible Markup Language (XML) 1.0

Presentation Languages

Cascading Style Sheets (CSS) Level 1

CSS Level 2

CSS Level 3

Object Models

Document Object Model (DOM) Level 1 (Core)

DOM Level 2

Scripting Languages

ECMAScript 262 (the standard version of JavaScript)

Additional Presentation Languages (Markup)

Mathematical Markup Language (MathML) 1.01

MathML 2.0

Scalable Vector Graphics (SVG) 1.0

Lean and clean! Building a site with web standards 3. What are the benefits of using web standards? Benefits for you: Less code means sites are easier to maintain Less browser specific coding - compatible with current browsers Less revisiting of old sites - compatible with future browsers Benefits for your audience: Less code means sites are faster downloads More accessible - will work in a wider variety of user agents

3. What are the benefits of using web standards?

Benefits for you:

Less code means sites are easier to maintain

Less browser specific coding - compatible with current browsers

Less revisiting of old sites - compatible with future browsers

Benefits for your audience:

Less code means sites are faster downloads

More accessible - will work in a wider variety of user agents

Lean and clean! Building a site with web standards 4. What do standards mean to web developers? Web designers and developers should be aim to build sites that use: Semantic markup Valid code Accessible code Separation of style from content

4. What do standards mean to web developers?

Web designers and developers should be aim to build sites that use:

Semantic markup

Valid code

Accessible code

Separation of style from content

Lean and clean! Building a site with web standards 5. Semantic code Semantic code uses html elements for their given purpose. Well structured HTML will have semantic meaning for a wide range of users and user agents (browsers without style sheets, text browsers, PDAs, search engines etc.) In simple terms, this means: for headings, use heading elements starting with H1 for paragraphs of text, use a paragraph element for lists, use a list item element You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. For example, avoid styling <div> elements to look like headings.

5. Semantic code

Semantic code uses html elements for their given purpose. Well structured HTML will have semantic meaning for a wide range of users and user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)

In simple terms, this means:

for headings, use heading elements starting with H1

for paragraphs of text, use a paragraph element

for lists, use a list item element

You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. For example, avoid styling <div> elements to look like headings.

Lean and clean! Building a site with web standards 6. Why use valid code? Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML

6. Why use valid code?

Valid code will render faster than code with errors.

Valid code will render better than invalid code.

Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML

Lean and clean! Building a site with web standards 7. How do you make your code valid? Start with the right doctype Be aware of doctype modes (standards compliant, quirks mode etc) Use a character set Close HTML elements Use alt tags for images Avoid HTML hacks Use HTML validators regularly Fix any bugs you find before you go live Make validation part of your normal work process

7. How do you make your code valid?

Start with the right doctype

Be aware of doctype modes (standards compliant, quirks mode etc)

Use a character set

Close HTML elements

Use alt tags for images

Avoid HTML hacks

Use HTML validators regularly

Fix any bugs you find before you go live

Make validation part of your normal work process

Lean and clean! Building a site with web standards 8. What is accessible code? Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired, cognitive impaired) Allows your site to be accessed by wider range of devices (hand helds, screen readers, text browsers, search engines) Is a requirement for Federal and State Government sites

8. What is accessible code?

Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired, cognitive impaired)

Allows your site to be accessed by wider range of devices (hand helds, screen readers, text browsers, search engines)

Is a requirement for Federal and State Government sites

Lean and clean! Building a site with web standards 9. How do you make your code accessible? Provide text equivalent for non-text elements Use accessible data tables (identify row and column headers) Use accessible forms (label for, id, fieldset, legend) Use markup rather than images to convey information. Provide visible skip menus Provide access keys Use style sheets with relative units to control layout and presentation Make sure documents can be read without style sheets Provide metadata to add semantic information

9. How do you make your code accessible?

Provide text equivalent for non-text elements

Use accessible data tables (identify row and column headers)

Use accessible forms (label for, id, fieldset, legend)

Use markup rather than images to convey information.

Provide visible skip menus

Provide access keys

Use style sheets with relative units to control layout and presentation

Make sure documents can be read without style sheets

Provide metadata to add semantic information

Lean and clean! Building a site with web standards 10. Separating style from content Easier to make site-wide changes - one css file rather than all pages Smaller files/ faster download - less code on the page Less code on the page - easier to code Allows users to customise to their own needs - style switchers More control over code - can deliver code in preferred order for screen readers Files are more accessible to a wider variety of mediums - separate css files for other devices

10. Separating style from content

Easier to make site-wide changes - one css file rather than all pages

Smaller files/ faster download - less code on the page

Less code on the page - easier to code

Allows users to customise to their own needs - style switchers

More control over code - can deliver code in preferred order for screen readers

Files are more accessible to a wider variety of mediums - separate css files for other devices

Lean and clean! Building a site with web standards 11. How do you separate style from content? Decide on a browser support level and code methodology If full CSS is the chosen methodology, decide on a CSS positioning method Place content into containing boxes Use CSS positioning to control layout of containing boxes Use CSS to control the visual appearance of all html elements Test on a wide variety of browsers at each stage

11. How do you separate style from content?

Decide on a browser support level and code methodology

If full CSS is the chosen methodology, decide on a CSS positioning method

Place content into containing boxes

Use CSS positioning to control layout of containing boxes

Use CSS to control the visual appearance of all html elements

Test on a wide variety of browsers at each stage

Lean and clean! Building a site with web standards 12. Lean and clean can still be elegant http://reddeyez.com http://www.tinderhouse.com/ http://www.yellowlane.com/ http://www.adaptivepath.com/ http://www.sprintpcs.com/ http://www.m-four.com/ http://www.couloir.org/ http://www.e-lusion.com/ http://www.pga.com/seniorpga/2004/ http://www.kryzcom.de/ http://superfluousbanter.org/ http://www.sharkrodeo.com/ http://www.jewelboxing.com/index.php http://www.twinsparc.com/ http://www.message.uk.com/ http://www.styrofirm.com/ http://www.onetruefit.com/ http://www.wildlysophisticated.com/ws/home/index.php http://www.twothirty.com/ http://www.lambertin-grotegerd.de/willkommen/

12. Lean and clean can still be elegant

http://reddeyez.com

http://www.tinderhouse.com/

http://www.yellowlane.com/

http://www.adaptivepath.com/

http://www.sprintpcs.com/

http://www.m-four.com/

http://www.couloir.org/

http://www.e-lusion.com/

http://www.pga.com/seniorpga/2004/

http://www.kryzcom.de/

http://superfluousbanter.org/

http://www.sharkrodeo.com/

http://www.jewelboxing.com/index.php

http://www.twinsparc.com/

http://www.message.uk.com/

http://www.styrofirm.com/

http://www.onetruefit.com/

http://www.wildlysophisticated.com/ws/home/index.php

http://www.twothirty.com/

http://www.lambertin-grotegerd.de/willkommen/