Real World Web Standards

REAL WORLD WEB STANDARDS

Me and you

The web standards argument

The web standards argument Real world scenarios

The web standards argument Real world scenarios Dealing with new problems

The web standards argument Real world scenarios Dealing with new problems Maturing web standards

What are Web Standards? http://www.ﬂickr.com/photos/kaneda99/223671285/ kaneda99

philosophy of web design

best practice for building a website

Web Standards Correct Syntax

Web Standards Universal Accessibility

Web Standards Conveying Semantics http://www.ﬂickr.com/photos/mdumlao98/186071440/in/photostream/ mdumlao98

Content HTML

Content

<img src=”#” alt=”Foxsports - return to home page” /> Content <img src=”#” alt=”world cup trophy” /> <h1> Text <ul> <h2> <dl> <h2> <table>

Presentation CSS

Presentation

Behaviour Javascript / AJAX

Behaviour

What are Web Standards? ContentContentContent HTML http://www.ﬂickr.com/photos/kaneda99/223671285/ kaneda99

ContentContentContent text only search engines HTML screen readers

the old (but good) arguments?

Less bandwidth

Less bandwidth Universal accessibility

Less bandwidth Universal accessibility Ease of maintenance

Less bandwidth Universal accessibility Ease of maintenance Search engine optimisation

Less bandwidth Universal accessibility Ease of maintenance Search engine optimisation Future-prooﬁng

getting what you want?

Web Standards Next Steps? http://www.ﬂickr.com/photos/brennen/34073524/ ﬂowb33

Real World Web Standards

Real World Web Standards The Ideal Scenario http://www.ﬂickr.com/photos/tilaneseven/438652956/ tilaneseven

Real World Web Standards The Ugly Reality http://www.ﬂickr.com/photos/superlocal/216434095/ superlocal

Doesn’t validate

Doesn’t validate Breaks in major browsers

Doesn’t validate Breaks in major browsers JavaScript errors

Doesn’t validate Breaks in major browsers JavaScript errors Accessibility

Doesn’t validate Breaks in major browsers JavaScript errors Accessibility unclosed <p> tags.....

Doesn’t validate Breaks in major browsers JavaScript errors Accessibility unclosed <p> tags..... ... slow erosion ...

mastheads project

Real World Web Standards Case Study http://www.ﬂickr.com/photos/whsimages/998243013/ WHS Images

Real World Web Standards Case Study Design http://www.ﬂickr.com/photos/whsimages/998243013/ WHS Images

Real World Web Standards Case Study Design Front-end http://www.ﬂickr.com/photos/whsimages/998243013/ WHS Images

Real World Web Standards Case Study Design Back-end Front-end http://www.ﬂickr.com/photos/whsimages/998243013/ WHS Images

Real World Web Standards Semantic Code

Real World Web Standards Hazards Ahead http://www.ﬂickr.com/photos/malinky/54265493/ malinky

Scope creep

Scope creep More people

Scope creep More people Faster builds

Scope creep More people Faster builds Less communication

Real World Web Standards Bloated Markup

!important

class=”footer”

footer1 bot-links bottom foot tools _footer

what we achieved?

Eliminated table layouts

Eliminated table layouts XHTML transitional doctype

Eliminated table layouts XHTML transitional doctype Semantic documents

Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability

Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability Accessible JavaScript!

Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability Accessible JavaScript! New level of standards

Real World Web Standards What could we have changed?

Setup time

Setup time Defensive driving development

Setup time Defensive driving development Establish rules

Setup time Defensive driving development Establish rules Increase communication

Setup time Defensive driving development Establish rules Increase communication Documentation

Setup time Defensive driving development Establish rules Increase communication Documentation Do It again...

Dealing with New Standards http://www.ﬂickr.com/photos/tamaki/138227048/ tamaki

the old problem awareness

the new problem awareness pro-activeness

the old problem awareness pro-activeness value

the new problem awareness pro-activeness value scale

the old problem awareness pro-activeness value scale “let me do this”

the new problem awareness pro-activeness value scale “let me do this” “we need to do this”

Dealing with New Standards Pro-activeness

Just do it

Just do it Proof of concept

Just do it Proof of concept Get someone onboard

Just do it Proof of concept Get someone onboard Be pushy or dull or pain in the a*se

Just do it Proof of concept Get someone onboard Be pushy or dull or pain in the a*se Pick a weapon

$$$ 400 300 200 100 0 2006 2007 2008 2009 2010

Dealing with New Standards Choose your weapon nda rds @*k sta F SEO my site!

Dealing with New Standards Scale http://www.ﬂickr.com/photos/darrenandpalmyra/297364366// Daz n P

Baby steps

Baby steps Documentation and education

Baby steps Documentation and education Induction

Baby steps Documentation and education Induction Frameworks JavaScript

Baby steps Documentation and education Induction Frameworks JavaScript HTML CSS

Dealing with New Standards “We need to do this” developer corporate antagonist http://www.ﬂickr.com/photos/tamaki/138227048/ tamaki

Knowing your environment

Knowing your environment Picking your battles

not ideal... text only HTML search engines screen readers

Knowing your environment Picking your battles Personal sacriﬁce

Maturing Web Standards http://www.ﬂickr.com/photos/wiseacre/1017839840/ wiseacre photo

Maturing Web Standards http://www.ﬂickr.com/photos/melbournewsg/140576306/ Melbourne WSG

Maturing Web Standards

the new

Knowing the dark side

Knowing the dark side Validation is not gospel

Knowing the dark side Validation is not gospel More focus on the user

Knowing the dark side Validation is not gospel More focus on the user Content is still king

Knowing the dark side Validation is not gospel More focus on the user Content is still king New layer of standards

Behaviour AJAX JavaScript Flash

Knowing the dark side Validation is not gospel More focus on the user Content is still king New layer of standards Pragmatic standards

www.standardzilla.com Presentation Slides - Real World Web Standards www.digital-web.com/articles/corporate_web_standards/ Article - Corporate Web Standards

http://www.standardzilla.com	164
http://www.webdirections.org	79
http://funkykaraoke.blogspot.com	11
http://www.slideshare.net	6
http://surf.googlemashups.com	1
http://scratch-wp:8888	1

Real World Web Standards

by gleddy on May 22, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 262

Statistics

Real World Web Standards — Webinar Transcript