Upgrade to Pro — share decks privately, control downloads, hide ads and more …

I can smell your CMS (at BDConf)

I can smell your CMS (at BDConf)

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.

How can the experience your users have on the web and particularly on mobile devices be affected by your CMS? How can the desire of clients to keep a system flexible result in poor performance, and stale websites?

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.

Phil Hawksworth

October 21, 2013
Tweet

More Decks by Phil Hawksworth

Other Decks in Technology

Transcript

  1. I C CAN SMELL YOUR MS ~

  2. PHILHAWKSWORTH @

  3. @PHILHAWKSWORTH ANXIOUS

  4. @PHILHAWKSWORTH 1. INCREDIBLE SPEAKERS 2. POST LUNCH DIP 3. TALKING

    ABOUT CMS dull dull dull
  5. @PHILHAWKSWORTH CONTEXT

  6. @PHILHAWKSWORTH

  7. @PHILHAWKSWORTH AGENCY GAP

  8. @PHILHAWKSWORTH WANT GIVE THEM what they

  9. @PHILHAWKSWORTH NEED GIVE THEM what they

  10. TENSION & TRENDS

  11. GROLSCH.COM

  12. MCDONALDS.CO.UK

  13. @PHILHAWKSWORTH 38.28 MB 405 HTTP REQUESTS 1.1 MINUTE ONLOAD

  14. @PHILHAWKSWORTH PERFORMANCE MATTERS

  15. @PHILHAWKSWORTH Greg Linden, Amazon 100ms OF EXTRA LOAD TIME CAUSED

    1% DROP IN SALES
  16. @PHILHAWKSWORTH FRONT END DEVELOPMENT HAS BECOME A SERIOUS BUSINESS

  17. @PHILHAWKSWORTH FRONT END ENGINEERING HAS BECOME A SERIOUS BUSINESS

  18. @PHILHAWKSWORTH I’M A SOFTWARE ENGINEER JAVASCRIPT WHAT LANGUAGE? HA HA

    HA HA ..!
  19. @PHILHAWKSWORTH F#@!!!

  20. @PHILHAWKSWORTH ~ AVOID LOCK-IN

  21. FREEDOM

  22. @PHILHAWKSWORTH DODGE DODGE DODGE DODGE

  23. CMS

  24. O RLY?

  25. @PHILHAWKSWORTH WHY A CMS?

  26. @PHILHAWKSWORTH 1. REDUCE COST OF CHANGE 2. MINIMISE DEPENDANCIES 3.

    EMPOWER CONTENT AUTHORS
  27. @PHILHAWKSWORTH ENTERPRISE LEVEL ~

  28. @PHILHAWKSWORTH EXPENSIVE REASSURINGLY ~

  29. @PHILHAWKSWORTH EXPENSIVE

  30. does not give FLEXIBILITY FLEXIBILITY

  31. CHOICE ~ PARALYSIS

  32. @PHILHAWKSWORTH proportional to CHANGES COST OF SYSTEM COST OF

  33. @PHILHAWKSWORTH POWERFUL WORKFLOW GETTING SHIT DONE versus

  34. @PHILHAWKSWORTH or INTERN CEO DEVELOPER / CTO / CMO

  35. @PHILHAWKSWORTH SUBVERT

  36. @PHILHAWKSWORTH

  37. @PHILHAWKSWORTH CODE SMELL

  38. @PHILHAWKSWORTH symptom in the source code that possibly indicates a

    deeper problem
  39. CMS SMELL

  40. @PHILHAWKSWORTH CMS STINK

  41. @PHILHAWKSWORTH of EXAMPLES STINK

  42. @PHILHAWKSWORTH .html .shtml .pl .php .jsp .asp .aspx to the

    CONTENT COUPLED TECHNOLOGY
  43. TIMBL SAYS

  44. @PHILHAWKSWORTH LOCK IN

  45. BURTON.COM

  46. @PHILHAWKSWORTH _GLOBAL-Site /default /Home http://global.burton.com /on/demandware.store /Sites-Burton -Show

  47. @PHILHAWKSWORTH ~ ENTERPRISE LEVEL

  48. ENTERPRISE FACEPALM level

  49. @PHILHAWKSWORTH _GLOBAL-Site /default /Home http://global.burton.com /on/demandware.store /Sites-Burton -Show

  50. @PHILHAWKSWORTH STINK

  51. @PHILHAWKSWORTH LOCK IN

  52. @PHILHAWKSWORTH FUGLY

  53. @PHILHAWKSWORTH HYGIENE URL minty fresh ~

  54. URL DESIGN CRAFT

  55. @PHILHAWKSWORTH MAKE URL DESIGN A PRIORITY

  56. @PHILHAWKSWORTH URL STABILITY tip

  57. SIREN OF SOCIAL MEDIA tip

  58. FACEBOOK LIKES tip

  59. PERFORMANCE

  60. STEVE SOUDERS

  61. @PHILHAWKSWORTH OPTIMISATION

  62. @PHILHAWKSWORTH OPTIMISATION

  63. @PHILHAWKSWORTH TUNING OPTIMISATIONS TRICKS CRAFT FOUNDATION ~

  64. @PHILHAWKSWORTH TUNING OPTIMISATIONS TRICKS CRAFT ~ CMS

  65. EPiSERVER

  66. @PHILHAWKSWORTH UI HOOKS

  67. @PHILHAWKSWORTH CLASSIC STINK

  68. @PHILHAWKSWORTH MODULARITY FLEXIBILITY &

  69. @PHILHAWKSWORTH A GOOD THING

  70. O RLY?

  71. @PHILHAWKSWORTH A MODULE / HTML TARGET CSS JAVASCRIPT ENCAPSULATED REPEATABLE

    /
  72. None
  73. None
  74. @PHILHAWKSWORTH ~ RENDERING PERFORMANCE KILLS

  75. @PHILHAWKSWORTH ~ MAINTENANCE NIGHTMARE

  76. @PHILHAWKSWORTH STINK

  77. @PHILHAWKSWORTH MAKES SOUDERS CRY

  78. @PHILHAWKSWORTH THOU SHALT NOT MAKE SOUDERS CRY

  79. AMAZING DESIGNERS

  80. @PHILHAWKSWORTH DESIGN EXPERTISE

  81. @PHILHAWKSWORTH Rachel Andrew THE POWER TO RUIN THEIR SITE

  82. @PHILHAWKSWORTH CORE FEATURE...

  83. @PHILHAWKSWORTH WYSIWYG

  84. @PHILHAWKSWORTH WYSIWYG DANGER

  85. @PHILHAWKSWORTH WYSIWYG DANGER

  86. @PHILHAWKSWORTH WYSIWYG DANGER

  87. @PHILHAWKSWORTH WYSIWYG DANGER

  88. @PHILHAWKSWORTH WYSIWYG DANGER

  89. @PHILHAWKSWORTH WYSIwYG DANGER

  90. @PHILHAWKSWORTH WYSIWY G WYSIWY G WYSIWY G $  

    @PHILHAWK
  91. @PHILHAWKSWORTH WYSIWYGITE

  92. WYSIWYGITE

  93. @PHILHAWKSWORTH WYSIWTF

  94. @PHILHAWKSWORTH the DESIGNED EXPERIENCE PROTECT

  95. @PHILHAWKSWORTH MARKUP PROTECT the

  96. <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>
  97. <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>
  98. @PHILHAWKSWORTH STINK

  99. @PHILHAWKSWORTH ROUND TRIPPING

  100. @PHILHAWKSWORTH EMERGENCY MEASURES

  101. @PHILHAWKSWORTH CIRCULAR STINK

  102. @PHILHAWKSWORTH MARKDOWN

  103. STRUCTURED CONTENT

  104. @PHILHAWKSWORTH MANAGE CONTENT DESIGN not

  105. @PHILHAWKSWORTH SIMPLICITY

  106. @PHILHAWKSWORTH Government Digital Service 23 MILLION UNIQUES PER MONTH 115

    MILLION PAGE VIEWS PER MONTH
  107. MARKDOWN 67120 PUBLISHED DOCUMENTS 1000+ AUTHORS GLOBALLY

  108. CONSTRAINTS CAN BE ENABLERS

  109. CHOICE ~ PARALYSIS

  110. @PHILHAWKSWORTH OUR CMS DOESN’T SUPPORT MOBILE WTF?

  111. @PHILHAWKSWORTH ...MOBILE MODULE CAN BE PURCHASED

  112. ENTERPRISE FACEPALM level

  113. @PHILHAWKSWORTH MANAGE not CONTENT DESIGN

  114. @PHILHAWKSWORTH FUTURE FRIENDLY

  115. @PHILHAWKSWORTH SIMPLICITY again?!

  116. @PHILHAWKSWORTH NEEDS WHAT CONTENT to be DYNAMIC?

  117. @PHILHAWKSWORTH NEEDS WHAT CONTENT to be DYNAMIC?

  118. @PHILHAWKSWORTH WHAT CONTENT to be DYNAMIC? REALLY NEEDS

  119. @PHILHAWKSWORTH REALLY?

  120. @PHILHAWKSWORTH ONE DAY, WE MIGHT WANT TO...

  121. @PHILHAWKSWORTH YAGNI

  122. @PHILHAWKSWORTH RUTHLESSLY PURSUE SIMPLICITY

  123. @PHILHAWKSWORTH ~ SKILLS AVAILABLE

  124. or INTERN CEO / CTO / CMO DEVELOPER

  125. DEVELOPER

  126. @PHILHAWKSWORTH HTML > COMPLEX CMS

  127. @PHILHAWKSWORTH DEV > COMPLEX CMS

  128. @PHILHAWKSWORTH AVOID LOCK IN

  129. @PHILHAWKSWORTH ~ NOCMS CONSIDER

  130. @PHILHAWKSWORTH CONVENTIONS PATTERNS GUIDANCE TEMPLATING TOOLS

  131. JEKYLL

  132. PERCH

  133. OPTIMISATION

  134. TO FINISH

  135. @PHILHAWKSWORTH ~ CMS STINK CHALLENGE

  136. @PHILHAWKSWORTH CRAFT PROTECT THE ~

  137. @PHILHAWKSWORTH PERFORMANCE PROTECT ~

  138. FIGHT FOR THE CHANCE TO DO GREAT WORK ON THE

    WEB