Successfully reported this slideshow.
Your SlideShare is downloading. ×

Successful Teams follow Standards

Loading in …3

Check these out next

1 of 78 Ad

More Related Content

Slideshows for you (20)


More from Christian Heilmann (20)


Recently uploaded (20)

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://