Real World Web Standards

18,761 views

Published on

Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?

Published in: Technology, Design

Real World Web Standards

  1. REAL WORLD WEB STANDARDS
  2. Me and you
  3. The web standards argument
  4. The web standards argument Real world scenarios
  5. The web standards argument Real world scenarios Dealing with new problems
  6. The web standards argument Real world scenarios Dealing with new problems Maturing web standards
  7. What are Web Standards? http://www.flickr.com/photos/kaneda99/223671285/ kaneda99
  8. philosophy of web design
  9. best practice for building a website
  10. Web Standards Correct Syntax
  11. Web Standards Universal Accessibility
  12. Web Standards Conveying Semantics http://www.flickr.com/photos/mdumlao98/186071440/in/photostream/ mdumlao98
  13. Content HTML
  14. Content
  15. <img src=”#” alt=”Foxsports - return to home page” /> Content <img src=”#” alt=”world cup trophy” /> <h1> Text <ul> <h2> <dl> <h2> <table>
  16. Presentation CSS
  17. Presentation
  18. Behaviour Javascript / AJAX
  19. Behaviour
  20. What are Web Standards? ContentContentContent HTML http://www.flickr.com/photos/kaneda99/223671285/ kaneda99
  21. ContentContentContent text only search engines HTML screen readers
  22. the old (but good) arguments?
  23. Less bandwidth
  24. + =
  25. Less bandwidth Universal accessibility
  26. + =
  27. Less bandwidth Universal accessibility Ease of maintenance
  28. Less bandwidth Universal accessibility Ease of maintenance Search engine optimisation
  29. Less bandwidth Universal accessibility Ease of maintenance Search engine optimisation Future-proofing
  30. getting what you want?
  31. +
  32. + =
  33. Web Standards Next Steps? http://www.flickr.com/photos/brennen/34073524/ flowb33
  34. Real World Web Standards
  35. Real World Web Standards The Ideal Scenario http://www.flickr.com/photos/tilaneseven/438652956/ tilaneseven
  36. Real World Web Standards The Ugly Reality http://www.flickr.com/photos/superlocal/216434095/ superlocal
  37. Doesn’t validate
  38. Doesn’t validate Breaks in major browsers
  39. Doesn’t validate Breaks in major browsers JavaScript errors
  40. Doesn’t validate Breaks in major browsers JavaScript errors Accessibility
  41. Doesn’t validate Breaks in major browsers JavaScript errors Accessibility unclosed <p> tags.....
  42. Doesn’t validate Breaks in major browsers JavaScript errors Accessibility unclosed <p> tags..... ... slow erosion ...
  43. mastheads project
  44. Real World Web Standards Case Study http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  45. Real World Web Standards Case Study Design http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  46. Real World Web Standards Case Study Design Front-end http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  47. Real World Web Standards Case Study Design Back-end Front-end http://www.flickr.com/photos/whsimages/998243013/ WHS Images
  48. Real World Web Standards Semantic Code
  49. Real World Web Standards Hazards Ahead http://www.flickr.com/photos/malinky/54265493/ malinky
  50. Scope creep
  51. Scope creep More people
  52. Scope creep More people Faster builds
  53. Scope creep More people Faster builds Less communication
  54. Real World Web Standards Bloated Markup
  55. !important
  56. class=”footer”
  57. footer1 bot-links bottom foot tools _footer
  58. what we achieved?
  59. Eliminated table layouts
  60. Eliminated table layouts XHTML transitional doctype
  61. Eliminated table layouts XHTML transitional doctype Semantic documents
  62. Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability
  63. Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability Accessible JavaScript!
  64. Eliminated table layouts XHTML transitional doctype Semantic documents Increased usability Accessible JavaScript! New level of standards
  65. Real World Web Standards What could we have changed?
  66. Setup time
  67. Setup time Defensive driving development
  68. Setup time Defensive driving development Establish rules
  69. Setup time Defensive driving development Establish rules Increase communication
  70. Setup time Defensive driving development Establish rules Increase communication Documentation
  71. Setup time Defensive driving development Establish rules Increase communication Documentation Do It again...
  72. Dealing with New Standards http://www.flickr.com/photos/tamaki/138227048/ tamaki
  73. the old problem awareness
  74. the new problem awareness pro-activeness
  75. the old problem awareness pro-activeness value
  76. the new problem awareness pro-activeness value scale
  77. the old problem awareness pro-activeness value scale “let me do this”
  78. the new problem awareness pro-activeness value scale “let me do this” “we need to do this”
  79. Dealing with New Standards Pro-activeness
  80. Just do it
  81. Just do it Proof of concept
  82. Just do it Proof of concept Get someone onboard
  83. Just do it Proof of concept Get someone onboard Be pushy or dull or pain in the a*se
  84. Just do it Proof of concept Get someone onboard Be pushy or dull or pain in the a*se Pick a weapon
  85. $$$ 400 300 200 100 0 2006 2007 2008 2009 2010
  86. Dealing with New Standards Choose your weapon nda rds @*k sta F SEO my site!
  87. Dealing with New Standards Scale http://www.flickr.com/photos/darrenandpalmyra/297364366// Daz n P
  88. Baby steps
  89. Baby steps Documentation and education
  90. Baby steps Documentation and education Induction
  91. Baby steps Documentation and education Induction Frameworks JavaScript
  92. Baby steps Documentation and education Induction Frameworks JavaScript HTML CSS
  93. Dealing with New Standards “We need to do this” developer corporate antagonist http://www.flickr.com/photos/tamaki/138227048/ tamaki
  94. Knowing your environment
  95. Knowing your environment Picking your battles
  96. not ideal... text only HTML search engines screen readers
  97. Knowing your environment Picking your battles Personal sacrifice
  98. Maturing Web Standards http://www.flickr.com/photos/wiseacre/1017839840/ wiseacre photo
  99. Maturing Web Standards http://www.flickr.com/photos/melbournewsg/140576306/ Melbourne WSG
  100. Maturing Web Standards
  101. the new
  102. Knowing the dark side
  103. Knowing the dark side Validation is not gospel
  104. Knowing the dark side Validation is not gospel More focus on the user
  105. Knowing the dark side Validation is not gospel More focus on the user Content is still king
  106. Knowing the dark side Validation is not gospel More focus on the user Content is still king New layer of standards
  107. Behaviour AJAX JavaScript Flash
  108. Knowing the dark side Validation is not gospel More focus on the user Content is still king New layer of standards Pragmatic standards
  109. www.standardzilla.com Presentation Slides - Real World Web Standards www.digital-web.com/articles/corporate_web_standards/ Article - Corporate Web Standards

×