Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.flickr.com/photos/kaneda99/223671285/
                    ...
philosophy of web design
best practice for building a website
Web Standards   Correct Syntax
Web Standards   Universal Accessibility
Web Standards   Conveying Semantics




                         http://www.flickr.com/photos/mdumlao98/186071440/in/photos...
Content




HTML
Content
<img src=”#” alt=”Foxsports - return to home page” />
                                                        Content
    ...
Presentation




CSS
Presentation
Behaviour


Javascript / AJAX
Behaviour
What are Web Standards?

                          ContentContentContent




   HTML


                          http://ww...
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-proofing
getting what you want?
+
+   =
Web Standards   Next Steps?




                              http://www.flickr.com/photos/brennen/34073524/
              ...
Real World Web Standards
Real World Web Standards   The Ideal Scenario




                               http://www.flickr.com/photos/tilaneseven/4...
Real World Web Standards   The Ugly Reality




                               http://www.flickr.com/photos/superlocal/2164...
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.flickr.com/photos/whsimages/998243013/
 ...
Real World Web Standards   Case Study
    Design




                              http://www.flickr.com/photos/whsimages/9...
Real World Web Standards   Case Study
    Design




                     Front-end
                                 http:...
Real World Web Standards   Case Study
    Design                                                       Back-end




      ...
Real World Web Standards   Semantic Code
Real World Web Standards   Hazards Ahead




                                http://www.flickr.com/photos/malinky/54265493/...
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 leve...
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.flickr.com/photos/tamaki/138227048/
                ...
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
               ...
the new problem
                  awareness        pro-activeness
                  value            scale
               ...
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
              ...
Dealing with New Standards     Scale




                             http://www.flickr.com/photos/darrenandpalmyra/2973643...
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
      ...
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 sacrifice
Maturing Web Standards




                         http://www.flickr.com/photos/wiseacre/1017839840/
                     ...
Maturing Web Standards




                         http://www.flickr.com/photos/melbournewsg/140576306/
                  ...
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
Pragmat...
www.standardzilla.com
               Presentation Slides - Real World Web Standards



www.digital-web.com/articles/corpor...
What are Web Standards? http://www.flickr.com/photos/kaneda99/223671285/
What are Web Standards? http://www.flickr.com/photos/kaneda99/223671285/
Upcoming SlideShare
Loading in …5
×

What are Web Standards? http://www.flickr.com/photos/kaneda99/223671285/ Real World Web Standards

18,835 views

Published on

What are Web Standards?




http://www.flickr.com/photos/kaneda99/223671285/
kaneda99

Published in: Technology, Design

×