I can smell your CMS

15,497 views
15,491 views

Published on

The word is getting out. Great web site experiences require careful development and crafty execution in the front end. Squeezing every drop of performance out of your user's browser is tough, but Steve Souders and friends have mobilized an army, and we are all having a bloody good go.

But there is a common threat to doing great work in the front-end. It lurks in the back-end and clients love it. It's the content management system, and more often than not, it stinks.

We'll look at examples of the damaging traces CMSs leave behind in the front-end and at how we might work to reduce them. We'll find ways to fight for what matters in a CMS, and ways to avoid the smell of your CMS wafting over to the user and sacrificing the craftsmanship of good front-end engineering.

Find video of this presentation

Published in: Technology, Design

I can smell your CMS

  1. 1. #SMELLCMS
  2. 2. @PHILHAWKSWORTH
  3. 3. I CAN SMELL YOURCMS ~
  4. 4. ANXIOUS@PHILHAWKSWORTH #HTML5DEVCONF
  5. 5. 1. AMAZING SPEAKERS2. YOU HAVE OPTIONS3. TALKING ABOUT CMS du l l u ll dull d@PHILHAWKSWORTH # HTML5DEVCONF
  6. 6. HTML5DEVCONF@PHILHAWKSWORTH #HTML5DEVCONF
  7. 7. HTML5DEVCONF@PHILHAWKSWORTH #HTML5DEVCONF
  8. 8. F/E@PHILHAWKSWORTH #HTML5DEVCONF
  9. 9. CONTEXT@PHILHAWKSWORTH # HTML5DEVCONF
  10. 10. AGENCIES have a DILEMA@PHILHAWKSWORTH # HTML5DEVCONF
  11. 11. AGENCIES have a PROBLEM@PHILHAWKSWORTH # HTML5DEVCONF
  12. 12. CLIENTS@PHILHAWKSWORTH # HTML5DEVCONF
  13. 13. FIRED!@PHILHAWKSWORTH # HTML5DEVCONF
  14. 14. AGENCY GAP@PHILHAWKSWORTH # HTML5DEVCONF
  15. 15. GIVE THEM WANT what they@PHILHAWKSWORTH # HTML5DEVCONF
  16. 16. GIVE THEM NEED what they@PHILHAWKSWORTH # HTML5DEVCONF
  17. 17. TENSION@PHILHAWKSWORTH # HTML5DEVCONF
  18. 18. AGENCY ~ RESPONSIBILITY@PHILHAWKSWORTH # HTML5DEVCONF
  19. 19. DEVELOPER~ RESPONSIBILITY@PHILHAWKSWORTH # HTML5DEVCONF
  20. 20. BIG BRANDS STAGE AUDIENCE@PHILHAWKSWORTH # HTML5DEVCONF
  21. 21. @PHILHAWKSWORTH # HTML5DEVCONF
  22. 22. @PHILHAWKSWORTH # HTML5DEVCONF GROLSCH.COM
  23. 23. @PHILHAWKSWORTH # HTML5DEVCONF BEETLE.COM
  24. 24. @PHILHAWKSWORTH # HTML5DEVCONF MCDONALDS.CO.UK
  25. 25. 38.28 MB405 HTTP REQUESTS1.1 MINUTE ONLOAD@PHILHAWKSWORTH # HTML5DEVCONF
  26. 26. @PHILHAWKSWORTH # HTML5DEVCONF
  27. 27. LEARN by EXAMPLE@PHILHAWKSWORTH # HTML5DEVCONF
  28. 28. @PHILHAWKSWORTH # HTML5DEVCONF
  29. 29. @PHILHAWKSWORTH # HTML5DEVCONF MILWAUKEEPOLICENEWS.COM
  30. 30. @PHILHAWKSWORTH # HTML5DEVCONF
  31. 31. @PHILHAWKSWORTH # HTML5DEVCONF
  32. 32. LEARN by EXAMPLE@PHILHAWKSWORTH # HTML5DEVCONF
  33. 33. CODE is CRAFT@PHILHAWKSWORTH # HTML5DEVCONF
  34. 34. TENSION@PHILHAWKSWORTH # HTML5DEVCONF
  35. 35. AVOID ~ LOCK-IN@PHILHAWKSWORTH # HTML5DEVCONF
  36. 36. FREEDOM@PHILHAWKSWORTH # HTML5DEVCONF
  37. 37. DODGE@PHILHAWKSWORTH # HTML5DEVCONF
  38. 38. CMS
  39. 39. O RLY?@PHILHAWKSWORTH # HTML5DEVCONF
  40. 40. THE CMS ~ PARADOX@PHILHAWKSWORTH # HTML5DEVCONF
  41. 41. ENTERPRISE LEVEL ~@PHILHAWKSWORTH # HTML5DEVCONF
  42. 42. REASSURINGLY ~ EXPENSIVE@PHILHAWKSWORTH # HTML5DEVCONF
  43. 43. EXPENSIVE@PHILHAWKSWORTH # HTML5DEVCONF
  44. 44. FLEXIBILITY does not give FLEXIBILITY@PHILHAWKSWORTH # HTML5DEVCONF
  45. 45. CHOICE ~PARALYSIS
  46. 46. COST OF SYSTEM proportional to COST OF CHANGES@PHILHAWKSWORTH # HTML5DEVCONF
  47. 47. POWERFUL WORKFLOW@PHILHAWKSWORTH # HTML5DEVCONF
  48. 48. POWERFUL WORKFLOW versus GETTING SHIT DONE@PHILHAWKSWORTH # HTML5DEVCONF
  49. 49. CEO / CMO / CTO INTERN or DEVELOPER@PHILHAWKSWORTH # HTML5DEVCONF
  50. 50. SUBVERT@PHILHAWKSWORTH # HTML5DEVCONF
  51. 51. CODE SMELL@PHILHAWKSWORTH # HTML5DEVCONF
  52. 52. symptom in the source code that possibly indicates a deeper problem@PHILHAWKSWORTH # HTML5DEVCONF
  53. 53. CMS SMELL@PHILHAWKSWORTH # HTML5DEVCONF
  54. 54. CMS STINK@PHILHAWKSWORTH # HTML5DEVCONF
  55. 55. EXAMPLES STINK of@PHILHAWKSWORTH # HTML5DEVCONF
  56. 56. .html .shtml .pl .php .jsp .asp .aspx@PHILHAWKSWORTH # HTML5DEVCONF
  57. 57. CONTENT .html .shtml .pl .php .jsp COUPLED to the .asp .aspx TECHNOLOGY@PHILHAWKSWORTH # HTML5DEVCONF
  58. 58. TIMBL SAYS
  59. 59. LOCK IN
  60. 60. http://global.burton.com@PHILHAWKSWORTH #HTML5DEVCONF
  61. 61. http://global.burton.com/on/demandware.store@PHILHAWKSWORTH #HTML5DEVCONF
  62. 62. http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site@PHILHAWKSWORTH #HTML5DEVCONF
  63. 63. http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default@PHILHAWKSWORTH #HTML5DEVCONF
  64. 64. http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default/Home@PHILHAWKSWORTH #HTML5DEVCONF
  65. 65. http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default/Home -Show@PHILHAWKSWORTH #HTML5DEVCONF
  66. 66. ENTERPRISE LEVEL ~@PHILHAWKSWORTH #HTML5DEVCONF
  67. 67. ENTERPRISE levelFACEPALM@PHILHAWKSWORTH #HTML5DEVCONF
  68. 68. http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default/Home-Show@PHILHAWKSWORTH # HTML5DEVCONF
  69. 69. LOCK IN
  70. 70. FUGLY
  71. 71. URL DESIGN CRAFT@PHILHAWKSWORTH # HTML5DEVCONF
  72. 72. MAKE URL DESIGN A PRIORITY@PHILHAWKSWORTH # HTML5DEVCONF
  73. 73. tip URL STABILITY@PHILHAWKSWORTH # HTML5DEVCONF
  74. 74. tip SIREN OF SOCIAL MEDIA@PHILHAWKSWORTH # HTML5DEVCONF
  75. 75. tip FACEBOOK LIKES@PHILHAWKSWORTH # HTML5DEVCONF
  76. 76. PERFORMANCE@PHILHAWKSWORTH # HTML5DEVCONF
  77. 77. @PHILHAWKSWORTH # HTML5DEVCONF STEVE SOUDERS
  78. 78. OPTIMISATION
  79. 79. OPTIMISATION
  80. 80. TUNING OPTIMISATIONS TRICKS CRAFT CMS ~@PHILHAWKSWORTH # HTML5DEVCONF
  81. 81. .net BURP@PHILHAWKSWORTH # HTML5DEVCONF
  82. 82. UI HOOKS@PHILHAWKSWORTH # HTML5DEVCONF
  83. 83. CLASSIC STINK@PHILHAWKSWORTH # HTML5DEVCONF
  84. 84. MODULARITY & FLEXIBILITY@PHILHAWKSWORTH # HTML5DEVCONF
  85. 85. A GOOD THING@PHILHAWKSWORTH #HTML5DEVCONF
  86. 86. O RLY?@PHILHAWKSWORTH # HTML5DEVCONF
  87. 87. A MODULE / HTML TARGET CSS JAVASCRIPT@PHILHAWKSWORTH # HTML5DEVCONF
  88. 88. A MODULE / HTML TARGET CSS JAVASCRIPT / ENCAPSULATED REPEATABLE@PHILHAWKSWORTH # HTML5DEVCONF
  89. 89. A MODULE / HTML TARGET CSS JAVASCRIPT / ENCAPSULATED REPEATABLE@PHILHAWKSWORTH # HTML5DEVCONF
  90. 90. @PHILHAWKSWORTH # HTML5DEVCONF
  91. 91. @PHILHAWKSWORTH # HTML5DEVCONF
  92. 92. KILLS ~ RENDERING PERFORMANCE@PHILHAWKSWORTH # HTML5DEVCONF
  93. 93. MAINTENANCE ~ NIGHTMARE@PHILHAWKSWORTH # HTML5DEVCONF
  94. 94. STINK
  95. 95. MAKES SOUDERS CRY@PHILHAWKSWORTH # HTML5DEVCONF
  96. 96. THOU SHALT NOT MAKE SOUDERS CRY@PHILHAWKSWORTH # HTML5DEVCONF
  97. 97. @PHILHAWKSWORTH # HTML5DEVCONF AMAZING DESIGNERS
  98. 98. DESIGN EXPERTISE@PHILHAWKSWORTH # HTML5DEVCONF
  99. 99. CORE FEATURE@PHILHAWKSWORTH # HTML5DEVCONF
  100. 100. WYSIWYG@PHILHAWKSWORTH #HTML5DEVCONF
  101. 101. WYSIWYG DANGER@PHILHAWKSWORTH #HTML5DEVCONF
  102. 102. WYSIWYG DANGER@PHILHAWKSWORTH #HTML5DEVCONF
  103. 103. WYSIWYG DANGER@PHILHAWKSWORTH #HTML5DEVCONF
  104. 104. WYSIWYG DANGER@PHILHAWKSWORTH #HTML5DEVCONF
  105. 105. WYSIWYG DANGER@PHILHAWKSWORTH #HTML5DEVCONF
  106. 106. WYSIwYG DANGER@PHILHAWKSWORTH #HTML5DEVCONF
  107. 107. WYSIWY G $@PHILHAWKSWOR #HTML5DEVCONF TH
  108. 108. WYSIWYG
  109. 109. WYSIWYGITE
  110. 110. WYSIWYGITE@PHILHAWKSWORTH # HTML5DEVCONF
  111. 111. WYSIWTF
  112. 112. PROTECT the MARKUP@PHILHAWKSWORTH # HTML5DEVCONF
  113. 113. <p class="footnote"><font size="4">&nbsp;</font></p><p class="footnote"> please <a style="COLOR: #4b7228" onclick="javascript:popup(/list.html,,860,900);" href="javascript: void(0);"> <font color="#000000"><strong>click</strong></font> <font color="#000000"><strong>here</strong></font> </a> to add join our waiting list.&nbsp;&nbsp;&nbsp;</p><p class="footnote"> <em>• <a href="/Cancellation">Cancellation Policy</a></em></p><p class="footnote"> <em></em>&nbsp;</p>@PHILHAWKSWORTH # HTML5DEVCONF
  114. 114. <p class="footnote">&nbsp;</p>&nbsp;&nbsp;<p class="footnote"><strong></strong><strong></strong>&nbsp;</p><p class="footnote">&nbsp;</p><p class="footnote">&nbsp;</p>&nbsp;&nbsp;<p class="footnote">&nbsp;</p>&nbsp;&nbsp;<p class="footnote">&nbsp;</p>&nbsp;&nbsp;<p class="footnote">&nbsp;</p>&nbsp;&nbsp;<p class="footnote"><strong></strong>&nbsp;</p><p class="footnote">&nbsp;</p>@PHILHAWKSWORTH # HTML5DEVCONF
  115. 115. STINK
  116. 116. ROUND TRIPPING@PHILHAWKSWORTH # HTML5DEVCONF
  117. 117. CIRCULAR STINK
  118. 118. MARKDOWN@PHILHAWKSWORTH # HTML5DEVCONF
  119. 119. STRUCTURED CONTENT CHANGE@PHILHAWKSWORTH # HTML5DEVCONF
  120. 120. MANAGE CONTENT not DESIGN@PHILHAWKSWORTH # HTML5DEVCONF
  121. 121. AVOID ~ LOCK-IN@PHILHAWKSWORTH # HTML5DEVCONF
  122. 122. TEACH A MAN TO FISH@PHILHAWKSWORTH # HTML5DEVCONF
  123. 123. HOST A BBQ@PHILHAWKSWORTH # HTML5DEVCONF http://www.flickr.com/photos/cmbellman/2576196608/
  124. 124. RESEARCH PAPERSON INTENSIVESALMON FARMING@PHILHAWKSWORTH # HTML5DEVCONF
  125. 125. SAUSAGES@PHILHAWKSWORTH # HTML5DEVCONF
  126. 126. BAD SAUSAGES@PHILHAWKSWORTH # HTML5DEVCONF
  127. 127. CHALLENGING the INTRODUCTION OF STINK@PHILHAWKSWORTH #HTML5DEVCONF
  128. 128. CONSTRAINTS CAN BE ENABLERS@PHILHAWKSWORTH # HTML5DEVCONF
  129. 129. SIMPLICITY@PHILHAWKSWORTH # HTML5DEVCONF
  130. 130. CHOICE ~PARALYSIS
  131. 131. OUR CMS DOESN’T SUPPORT MOBILE WTF?@PHILHAWKSWORTH # HTML5DEVCONF
  132. 132. ...MOBILE MODULE CAN BE PURCHASED@PHILHAWKSWORTH # HTML5DEVCONF
  133. 133. ENTERPRISE levelFACEPALM@PHILHAWKSWORTH # HTML5DEVCONF
  134. 134. MANAGE CONTENT not DESIGN@PHILHAWKSWORTH # HTML5DEVCONF
  135. 135. FUTURE FRIENDLY@PHILHAWKSWORTH # HTML5DEVCONF
  136. 136. SIMPLICITY@PHILHAWKSWORTH # HTML5DEVCONF
  137. 137. WHAT CONTENT NEEDS to be DYNAMIC?@PHILHAWKSWORTH # HTML5DEVCONF
  138. 138. WHAT CONTENT REALLY NEEDS to be DYNAMIC?@PHILHAWKSWORTH # HTML5DEVCONF
  139. 139. REALLY?@PHILHAWKSWORTH # HTML5DEVCONF
  140. 140. ONE DAY, WE MIGHT WANT TO...@PHILHAWKSWORTH # HTML5DEVCONF
  141. 141. YAGNI@PHILHAWKSWORTH # HTML5DEVCONF
  142. 142. RUTHLESSLY PURSUE SIMPLICITY@PHILHAWKSWORTH # HTML5DEVCONF
  143. 143. AVAILABLE SKILLS ~@PHILHAWKSWORTH # HTML5DEVCONF
  144. 144. CEO / CMO / CTO INTERN or DEVELOPER@PHILHAWKSWORTH # HTML5DEVCONF
  145. 145. DEVELOPER@PHILHAWKSWORTH # HTML5DEVCONF
  146. 146. HTML > COMPLEX CMS@PHILHAWKSWORTH # HTML5DEVCONF
  147. 147. DEV > COMPLEX CMS@PHILHAWKSWORTH # HTML5DEVCONF
  148. 148. AVOIDLOCK IN
  149. 149. CONSIDER ~ NOCMS@PHILHAWKSWORTH # HTML5DEVCONF
  150. 150. TOOLS CONVENTIONS PATTERNS GUIDANCE TEMPLATING@PHILHAWKSWORTH # HTML5DEVCONF
  151. 151. JEKYLL github.com/mojombo/jekyll
  152. 152. PERCH grabaperch.com
  153. 153. OPTIMISATION
  154. 154. COMMON AGENCY APPROACH@PHILHAWKSWORTH # HTML5DEVCONF
  155. 155. @PHILHAWKSWORTH # HTML5DEVCONF
  156. 156. USER EXPERIENCE DESIGN F/E DEV INTEGRATION@PHILHAWKSWORTH # HTML5DEVCONF
  157. 157. USER EXPERIENCE DESIGN F/E DEV INTEGRATION@PHILHAWKSWORTH # HTML5DEVCONF
  158. 158. @PHILHAWKSWORTH # HTML5DEVCONF TO FINISH
  159. 159. CHALLENGE ~ CMS STINK@PHILHAWKSWORTH # HTML5DEVCONF
  160. 160. PROTECT YOUR ~ CRAFT@PHILHAWKSWORTH # HTML5DEVCONF
  161. 161. FIGHT FOR THE CHANCE TO DO GOOD ON THE WEB@PHILHAWKSWORTH # HTML5DEVCONF
  162. 162. THANKS http://stephenwaller.tumblr.com http://www.flickr.com/photos/employtheskinnyboy/3523608412 http://www.flickr.com/photos/bredgur/1323025528 http://www.flickr.com/photos/ansik/3033147092 http://www.flickr.com/photos/globevisions/2057289060 http://www.flickr.com/photos/cmbellman/2576196608 http://www.flickr.com/photos/ipeat/1492127164 http://www.flickr.com/photos/adamkjems/3559454088 http://www.flickr.com/photos/floradora1 http://www.flickr.com/photos/flowercat/2723867176 http://www.flickr.com/photos/timdrivas/6891133167 http://www.flickr.com/photos/gasi/1418791186LINKS http://hawksworx.com http://grabaperch.com http://github.com/mojombo/jekyll http://www.rachelandrew.co.uk/archives/2012/09/21/we-need-to-talk-about-content-management@PHILHAWKSWORTH # HTML5DEVCONF

×