The presentation is about the development of www.webrichtlijnen.nl, the main website of the Web Guidelines that governments use to validate their website. It is presented at the Drupal Government Days 2011 in Brussels.

1. THE WEB GUIDELINES
A battle between project goals and procurement
Alexander Fase
Product Manager Web Guidelines @ ICTU
Baris Wanschers
Drupal Specialist @ Sogeti

2. BACKGROUND OF THE PROJECT
AND HOW TO MAKE SURE YOU GET WHAT YOU WANT

3. DUTCH GOVERNMENT POLICY
Websites should be accessible to all

4. DUTCH GOVERNMENT POLICY
Websites should be accessible to all
• Different people

5. DUTCH GOVERNMENT POLICY
Websites should be accessible to all
• Different people
• Different browsers

6. DUTCH GOVERNMENT POLICY
Websites should be accessible to all
• Different people
• Different browsers
• Different platforms: desktop and mobile

7. DUTCH GOVERNMENT POLICY
Websites should be accessible to all
• Different people
• Different browsers
• Different platforms: desktop and mobile
• Search-engines

8. LET'S MAKE THINGS BETTER

9. LET'S NOT MAKE THINGS WORSE

10. APPROACH IN THE
NETHERLANDS
• Quality model web guidelines
• Set of 125 guidelines and supporting instruments

11. THE PRINCIPLES
• Correct use of standards (W3C)

12. THE PRINCIPLES
• Correct use of standards (W3C)
• Building with layers

13. THE PRINCIPLES
• Correct use of standards (W3C)
• Building with layers
• Semantics (using HTML as it is intended)

14. THE PRINCIPLES
• Correct use of standards (W3C)
• Building with layers
• Semantics (using HTML as it is intended)
• Reduction of complexity, strict seperation of
content, design and function

15. PROGRESS UNTIL 2008
• Slow: after
2 years of being mandatory only 2%
comply to the web guidelines

16. PROGRESS UNTIL 2008
• Slow: after
2 years of being mandatory only 2%
comply to the web guidelines
• Marketing research lead to the following recommendations:

17. PROGRESS UNTIL 2008
• Slow: after
2 years of being mandatory only 2%
comply to the web guidelines
• Marketing research lead to the following recommendations:
Focus on the benefits

18. PROGRESS UNTIL 2008
• Slow: after
2 years of being mandatory only 2%
comply to the web guidelines
• Marketing research lead to the following recommendations:
Focus on the benefits
Customize information

19. PROGRESS UNTIL 2008
• Slow: after
2 years of being mandatory only 2%
comply to the web guidelines
• Marketing research lead to the following recommendations:
Focus on the benefits
Customize information
Current plain vanilla website doesn’t fit the bill

20. REQUEST FOR PROPOSAL
• New website + Content Management System

21. REQUEST FOR PROPOSAL
• New website + Content Management System
• Build it fast (1 month)

22. REQUEST FOR PROPOSAL
• New website + Content Management System
• Build it fast (1 month)
• 100% compliant to web guidelines

23. REQUEST FOR PROPOSAL
• New website + Content Management System
• Build it fast (1 month)
• 100% compliant to web guidelines
• Reduce scope by creating baseline:
Functionality / Content / Design

24. BATTLING PROCUREMENT
PART ONE
Dilemma: framework contract or custom contract?

25. BATTLING PROCUREMENT
PART ONE
Dilemma: framework contract or custom contract?
• Framework contract
Fast, but no proven web guidelines compliance to that day

26. BATTLING PROCUREMENT
PART ONE
Dilemma: framework contract or custom contract?
• Framework contract
Fast, but no proven web guidelines compliance to that day
• Custom contract
Takes too much time. But freedom of choice and
proven web guidelines compliance

27. BATTLING PROCUREMENT
PART TWO
• Procurement department wants to set the
record straight: choose framework contract

28. BATTLING PROCUREMENT
PART TWO
• Procurement department wants to set the
record straight: choose framework contract
• Work with what you were given,
enforce 100% web guidelines compliancy:

29. BATTLING PROCUREMENT
PART TWO
• Procurement department wants to set the
record straight: choose framework contract
• Work with what you were given,
enforce 100% web guidelines compliancy:
• Exit question

30. BATTLING PROCUREMENT
PART TWO
• Procurement department wants to set the
record straight: choose framework contract
• Work with what you were given,
enforce 100% web guidelines compliancy:
• Exit question
• References

31. BATTLING PROCUREMENT
PART TWO
• Procurement department wants to set the
record straight: choose framework contract
• Work with what you were given,
enforce 100% web guidelines compliancy:
• Exit question
• References
• Killer clause

32. KILLER CLAUSE
If web guidelines compliancy < 100%

33. KILLER CLAUSE
If web guidelines compliancy < 100%
Supplier is in default

34. KILLER CLAUSE
If web guidelines compliancy < 100%
Supplier is in default
Contract will be terminated

35. KILLER CLAUSE
If web guidelines compliancy < 100%
Supplier is in default
Contract will be terminated
All costs made for 100% web guidelines compliancy
will be compensated by supplier

36. REQUEST FOR PROPOSAL
•2 companies refused to make a proposal, 4 were not valid

37. REQUEST FOR PROPOSAL
•2 companies refused to make a proposal, 4 were not valid
• Starting all over again: 2 ½ weeks delay

38. REQUEST FOR PROPOSAL
•2 companies refused to make a proposal, 4 were not valid
• Starting all over again: 2 ½ weeks delay
• New request for proposal

39. REQUEST FOR PROPOSAL
•2 companies refused to make a proposal, 4 were not valid
• Starting all over again: 2 ½ weeks delay
• New request for proposal
•4 proposals of which 2 not valid

40. REQUEST FOR PROPOSAL
•2 companies refused to make a proposal, 4 were not valid
• Starting all over again: 2 ½ weeks delay
• New request for proposal
•4 proposals of which 2 not valid
• All valid proposals offered Drupal

41. WHY DRUPAL?
• Open Source & strong community

42. WHY DRUPAL?
• Open Source & strong community
• Full control output (web guidelines!)

43. WHY DRUPAL?
• Open Source & strong community
• Full control output (web guidelines!)
• Proven web guidelines compliancy

44. WHY DRUPAL?
• Open Source & strong community
• Full control output (web guidelines!)
• Proven web guidelines compliancy
• Verdict: reliable/stable, flexibel and low cost of ownership

45. WHY DRUPAL?
• Open Source & strong community
• Full control output (web guidelines!)
• Proven web guidelines compliancy
• Verdict: reliable/stable, flexibel and low cost of ownership
• Easy to use for content editors

46. DEVELOPING THE WEBSITE
TWO TIPS FOR BUILDING (ACCESSIBLE) WEBSITES
AND HOW WE OVERCAME SHORTCOMINGS IN DRUPAL

47. RULE 1
Unobtrusive front-end development
Start with an accessible version, then add extra’s.

48. START CLEAN
No CSS, No JavaScript

49. ADD STYLING
Still... no Javascript

50. FINALLY, ADD EXTRA’S
Javascript and/or Flash

51. RULE 2
Use semantic content holders
Define HTML elements by there meaning, not by their layout

52. START WITHOUT STYLING
And choose your elements with sense

53. START WITHOUT STYLING
And choose your elements with sense

54. START WITHOUT STYLING
And choose your elements with sense

55. START WITHOUT STYLING
And choose your elements with sense

56. START WITHOUT STYLING
And choose your elements with sense

57. START WITHOUT STYLING
And choose your elements with sense

58. START WITHOUT STYLING
And choose your elements with sense

59. START WITHOUT STYLING
And choose your elements with sense

60. WEBRICHTLIJNEN.NL
Some issues we tackled

61. READABLE URL’S
No query strings or incomprehensible terms allowed

62. FILTERING AND SORTING
We’ve created a custom module

63. OUR OPTIONS

64. OUR OPTIONS
• Views: http://www.site.com/projects/list?
tid_3[]=5&tid_3[]=3&tid_3[]=9

65. OUR OPTIONS
• Views: http://www.site.com/projects/list?
tid_3[]=5&tid_3[]=3&tid_3[]=9
• SOLR: http://www.site.com/search/apachesolr_multisitesearch/
views?filters=drupal_core%3A87%20bs_project_sandbox
%3A0%20ss_meta_type%3Amodule&text=views

66. OUR SOLUTION
• One content type (Web Guideline)
• Six
vocabularies (Guidelines version, Role, Subject, Project
phase, Advantages and Confirmation Level)
• One module that uses POST instead of GET.
• Redirect URL’s and save choices in a cookie
Eg: /richtlijnen/ontwerper?grouping=Voordeel

67. ACCESSIBLE SLIDESHOWS

68. ACCESSIBLE SLIDESHOWS
Tried ten modules, but all needed Javascript to work

69. DISPLAY ALL IMAGES
And use Javascript to hide some

70. MOST MODULE DO THIS
Without Javascript, the uses only sees the first image

71. BUT THEY SHOULD DO THIS
Without Javascript, all images are shown.

72. INTEGRATE EXISTING SITES
Yes, we’ve cheated

73. INTEGRATE EXISTING SITES
Yes, we’ve cheated

74. THE RESULT COUNTS
And yes, we have the certificate!
Full case study: http://bit.ly/webguidelines

75. MORE INFO
Alexander Fase
alexander.fase@ictu.nl
Baris Wanschers
baris.wanschers@sogeti.nl / @BarisW on Twitter