Save 37% off PRO during our Black Friday Sale! »

I can smell your CMS

I can smell your CMS

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.

This talk first given at Fronteers 2012 (http://fronteers.nl/congres/2012) #fronteers12

Video of the talk at Fronteers: https://vimeo.com/53317254

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

October 05, 2012
Tweet

Transcript

  1. SMELLCMS #

  2. PHILHAWKSWORTH @

  3. ~ I C CAN SMELL YOUR MS

  4. ANXIOUS SMELLCMS # @PHILHAWKSWORTH

  5. 1. AMAZING SPEAKERS 2. POST LUNCH DIP 3. TALKING ABOUT

    CMS SMELLCMS # @PHILHAWKSWORTH dull dull dull
  6. SMELLCMS # @PHILHAWKSWORTH

  7. SMELLCMS # @PHILHAWKSWORTH P E R F E C T

    YAW N THE P E R F E C T YAW N THE e.g. 2
  8. F/E SMELLCMS # @PHILHAWKSWORTH

  9. SMELLCMS # @PHILHAWKSWORTH CONTEXT

  10. have a AGENCIES DILEMA SMELLCMS # @PHILHAWKSWORTH

  11. have a AGENCIES PROBLEM SMELLCMS # @PHILHAWKSWORTH

  12. CLIENTS SMELLCMS # @PHILHAWKSWORTH

  13. FIRED! SMELLCMS # @PHILHAWKSWORTH

  14. SMELLCMS # @PHILHAWKSWORTH what they WANT GIVE THEM

  15. SMELLCMS # @PHILHAWKSWORTH what they NEED GIVE THEM

  16. SMELLCMS # @PHILHAWKSWORTH AGENCY GAP

  17. SMELLCMS # @PHILHAWKSWORTH

  18. SMELLCMS # @PHILHAWKSWORTH TENSION

  19. SMELLCMS # ~ @PHILHAWKSWORTH AGENCY RESPONSIBILITY

  20. SMELLCMS # ~ @PHILHAWKSWORTH DEVELOPER RESPONSIBILITY

  21. SMELLCMS # @PHILHAWKSWORTH BRANDS STAGE AUDIENCE BIG

  22. SMELLCMS # @PHILHAWKSWORTH

  23. SMELLCMS # @PHILHAWKSWORTH GROLSCH.COM

  24. SMELLCMS # @PHILHAWKSWORTH BEETLE.COM

  25. SMELLCMS # @PHILHAWKSWORTH

  26. SMELLCMS # @PHILHAWKSWORTH by EXAMPLE LEARN

  27. SMELLCMS # @PHILHAWKSWORTH MILWAUKEEPOLICENEWS.COM

  28. SMELLCMS # @PHILHAWKSWORTH

  29. SMELLCMS # @PHILHAWKSWORTH

  30. SMELLCMS # @PHILHAWKSWORTH by EXAMPLE LEARN

  31. SMELLCMS # @PHILHAWKSWORTH ~ VIEW SOURCE

  32. SMELLCMS # is @PHILHAWKSWORTH CRAFT CODE

  33. SMELLCMS # @PHILHAWKSWORTH TENSION

  34. SMELLCMS # @PHILHAWKSWORTH ~ AVOID LOCK-IN

  35. SMELLCMS # @PHILHAWKSWORTH FREEDOM

  36. SMELLCMS # @PHILHAWKSWORTH DODGE DODGE DODGE DODGE

  37. CMS

  38. SMELLCMS # @PHILHAWKSWORTH O RLY?

  39. ~ PARADOX THE CMS SMELLCMS # @PHILHAWKSWORTH e.g. 3

  40. SMELLCMS # @PHILHAWKSWORTH ~ ENTERPRISE LEVEL

  41. SMELLCMS # @PHILHAWKSWORTH ~ REASSURINGLY EXPENSIVE

  42. SMELLCMS # @PHILHAWKSWORTH does not give FLEXIBILITY FLEXIBILITY

  43. CHOICE ~ PARALYSIS

  44. proportional to SMELLCMS # @PHILHAWKSWORTH CHANGES COST OF SYSTEM COST

    OF
  45. SMELLCMS # versus @PHILHAWKSWORTH POWERFUL WORKFLOW GETTING SHIT DONE

  46. or INTERN CEO SMELLCMS # @PHILHAWKSWORTH DEVELOPER / CTO /

    CMO
  47. SMELLCMS # @PHILHAWKSWORTH SUBVERT

  48. SMELLCMS # @PHILHAWKSWORTH

  49. CODE SMELL SMELLCMS # @PHILHAWKSWORTH

  50. SMELLCMS # @PHILHAWKSWORTH symptom in the source code that possibly

    indicates a deeper problem
  51. SMELLCMS # @PHILHAWKSWORTH CMS SMELL

  52. SMELLCMS # @PHILHAWKSWORTH CMS STINK

  53. SMELLCMS # @PHILHAWKSWORTH of EXAMPLES STINK

  54. SMELLCMS # @PHILHAWKSWORTH .html .shtml .pl .php .jsp .asp .aspx

    to the CONTENT COUPLED TECHNOLOGY
  55. TIMBL SAYS

  56. LOCK IN

  57. None
  58. http://global.burton.com /on/demandware.store /Sites-Burton_GLOBAL-Site /default /Home SMELLCMS # @PHILHAWKSWORTH -Show

  59. SMELLCMS # @PHILHAWKSWORTH ~ ENTERPRISE LEVEL

  60. SMELLCMS # @PHILHAWKSWORTH ENTERPRISE FACEPALM level

  61. SMELLCMS # @PHILHAWKSWORTH http://global.burton.com /on/demandware.store /Sites-Burton_GLOBAL-Site /default /Home-Show SMELLCMS #

    @PHILHAWKSWORTH
  62. SMELLCMS # @PHILHAWKSWORTH http://global.burton.com /on/demandware.store /Sites-Burton_GLOBAL-Site /default /Home-Show SMELLCMS #

    @PHILHAWKSWORTH
  63. LOCK IN

  64. FUGLY

  65. SMELLCMS # @PHILHAWKSWORTH URL DESIGN CRAFT

  66. SMELLCMS # @PHILHAWKSWORTH MAKE URL DESIGN A PRIORITY

  67. SMELLCMS # @PHILHAWKSWORTH URL STABILITY tip

  68. SMELLCMS # @PHILHAWKSWORTH SIREN OF SOCIAL MEDIA tip

  69. SMELLCMS # @PHILHAWKSWORTH FACEBOOK LIKES tip

  70. SMELLCMS # @PHILHAWKSWORTH PERFORMANCE

  71. SMELLCMS # @PHILHAWKSWORTH STEVE SOUDERS

  72. OPTIMISATION

  73. SMELLCMS # @PHILHAWKSWORTH ~ TUNING OPTIMISATIONS TRICKS CRAFT FOUNDATION

  74. SMELLCMS # @PHILHAWKSWORTH ~ TUNING OPTIMISATIONS TRICKS CRAFT CMS

  75. SMELLCMS # @PHILHAWKSWORTH .net BURP

  76. SMELLCMS # @PHILHAWKSWORTH UI HOOKS

  77. SMELLCMS # @PHILHAWKSWORTH CLASSIC STINK

  78. SMELLCMS # @PHILHAWKSWORTH MODULARITY FLEXIBILITY &

  79. SMELLCMS # @PHILHAWKSWORTH A GOOD THING

  80. O RLY? SMELLCMS # @PHILHAWKSWORTH

  81. SMELLCMS # @PHILHAWKSWORTH A MODULE / HTML TARGET CSS JAVASCRIPT

    ENCAPSULATED REPEATABLE /
  82. SMELLCMS # @PHILHAWKSWORTH

  83. SMELLCMS # @PHILHAWKSWORTH ~ RENDERING PERFORMANCE KILLS

  84. SMELLCMS # @PHILHAWKSWORTH ~ MAINTENANCE NIGHTMARE

  85. STINK

  86. SMELLCMS # @PHILHAWKSWORTH MAKES SOUDERS CRY

  87. SMELLCMS # @PHILHAWKSWORTH THOU SHALT NOT MAKE SOUDERS CRY

  88. SMELLCMS # @PHILHAWKSWORTH AMAZING DESIGNERS

  89. SMELLCMS # @PHILHAWKSWORTH DESIGN EXPERTISE

  90. SMELLCMS # @PHILHAWKSWORTH rachel andrew THE POWER TO RUIN THEIR

    SITE
  91. SMELLCMS # @PHILHAWKSWORTH CORE FEATURE

  92. SMELLCMS # @PHILHAWKSWORTH WYSIWYG

  93. SMELLCMS # @PHILHAWKSWORTH WYSIWYG DANGER

  94. WYSIWYG SMELLCMS # @PHILHAWKSWORTH DANGER

  95. WYSIWYG SMELLCMS # @PHILHAWKSWORTH DANGER

  96. WYSIWYG SMELLCMS # @PHILHAWKSWORTH DANGER

  97. WYSIWYG SMELLCMS # @PHILHAWKSWORTH DANGER

  98. WYSIwYG SMELLCMS # @PHILHAWKSWORTH DANGER

  99. SMELLCMS # @PHILHAWKSWOR TH WYSIWY G WYSIWY G WYSIWY G

    $ DANGER DANGER
  100. WYSIWYGITE

  101. SMELLCMS # @PHILHAWKSWORTH WYSIWYGITE

  102. WYSIWTF

  103. SMELLCMS # @PHILHAWKSWORTH the DESIGNED EXPERIENCE PROTECT

  104. SMELLCMS # @PHILHAWKSWORTH the MARKUP PROTECT

  105. SMELLCMS # @PHILHAWKSWORTH <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>
  106. SMELLCMS # @PHILHAWKSWORTH <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>
  107. STINK

  108. SMELLCMS # @PHILHAWKSWORTH ROUND TRIPPING

  109. SMELLCMS # @PHILHAWKSWORTH EMERGENCY MEASURES

  110. CIRCULAR STINK e.g. 4

  111. SMELLCMS # @PHILHAWKSWORTH MARKDOWN

  112. SMELLCMS # @PHILHAWKSWORTH STRUCTURED CONTENT CHANGE

  113. SMELLCMS # @PHILHAWKSWORTH MANAGE not CONTENT DESIGN

  114. SMELLCMS # @PHILHAWKSWORTH TEACH A MAN TO FISH

  115. SMELLCMS # @PHILHAWKSWORTH HOST A BBQ http://www.flickr.com/photos/cmbellman/2576196608/

  116. SMELLCMS # @PHILHAWKSWORTH RESEARCH PAPERS ON INTENSIVE SALMON FARMING

  117. SMELLCMS # @PHILHAWKSWORTH SAUSAGES

  118. SMELLCMS # @PHILHAWKSWORTH BAD SAUSAGES

  119. SMELLCMS # @PHILHAWKSWORTH the CHALLENGING INTRODUCTION OF STINK

  120. SMELLCMS # @PHILHAWKSWORTH CONSTRAINTS CAN BE ENABLERS

  121. SMELLCMS # @PHILHAWKSWORTH SIMPLICITY

  122. CHOICE ~ PARALYSIS

  123. SMELLCMS # @PHILHAWKSWORTH OUR CMS DOESN’T SUPPORT MOBILE WTF?

  124. SMELLCMS # @PHILHAWKSWORTH MOBILE MODULE CAN BE PURCHASED...

  125. SMELLCMS # @PHILHAWKSWORTH ENTERPRISE FACEPALM level

  126. SMELLCMS # @PHILHAWKSWORTH MANAGE not CONTENT DESIGN

  127. SMELLCMS # @PHILHAWKSWORTH FUTURE FRIENDLY

  128. NEEDS SMELLCMS # @PHILHAWKSWORTH WHAT CONTENT to be DYNAMIC?

  129. SMELLCMS # @PHILHAWKSWORTH WHAT CONTENT to be DYNAMIC? REALLY NEEDS

  130. REALLY? SMELLCMS # @PHILHAWKSWORTH

  131. SMELLCMS # @PHILHAWKSWORTH ONE DAY, WE MIGHT WANT TO...

  132. SMELLCMS # @PHILHAWKSWORTH YAGNI

  133. SMELLCMS # @PHILHAWKSWORTH RUTHLESSLY PURSUE SIMPLICITY

  134. SMELLCMS # @PHILHAWKSWORTH ~ SKILLS AVAILABLE

  135. SMELLCMS # @PHILHAWKSWORTH or INTERN CEO / CTO / CMO

    DEVELOPER
  136. SMELLCMS # @PHILHAWKSWORTH > COMPLEX CMS HTML

  137. SMELLCMS # @PHILHAWKSWORTH > COMPLEX CMS DEV

  138. AVOID LOCK IN

  139. SMELLCMS # @PHILHAWKSWORTH ~ NOCMS CONSIDER

  140. SMELLCMS # @PHILHAWKSWORTH CONVENTIONS PATTERNS GUIDANCE TEMPLATING TOOLS

  141. JEKYLL github.com/mojombo/jekyll

  142. PERCH grabaperch.com

  143. OPTIMISATION

  144. SMELLCMS # @PHILHAWKSWORTH COMMON AGENCY APPROACH

  145. SMELLCMS # @PHILHAWKSWORTH USER EXPERIENCE DESIGN F/E DEV INTEGRATION

  146. SMELLCMS # @PHILHAWKSWORTH TO FINISH

  147. SMELLCMS # @PHILHAWKSWORTH CHALLENGE CMS STINK

  148. SMELLCMS # @PHILHAWKSWORTH FIGHT FOR THE CHANCE TO DO GOOD

    ON THE WEB
  149. SMELLCMS # @PHILHAWKSWORTH THANKS LINKS 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/1418791186 http://grabaperch.com http://github.com/mojombo/jekyll http://www.rachelandrew.co.uk/archives/2012/09/21/ we-need-to-talk-about-content-management