Embed Size (px)
Citation preview
REAL WORLD WEB STANDARDS
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.flickr.com/photos/kaneda99/223671285/kaneda99
philosophy of web design
best practice for building a website
Correct SyntaxWeb Standards
Universal AccessibilityWeb Standards
http://www.flickr.com/photos/mdumlao98/186071440/in/photostream/mdumlao98
Conveying SemanticsWeb Standards
Content
HTML
Content
Content
Text
<h1>
<h2>
<h2>
<img src=”#” alt=”world cup trophy” />
<img src=”#” alt=”Foxsports - return to home page” />
<ul>
<dl>
<table>
CSS
Presentation
Presentation
Javascript / AJAX
Behaviour
Behaviour
What are Web Standards?
http://www.flickr.com/photos/kaneda99/223671285/kaneda99
HTML
ContentContentContent
ContentContentContent
HTMLsearch engines
screen readers
text only
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-proofing
getting what you want?
+
+ =
Next Steps?Web Standards
http://www.flickr.com/photos/brennen/34073524/flowb33
The Ideal Scenario
http://www.flickr.com/photos/tilaneseven/438652956/tilaneseven
Real World Web Standards
The Ugly Reality
http://www.flickr.com/photos/superlocal/216434095/superlocal
Real World Web Standards
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
Case Study
http://www.flickr.com/photos/whsimages/998243013/WHS Images
Real World Web Standards
Case Study
http://www.flickr.com/photos/whsimages/998243013/WHS Images
Real World Web StandardsDesign
Case Study
http://www.flickr.com/photos/whsimages/998243013/WHS Images
Real World Web StandardsDesign
Front-end
Case Study
http://www.flickr.com/photos/whsimages/998243013/WHS Images
Real World Web StandardsDesign
Front-end
Back-end
Semantic CodeReal World Web Standards
Hazards AheadReal World Web Standards
http://www.flickr.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
!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
What could we have changed?Real World Web Standards
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...
http://www.flickr.com/photos/tamaki/138227048/tamaki
Dealing with New Standards
awarenessthe old problem
awareness pro-activenessthe new problem
awareness pro-activenessvalue
the old problem
awareness pro-activenessscalevalue
the new problem
awareness pro-activenessscalevalue
“let me do this”
the old problem
“we need to do this”
the new problemawareness pro-activeness
scalevalue“let me 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
0
100
200
300
400
2006 2007 2008 2009 2010
$$$
F@*k standards
SEO my site!
Dealing with New Standards Choose your weapon
http://www.flickr.com/photos/darrenandpalmyra/297364366//Daz n P
Dealing with New Standards Scale
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
http://www.flickr.com/photos/tamaki/138227048/tamaki
Dealing with New Standards “We need to do this”
developer
corporateantagonist
Knowing your environment
Knowing your environment
Picking your battles
HTMLsearch engines
screen readers
text only
not ideal...
Knowing your environment
Picking your battles
Personal sacrifice
http://www.flickr.com/photos/wiseacre/1017839840/wiseacre photo
Maturing Web Standards
http://www.flickr.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
AJAX JavaScript
Flash
Behaviour
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.comPresentation Slides - Real World Web Standards
www.digital-web.com/articles/corporate_web_standards/Article - Corporate Web Standards
