Successful Teams follow Standards


Published on

My presentation for Paris Web 2007 in Paris, France. I had no idea about the audience, so I kept it non-tech.

Published in: Business, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Successful Teams follow Standards

  1. 1. Successful Teams follow standards Christian Heilmann Paris Web 2007 November 2007, Paris
  2. 2. <ul><li>The great thing about web development is that browsers rock. </li></ul>
  3. 3. <ul><li>All you need is to put some HTML together, and let the browser do its stuff. </li></ul>
  4. 4. <ul><li><HTML> </li></ul><ul><li><DIV style=“width:300px;background:gray”> </li></ul><ul><li>Section Header<BR><BR> </li></ul><ul><li>Section Body<BR><BR> </li></ul><ul><li>Section Footer<BR><BR> </li></ul><ul><li></div> </li></ul><ul><li></HTML> </li></ul>
  5. 6. <ul><li>Done. Nothing to worry about. </li></ul>
  6. 7. <ul><li>An attitude that supports a whole market segment: </li></ul><ul><li>Web Development </li></ul>
  7. 8. <ul><li>However, not all web developers subscribe to it. </li></ul>
  8. 9. <ul><li>A small, but constantly growing group tends to disagree. </li></ul>
  9. 11. <ul><li>They want to move ahead. </li></ul>
  10. 12. <ul><li>They do that by relying on a secret weapon. </li></ul>
  11. 13. <ul><li>Following agreed standards and practices. </li></ul>
  12. 14. <ul><li>This takes time and effort. </li></ul>
  13. 15. <ul><li>It also takes dedication and stamina. </li></ul>
  14. 16. <ul><li>Especially when it comes to following the W3C recommendations. </li></ul>
  15. 17. <ul><li>… as browsers do not really care. </li></ul>
  16. 18. <ul><li>Small wins are great </li></ul>
  17. 19. <ul><li>Does this mean that following standards means unnecessary overhead? </li></ul>
  18. 20. <ul><li>Are we agile enough? </li></ul>
  19. 21. <ul><li>Yes, we are! </li></ul>
  20. 22. <ul><li>First of all, browsers are forgiving, but not in the same manner. </li></ul>
  21. 23. <ul><li>This is not that much of a problem, if you are not too fussed about the display being perfect. </li></ul>
  22. 24. <ul><li>However, some people do. </li></ul><ul><li>With good reason. </li></ul>
  23. 25. <ul><li>We work with another department that cares a lot. </li></ul>
  24. 26. <ul><li>Design </li></ul>
  25. 27. <ul><li>We also work with another department that does not care as much. </li></ul>
  26. 28. <ul><li>The Business </li></ul>
  27. 29. <ul><li>However, everybody is a designer. </li></ul><ul><li>(or thinks so) </li></ul>
  28. 30. <ul><li>How to achieve consistency? </li></ul>
  29. 31. <ul><li>By not letting browsers do guesswork but telling them what is what. </li></ul>
  30. 32. <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;;> </li></ul><ul><li><html dir=&quot;ltr&quot; lang=&quot;en&quot; > </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;> </li></ul><ul><li><title>Page Demo</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><div id=&quot;intro&quot;> </li></ul><ul><li><div class=&quot;hd&quot;>Section Header</div> </li></ul><ul><li><div class=&quot;bd&quot;>Page Section Body</div> </li></ul><ul><li><div class=&quot;ft&quot;>Page Section Footer</div> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  31. 33. <ul><li>How can you improve the product turnaround time? </li></ul>
  32. 34. <ul><li>Allowing for work in parallel. </li></ul>
  33. 35. <ul><li>You can achieve this by separating work streams and use the right technologies for the right job. </li></ul>
  34. 36. <ul><li>sep·a·ra·tion </li></ul><ul><ul><li>HTML = structure </li></ul></ul><ul><ul><ul><li>“ what is what” </li></ul></ul></ul><ul><ul><li>CSS = look and feel </li></ul></ul><ul><ul><ul><li>“ how should it be displayed” </li></ul></ul></ul><ul><ul><li>JS/Flash = behaviour </li></ul></ul><ul><ul><ul><li>“ how should it react” </li></ul></ul></ul>
  35. 37. <ul><li>The main driver of successful web products? </li></ul>
  36. 38. <ul><li>The ability to change and adapt to market demands. </li></ul>
  37. 39. <ul><li>Your web product is never finished. </li></ul><ul><li>The media moves too fast for that. </li></ul>
  38. 40. <ul><li>The web is evolving and moving away from the web we know now. </li></ul>
  39. 41. <ul><li>New platforms, new browsers, new technologies are always around the corner. </li></ul>
  40. 42. <ul><li>iPhone </li></ul>
  41. 43. <ul><li>Nazb… Naba… </li></ul><ul><li>that bunny thing. </li></ul>
  42. 44. <ul><li>C’est la Wii </li></ul>
  43. 45. <ul><li>Businesses who don’t understand that need to watch out. </li></ul>
  44. 46. <ul><li>The way to support upcoming technologies and platforms in a predictable manner is? </li></ul>
  45. 47. <ul><li>Follow a standard. </li></ul>
  46. 48. <ul><li>What is a standard? </li></ul>
  47. 49. <ul><li>A standard is an agreement of various groups or individuals to solve a problem in a consistent manner. </li></ul>
  48. 50. <ul><li>An example - The Screw </li></ul>
  49. 51. <ul><li>To be used with a screwdriver </li></ul>
  50. 52. <ul><li>Or… </li></ul>
  51. 53. <ul><li>Which leads to… </li></ul>
  52. 54. <ul><li>We do the same to web sites. </li></ul>
  53. 55. <ul><li>The W3C recommendations are the screwdriver for browsers and assistive technology. </li></ul>
  54. 56. <ul><li>WYSIWYG or “let’s see if it works on my browser” aren’t. </li></ul>
  55. 57. <ul><li>Following a standard means: </li></ul><ul><ul><li>Predictable results </li></ul></ul><ul><ul><li>Validation as a quality control </li></ul></ul><ul><ul><li>Safe re-use of code and ideas </li></ul></ul><ul><ul><li>Consistency (which leads to easy bug-fixing) </li></ul></ul>
  56. 58. <ul><li>Validation is the start of a quality control process, not the end of it! </li></ul>
  57. 59. <ul><li>You can create perfectly valid and at the same time terribly bad code. </li></ul>
  58. 60. <ul><li>You cannot validate semantics automatically. </li></ul>
  59. 61. <ul><li>Following W3C recommendations is also the start for your own code standards. </li></ul>
  60. 62. <ul><li>Defining a standard is hard work. </li></ul>
  61. 63. <ul><li>The benefits however are great. </li></ul><ul><ul><li>Flexible allocations (every product is built the same) </li></ul></ul><ul><ul><li>Standard QA practices </li></ul></ul><ul><ul><li>Modular Development via re-use of code from other products. </li></ul></ul><ul><ul><li>A lot less maintenance work </li></ul></ul>
  62. 64. Following a standard makes us ready for change.
  63. 65. <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;;> </li></ul><ul><li><html dir=&quot;ltr&quot; lang=&quot;en&quot; > </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;> </li></ul><ul><li><title>Page Demo</title> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;;> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;;> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;;> </li></ul><ul><li></head> </li></ul><ul><li><body class=&quot;yui-skin-sam&quot;> </li></ul><ul><li><div id=&quot;intro&quot;> </li></ul><ul><li><div class=&quot;hd&quot;>Section Header</div> </li></ul><ul><li><div class=&quot;bd&quot;>Section Body</div> </li></ul><ul><li><div class=&quot;ft&quot;>Section Footer</div> </li></ul><ul><li></div> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;;></script> </li></ul><ul><li><script> </li></ul><ul><li>var demopanel = new YAHOO.widget.Panel('intro',{close:true,visible:true,modal:true,draggable:true}); </li></ul><ul><li>demopanel.render(); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  64. 67. <ul><li>Following a standard makes us an example for others. </li></ul>
  65. 68. <ul><li>Imagine starting in a company that has an agreed way of working. </li></ul>
  66. 69. <ul><li>People can work, can get sick or go on vacation. </li></ul>
  67. 70. <ul><li>There is no downtime or long hand-over periods. </li></ul>
  68. 71. <ul><li>You don’t work for yourself but for everybody else and the person to replace you. </li></ul>
  69. 72. <ul><li>You can work across the globe, taking advantage of time differences. </li></ul>
  70. 73. <ul><li>“ Homework” </li></ul>
  71. 74. <ul><li>Foster internal communication. </li></ul>
  72. 75. <ul><li>Lightning Talks: </li></ul><ul><ul><li>5 Minutes presentation </li></ul></ul><ul><ul><li>5 minutes demo </li></ul></ul><ul><ul><li>5 minutes discussion </li></ul></ul><ul><li>Every Thursday </li></ul><ul><li>11.45 – 12.00 </li></ul>
  73. 76.
  74. 77. <ul><li>No more bad surprises. </li></ul><ul><li>No more heroes. </li></ul><ul><li>Let’s work together. </li></ul>
  75. 78. <ul><li>MERCI! </li></ul>Christian Heilmann [email_address] http://