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.

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