View
15
Download
0
Embed Size (px)
DESCRIPTION
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
Citation preview
SMELLCMS#
PHILHAWKSWORTH@
~I
CCAN SMELL YOUR
MS
ANXIOUSHTML5DEVCONF#@PHILHAWKSWORTH
1. AMAZING SPEAKERS2. YOU HAVE OPTIONS3. TALKING ABOUT CMS
HTML5DEVCONF#@PHILHAWKSWORTH
dulldull
dulldull
HTML5DEVCONF
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF
HTML5DEVCONF#@PHILHAWKSWORTH
F/EHTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
CONTEXT
have aAGENCIESDILEMA
HTML5DEVCONF#@PHILHAWKSWORTH
have aAGENCIESPROBLEM
HTML5DEVCONF#@PHILHAWKSWORTH
CLIENTSHTML5DEVCONF#@PHILHAWKSWORTH
FIRED!HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
AGENCY GAP
HTML5DEVCONF#@PHILHAWKSWORTH
what they
WANTGIVE THEM
HTML5DEVCONF#@PHILHAWKSWORTH
what they
NEEDGIVE THEM
HTML5DEVCONF#@PHILHAWKSWORTH
TENSION
HTML5DEVCONF#
~
@PHILHAWKSWORTH
AGENCYRESPONSIBILITY
HTML5DEVCONF#
~
@PHILHAWKSWORTH
DEVELOPERRESPONSIBILITY
HTML5DEVCONF#@PHILHAWKSWORTH
BRANDSSTAGEAUDIENCEBIG
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH GROLSCH.COM
HTML5DEVCONF#@PHILHAWKSWORTH BEETLE.COM
HTML5DEVCONF#@PHILHAWKSWORTH MCDONALDS.CO.UK
HTML5DEVCONF#@PHILHAWKSWORTH
38.28 MB405 HTTP REQUESTS1.1 MINUTE ONLOAD
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
by
EXAMPLELEARN
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH MILWAUKEEPOLICENEWS.COM
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
by
EXAMPLELEARN
HTML5DEVCONF#
is
@PHILHAWKSWORTH
CRAFTCODE
HTML5DEVCONF#@PHILHAWKSWORTH
TENSION
HTML5DEVCONF#@PHILHAWKSWORTH
~AVOIDLOCK-IN
HTML5DEVCONF#@PHILHAWKSWORTH
FREEDOM
HTML5DEVCONF#@PHILHAWKSWORTH
DODGEDODGEDODGEDODGE
CMS
HTML5DEVCONF#@PHILHAWKSWORTH
O RLY?
~
PARADOXTHE CMS
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
~ENTERPRISE
LEVEL
HTML5DEVCONF#@PHILHAWKSWORTH
~REASSURINGLY EXPENSIVE
HTML5DEVCONF#@PHILHAWKSWORTH
EXPENSIVE
HTML5DEVCONF#@PHILHAWKSWORTH
does not giveFLEXIBILITY FLEXIBILITY
CHOICE~
PARALYSIS
proportional to
HTML5DEVCONF#@PHILHAWKSWORTH
CHANGESCOST OFSYSTEMCOST OF
HTML5DEVCONF#@PHILHAWKSWORTH
POWERFUL WORKFLOW
HTML5DEVCONF#
versus
@PHILHAWKSWORTH
POWERFUL WORKFLOW
GETTINGSHIT DONE
orINTERN
CEO
HTML5DEVCONF#@PHILHAWKSWORTH
DEVELOPER
/ CTO/ CMO
HTML5DEVCONF#@PHILHAWKSWORTH
SUBVERT
CODE SMELLHTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
symptom in the source code that possibly indicates
a deeper problem
HTML5DEVCONF#@PHILHAWKSWORTH
CMSSMELL
HTML5DEVCONF#@PHILHAWKSWORTH
CMSSTINK
HTML5DEVCONF#@PHILHAWKSWORTH
ofEXAMPLES
STINK
HTML5DEVCONF#@PHILHAWKSWORTH
.html
.shtml
.pl
.php
.jsp
.asp
.aspx
HTML5DEVCONF#@PHILHAWKSWORTH
.html
.shtml
.pl
.php
.jsp
.asp
.aspx
to the
CONTENTCOUPLEDTECHNOLOGY
TIMBL SAYS
LOCK IN
http://global.burton.com
HTML5DEVCONF#@PHILHAWKSWORTH
http://global.burton.com/on/demandware.store
HTML5DEVCONF#@PHILHAWKSWORTH
http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site
HTML5DEVCONF#@PHILHAWKSWORTH
http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default
HTML5DEVCONF#@PHILHAWKSWORTH
http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default/Home
HTML5DEVCONF#@PHILHAWKSWORTH
http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default/Home
HTML5DEVCONF#@PHILHAWKSWORTH
-Show
HTML5DEVCONF#@PHILHAWKSWORTH
~ENTERPRISE
LEVEL
HTML5DEVCONF#@PHILHAWKSWORTH
ENTERPRISEFACEPALM
level
HTML5DEVCONF#@PHILHAWKSWORTH
http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default/Home-Show
LOCK IN
FUGLY
HTML5DEVCONF#@PHILHAWKSWORTH
URL DESIGN CRAFT
HTML5DEVCONF#@PHILHAWKSWORTH
MAKE URL DESIGN A PRIORITY
HTML5DEVCONF#@PHILHAWKSWORTH
URL STABILITY
tip
HTML5DEVCONF#@PHILHAWKSWORTH
SIREN OF SOCIAL MEDIAtip
HTML5DEVCONF#@PHILHAWKSWORTH
FACEBOOK LIKEStip
HTML5DEVCONF#@PHILHAWKSWORTH
PERFORMANCE
HTML5DEVCONF#@PHILHAWKSWORTH STEVE SOUDERS
OPTIMISATION
OPTIMISATION
HTML5DEVCONF#@PHILHAWKSWORTH
~
TUNINGOPTIMISATIONS
TRICKSCRAFT
CMS
HTML5DEVCONF#@PHILHAWKSWORTH
.net BURP
HTML5DEVCONF#@PHILHAWKSWORTH
UI HOOKS
HTML5DEVCONF#@PHILHAWKSWORTH
CLASSICSTINK
HTML5DEVCONF#@PHILHAWKSWORTH
MODULARITYFLEXIBILITY
&
HTML5DEVCONF#@PHILHAWKSWORTH
A GOOD THING
O RLY?
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
A MODULE / HTMLTARGETCSSJAVASCRIPT
HTML5DEVCONF#@PHILHAWKSWORTH
A MODULE / HTMLTARGETCSSJAVASCRIPT
ENCAPSULATEDREPEATABLE/
HTML5DEVCONF#@PHILHAWKSWORTH
A MODULE / HTMLTARGETCSSJAVASCRIPT
ENCAPSULATEDREPEATABLE/
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
~
RENDERING PERFORMANCE
KILLS
HTML5DEVCONF#@PHILHAWKSWORTH
~MAINTENANCE
NIGHTMARE
STINK
HTML5DEVCONF#@PHILHAWKSWORTH
MAKES SOUDERS CRY
HTML5DEVCONF#@PHILHAWKSWORTH
THOU SHALT NOTMAKE SOUDERS CRY
HTML5DEVCONF#@PHILHAWKSWORTH AMAZING DESIGNERS
HTML5DEVCONF#@PHILHAWKSWORTH
DESIGN EXPERTISE
HTML5DEVCONF#@PHILHAWKSWORTH
CORE FEATURE
HTML5DEVCONF#@PHILHAWKSWORTH
WYSIWYG
HTML5DEVCONF#@PHILHAWKSWORTH
WYSIWYGDANGER
WYSIWYGHTML5DEVCONF#@PHILHAWKSWORTH
DANGER
WYSIWYGHTML5DEVCONF#@PHILHAWKSWORTH
DANGER
WYSIWYGHTML5DEVCONF#@PHILHAWKSWORTH
DANGER
WYSIWYGHTML5DEVCONF#@PHILHAWKSWORTH
DANGER
WYSIwYGHTML5DEVCONF#@PHILHAWKSWORTH
DANGER
HTML5DEVCONF#@PHILHAWKSWORTH
WYSIWYG
WYSIWYG
WYSIWYG
$ ������������
WYSIWYG
WYSIWYGITE
HTML5DEVCONF#@PHILHAWKSWORTH
WYSIWYGITE
WYSIWTF
HTML5DEVCONF#@PHILHAWKSWORTH
the
MARKUPPROTECT
HTML5DEVCONF#@PHILHAWKSWORTH
<p class="footnote"><font size="4"> </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. </p><p class="footnote"> <em>• <a href="/Cancellation">Cancellation Policy</a></em></p><p class="footnote"> <em></em> </p>
HTML5DEVCONF#@PHILHAWKSWORTH
<p class="footnote"> </p> <p class="footnote"><strong></strong><strong></strong> </p><p class="footnote"> </p><p class="footnote"> </p> <p class="footnote"> </p> <p class="footnote"> </p> <p class="footnote"> </p> <p class="footnote"><strong></strong> </p><p class="footnote"> </p>
STINK
HTML5DEVCONF#@PHILHAWKSWORTH
ROUNDTRIPPING
CIRCULARSTINK
HTML5DEVCONF#@PHILHAWKSWORTH
MARKDOWN
HTML5DEVCONF#@PHILHAWKSWORTH
STRUCTUREDCONTENTCHANGE
HTML5DEVCONF#@PHILHAWKSWORTH
MANAGEnot
CONTENTDESIGN
HTML5DEVCONF#@PHILHAWKSWORTH
~AVOIDLOCK-IN
HTML5DEVCONF#@PHILHAWKSWORTH
TEACH A MAN TO FISH
HTML5DEVCONF#@PHILHAWKSWORTH
HOST A BBQ
http://www.flickr.com/photos/cmbellman/2576196608/
HTML5DEVCONF#@PHILHAWKSWORTH
RESEARCH PAPERSON INTENSIVE SALMON FARMING
HTML5DEVCONF#@PHILHAWKSWORTH
SAUSAGES
HTML5DEVCONF#@PHILHAWKSWORTH
BAD SAUSAGES
HTML5DEVCONF#@PHILHAWKSWORTH
theCHALLENGINGINTRODUCTIONOF STINK
HTML5DEVCONF#@PHILHAWKSWORTH
CONSTRAINTS CAN BE
ENABLERS
SIMPLICITYHTML5DEVCONF#@PHILHAWKSWORTH
CHOICE~
PARALYSIS
HTML5DEVCONF#@PHILHAWKSWORTH
OUR CMS DOESN’T SUPPORT MOBILE
WTF?
HTML5DEVCONF#@PHILHAWKSWORTH
...MOBILE MODULE CAN BE PURCHASED
HTML5DEVCONF#@PHILHAWKSWORTH
ENTERPRISEFACEPALM
level
HTML5DEVCONF#@PHILHAWKSWORTH
MANAGEnot
CONTENTDESIGN
HTML5DEVCONF#@PHILHAWKSWORTH
FUTURE FRIENDLY
SIMPLICITYHTML5DEVCONF#@PHILHAWKSWORTH
NEEDS
HTML5DEVCONF#@PHILHAWKSWORTH
WHAT CONTENT
to be
DYNAMIC?
HTML5DEVCONF#@PHILHAWKSWORTH
WHAT CONTENT
to be
DYNAMIC?REALLY NEEDS
REALLY?HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
ONE DAY, WE MIGHT WANT TO...
HTML5DEVCONF#@PHILHAWKSWORTH
YAGNI
HTML5DEVCONF#@PHILHAWKSWORTH
RUTHLESSLY PURSUE
SIMPLICITY
HTML5DEVCONF#@PHILHAWKSWORTH
~
SKILLSAVAILABLE
HTML5DEVCONF#@PHILHAWKSWORTH
orINTERN
CEO / CTO/ CMO
DEVELOPER
HTML5DEVCONF#@PHILHAWKSWORTH
DEVELOPER
HTML5DEVCONF#@PHILHAWKSWORTH
>
COMPLEX CMSHTML
HTML5DEVCONF#@PHILHAWKSWORTH
>
COMPLEX CMSDEV
AVOIDLOCK IN
HTML5DEVCONF#@PHILHAWKSWORTH
~
NOCMSCONSIDER
HTML5DEVCONF#@PHILHAWKSWORTH
CONVENTIONSPATTERNSGUIDANCETEMPLATING
TOOLS
JEKYLL github.com/mojombo/jekyll
OPTIMISATION
HTML5DEVCONF#@PHILHAWKSWORTH
COMMON AGENCY
APPROACH
HTML5DEVCONF#@PHILHAWKSWORTH
HTML5DEVCONF#@PHILHAWKSWORTH
USER EXPERIENCEDESIGNF/E DEV
INTEGRATION
HTML5DEVCONF#@PHILHAWKSWORTH
USER EXPERIENCEDESIGNF/E DEV
INTEGRATION
HTML5DEVCONF#@PHILHAWKSWORTH TO FINISH
HTML5DEVCONF#@PHILHAWKSWORTH
~
CMS STINKCHALLENGE
HTML5DEVCONF#@PHILHAWKSWORTH
~
CRAFTPROTECT YOUR
HTML5DEVCONF#@PHILHAWKSWORTH
FIGHT FOR THE CHANCE
TO DO GOOD ON THE WEB
HTML5DEVCONF#@PHILHAWKSWORTH
THANKS
LINKS
http://stephenwaller.tumblr.comhttp://www.flickr.com/photos/employtheskinnyboy/3523608412http://www.flickr.com/photos/bredgur/1323025528http://www.flickr.com/photos/ansik/3033147092http://www.flickr.com/photos/globevisions/2057289060http://www.flickr.com/photos/cmbellman/2576196608http://www.flickr.com/photos/ipeat/1492127164http://www.flickr.com/photos/adamkjems/3559454088http://www.flickr.com/photos/floradora1http://www.flickr.com/photos/flowercat/2723867176http://www.flickr.com/photos/timdrivas/6891133167http://www.flickr.com/photos/gasi/1418791186
http://hawksworx.comhttp://grabaperch.comhttp://github.com/mojombo/jekyllhttp://www.rachelandrew.co.uk/archives/2012/09/21/we-need-to-talk-about-content-management