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?

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?

32. +

33. + =

34. Web Standards Next Steps?
http://www.flickr.com/photos/brennen/34073524/
flowb33

35. Real World Web Standards

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

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

38. Doesn’t validate

39. Doesn’t validate
Breaks in major browsers

40. Doesn’t validate
Breaks in major browsers
JavaScript errors

41. Doesn’t validate
Breaks in major browsers
JavaScript errors
Accessibility

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

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

44. mastheads project

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

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

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

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

49. Real World Web Standards Semantic Code

50. Real World Web Standards Hazards Ahead
http://www.flickr.com/photos/malinky/54265493/
malinky

51. Scope creep

52. Scope creep
More people

53. Scope creep
More people
Faster builds

54. Scope creep
More people
Faster builds
Less communication

55. Real World Web Standards Bloated Markup

56. !important

57. class=”footer”

58. footer1 bot-links bottom foot tools _footer

59. what we achieved?

60. Eliminated table layouts

61. Eliminated table layouts
XHTML transitional doctype

62. Eliminated table layouts
XHTML transitional doctype
Semantic documents

63. Eliminated table layouts
XHTML transitional doctype
Semantic documents
Increased usability

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

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

66. Real World Web Standards What could we have changed?

67. Setup time

68. Setup time
Defensive driving development

69. Setup time
Defensive driving development
Establish rules

70. Setup time
Defensive driving development
Establish rules
Increase communication

71. Setup time
Defensive driving development
Establish rules
Increase communication
Documentation

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

73. Dealing with New Standards
http://www.flickr.com/photos/tamaki/138227048/
tamaki

74. the old problem
awareness

75. the new problem
awareness pro-activeness

76. the old problem
awareness pro-activeness
value

77. the new problem
awareness pro-activeness
value scale

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

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

80. Dealing with New Standards Pro-activeness

81. Just do it

82. Just do it
Proof of concept

83. Just do it
Proof of concept
Get someone onboard

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

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

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

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

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

89. Baby steps

90. Baby steps
Documentation and education

91. Baby steps
Documentation and education
Induction

92. Baby steps
Documentation and education
Induction
Frameworks
JavaScript

93. Baby steps
Documentation and education
Induction
Frameworks
JavaScript
HTML
CSS

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

95. Knowing your environment

96. Knowing your environment
Picking your battles

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

98. Knowing your environment
Picking your battles
Personal sacrifice

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

100. Maturing Web Standards
http://www.flickr.com/photos/melbournewsg/140576306/
Melbourne WSG

101. Maturing Web Standards

103. the new

104. Knowing the dark side

105. Knowing the dark side
Validation is not gospel

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

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

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

109. Behaviour
AJAX
JavaScript
Flash

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

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