Death of a Themer - Frontend United - 14 April 2013
Upcoming SlideShare
Loading in...5
×
 

Death of a Themer - Frontend United - 14 April 2013

on

  • 1,685 views

"Death of a themer" was presented by James Panton and myself at Frontend United on 14th April 2013. This was a revised and extended talk of the same name presented by James at DrupalCamp London on 2nd ...

"Death of a themer" was presented by James Panton and myself at Frontend United on 14th April 2013. This was a revised and extended talk of the same name presented by James at DrupalCamp London on 2nd March 2013.
http://www.slideshare.net/therealmcjim/death-of-a-themer-drupal-camplondon2013

Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do. They work alongside developers and site builders and are usually hammering out CSS files, overriding templates, writing theme functions and scratching their heads.

The thing is — and whisper this if possible redundancy concerns you — we can bypass the themer entirely.

With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.

A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.

This is an extended version of a session James did recently but will take a closer look at the tools and workflow we created and the design principles that initially drove us to this approach.

Statistics

Views

Total Views
1,685
Slideshare-icon Views on SlideShare
1,568
Embed Views
117

Actions

Likes
2
Downloads
8
Comments
0

2 Embeds 117

http://eventifier.co 79
https://twitter.com 38

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • James kicks off James Panton – developer – https://twitter.com/mcjim Matt Fielding – designer - https://twitter.com/MattF ielding We work at Code Enigma – http://www.codeenigma.com/
  • a previous talk by James of the same name can be found at http://www.slideshare.net/therealmcjim/death-of-a-themer-drupal-camplondon2013
  • Our team suffered a loss
  • when the themer died
  • Due to it ’ s moderate success a sequel was commissioned
  • new cast new plot
  • the themer still dies but this time we need to find out why
  • We need to find out more about our themer
  • theming is time consuming
  • can be really complex at times
  • markup isn ’ t ideal
  • He was often frustrated having to override stuff
  • Themer frustration levels can be seen here plotted onto a graph. 1. themer uses drupal for the first time 2. acceptance phase - blissful ignorance. learned to love the div and ignore all the classes. 3. has recently become frustrated again – now in the pit of despair as it ’ s too hard to emulate the beautiful markup of his peers, does get to use the cool tools and is forgetting skills
  • Matt steps in
  • So who did it? let look at each team member for motivations
  • The Developer
  • didn ’ t really know the themer
  • As well as being a designer he loved to write HTML & CSS and had a love of solving problems and tended to look at most things as a problem that needs solving.
  • Our designer sometimes felt excluded. Often not getting jokes about Drush.
  • He didn't always see eye to eye with the themer. It all started after the designer decided to use a 15 column grid on a project.
  • His official statement revealed a potential motivation
  • What did he mean about Principles and practices?
  • they are guides help us make decisions and solve problems most designers have design principles even if not written down They probably exist somewhere in our subconscious check out the site Jeremy Keith – http://principles.adactio.com/
  • these relate more to front end development can also be applied to design
  • for me this is really important key part of agile it applies in many ways but what do we mean by waste how do we know what is wasteful? deliverables can be wasteful http requests and bandwidth unused css files and javascript libraries reset scripts too
  • lots of tools out there. some are a better fit why is something better? It gets to an outcome faster
  • couple of months ago I wrote some of mine down
  • everything we send over the network should be carefully considered. relates to first 2 principles - we automatically reduce waste - we use the tools that support this way of thinking drupal has a culture of undoing - “ kill the div ”
  • first and really key content strategy and content modeling comes first designing around content helps minimise waste by not having to make assumptions
  • we should strive to get to code as quick as possible Many design tasks are faster to do in code especially if using a pre-processor grids, typography, color and we can demo and test much faster. especially handy for RWD. This practice really is driven by the first two design principles we need to be conscious about waste, and judge which steps are wasteful or not is starting in code the least wasteful way? probably not on most projects. But this is personal to each person depending on skills What i try to do 1. “ ugly “ sketching to make sense of everything 2. try to get into fireworks quickly but I don ’ t waste effort on making things look pretty - mainly rectangles and text - then quicky export into invision to show team ideas - client doesn ’ t see these 3. Start writing production standard html and css in a static site generator. again this depends on skill levels, but there are many tools to help us Why not skip phase 2? code isn ’ t a design medium in the documentary objectified - Jon Ive said “ one of the curses of being a designer constantly looking at something and thinking why is it like that and not like this? ” — this process is easier to do in a visual tool that is fast. (this is where skill set again makes a difference) Working out SMACSS modules is faster if you have something worked up - save time refactoring later
  • we avoid ‘ locking down ’ a workflow. treat the project workflow as a design challenge we apply our principles put content first, pick the tools that fit and reduce waste where we can
  • We build out static sites and parts of sites in html
  • what do i mean by pure and honest only has what is needed no interference, not dictated to by drupal only has the code we need completely optimised for performance and cross browser tested
  • onside of drupal - not that odd rarer inside of drupal community
  • this is why it ’ s rarer inside of drupal community
  • The traditional drupal workflow makes it very awkward to design in code and hand over. the site builder is often between the designer the themer
  • and creates most of the markup and css for the themer to undo themer starts in a sea of divs and classes and has to make sense of it all.
  • no wonder our designer is angry and wanting change
  • the traditional themer ’ s method is to start with the standard drupal output and try and make it match the design. A designer that codes will want the markup to match as well as the design
  • over to James and back to our investigation clearly the designer has a motive and is a suspect
  • But what about the site builder.
  • the themer went on holiday and left the rest of the team for a while
  • In other words “ how can we integrate html templates ”
  • he used http://hammerformac.com/
  • the prototype becomes part of the project git repo
  • The design folder contains the html prototype files
  • the CSS files are compiled into the prototype. BUT the .scss files start life in the drupal theme folder and the css file can be comile there at any time
  • Well, it could be a base theme, but so little is going to go into it, that it's not really necessary.
  • this approach relies on panels
  • We have a custom single column layout foe panels. Never needed one with more than 1 column yet.
  • You might see a pattern emerging. we strip out all wrapping elements again
  • We turn off all drupal css and js files.
  • some js files are tricky to remove. We use a hook
  • *Planer is being actively developed. please try it out and raise issues if you find them http://drupal.org/sandbox/mcjim/1899120
  • we use Display suite mainly for field markup
  • reset everything. Make “ reset ” the default layout
  • we use Display Suite expert mode to give us the control we need
  • view modes are massively important to group chunked content in different ways and mark up differently
  • we can get cleaner output with semantic views
  • Really important for the site builder. Is the site builder adding design here? Not at all, he is adding semantics and meta data. Classes aren ’ t style.
  • when we avoid template files we avoid a process where we squish our content into pre-defined buckets.
  • instead we use leverage drupal ’ s great content management features to work out what markup should be for our content. The content is king.
  • a common misunderstanding
  • our single column layout strips markup
  • the extra settings in Planer module - a fork of semantic panels http://drupal.org/sandbox/mcjim/1899120
  • standard article node page
  • the same page using the earlier mentioned modules
  • use panels/planer to add markup and meta data
  • planer won ’ t limit the elements we can use.
  • we can quickly give our content meaning through the UI
  • They've already been written for you, see!
  • we use a additive approach
  • The site builder is adding semantics and structure to content. NOT design. this is their job.
  • use panels for layout classes. If you use SMACSS - layout classes (.l-container) will be set in panels
  • all the settings from the UI are exportable into code and version controlled. If a designer makes a markup change during a build, they can tweak the code and push a commit
  • back to Matt for the big reveal
  • So were the designer, site builder and developer in cahoots... and responsible for this crime? No! It turned out that none of them were the killers.
  • It was their project manager
  • It turns out that he overheard their conversation, believed in the workflow and decided to take matters into his own hands.
  • 4 main points to take away
  • style is not tacked on at the end designers are part of the agile team through the lifetime of the project ux work happens constantly as well as testing
  • how should we change our workflow
  • before
  • after a tight grouping of design with front end dev (our themer joins our designer) but both roles could be handle by a single person very little cross over between front end dev and site building tasks the vertical line is the UI line. designers and front end devs don ’ t need to click around the UI. Leave that to the site builder The developer is more involved with site building, setting up the module etc
  • the process of handing over html to the sitebuilder happens at many points in the project lifetime, not all up front
  • the effort of each team member is easier to balance than on the traditional workflow
  • site builders have the html as a guide so don ’ t have to make decisions regarding css naming etc certainly won ’ t need to touch the css clear split in task, which solve some issues with git workflow
  • the major point to make here
  • you ’ re the BOSS
  • in typical marvel style we have a stinger http://en.wikipedia.org/wiki/Post-credits_scene
  • it was a comic book death http://en.wikipedia.org/wiki/Comic_book_death the themer lived and re-invented himself as a frontend developer
  • the new frontend dev had some cool toys
  • nobody likes a sociopath!

Death of a Themer - Frontend United - 14 April 2013 Death of a Themer - Frontend United - 14 April 2013 Presentation Transcript

  • Hello, we’re James and Matt@mcjim and @MattFieldingfrom Code Enigma
  • developersite builderthemerdesigner
  • developersite builderthemerdesigner
  • developersite builderthemer (deceased)designer
  • the life of a themer
  • overworkedthe life of a themer
  • overworkedangrythe life of a themer
  • overworkedangryfrustratedthe life of a themer
  • overriding stuff overriding stuff overridingstuff overriding stuff overriding stuffoverriding stuff overriding stuff overridingstuff overriding stuff overriding stuffoverriding stuff overriding stuff overridingstuff overriding stuff overriding stuffoverriding stuff overriding stuff overridingstuff overriding stuff overriding stuffoverriding stuff overriding stuff overridingstuff overriding stuff overriding stuffoverriding stuff overriding stuff overridingstuff overriding stuff overriding stuffoverriding stuff overriding stuff overridingstuff overriding stuff overriding stuffoverriding stuff overriding stuff overridingstuff overriding stuff overriding stuff
  • happinesstimethe theming curve
  • Murder Investigation
  • developersite builderdesignerwhodunnit?
  • the developer?whodunnit?
  • “...to be honest, I never really saw the themer.We worked on different floors.”official statement
  • the designer?whodunnit?
  • excluded
  • 15 columns, why? arrgghh $£@^£$%
  • “...there was a clash between my personal designprinciples and practices and his methods”official statement
  • what did he mean bydesign principlesand practices?
  • Textthey are guides for the way we approachproblems and craft our methodsdesign principles
  • here are 3 to start us off
  • minimise wastewaste is any activity whereno value is produced
  • use the best toolspick the tools that fit your workflow
  • PreprocessorsSass - CSS preprocessingLess - similar to SassStylus - a good but less popularpreprocessorSusy/Singularity/ZenGrids/GridSet - gridsystem generatorsCompass - add-on functionality for Sass likevertical rhythm, sprites, css3 etcBourbon - Similar to Compass much to theirdismayToolkit - A few nice extras to have -https://github.com/Snugug/toolkitCSS FrameworksSMACSS - styleguide/framework fordeveloping css that is both modular andscalableOOCSS - object oriented CSS - more strictthan smacssStyleguide generationKSS - uses comments in files to generate astyleguide - http://warpspire.com/posts/kss/Typecast - quick way to generate styles fortypeClarify - http://www.clarify.ioStyle-Sites -https://github.com/snugug/style-sitesBrowsersChrome - Supports Sass in the webinspector - needs sass debugging turned onCanary - Same as above but also supportssource mapsSafari - can use the desktop web inspectoron the remote iphone/ipad siteStatic page generatorsHammer for Machttp://hammerformac.com/Middleman - a bit more complex - requirescommand line http://middlemanapp.com/CodeKit -http://incident57.com/codekit/index.phpMixture.io http://mixture.io/Serve - Riby gemhttps://github.com/gummesson/serveTestingLive ReloadGuard - command line tool, faster thanlive-reloadAdobe Edge Inspect -http://html.adobe.com/edge/inspect/Mixture.io - http://mixture.io/Virtual Box with Windows XP andsnapshots with IE6, IE7, IE8Lots of devicesTypographytypecast - http://typecast.com/ - canpreview fastColourKuler - https://kuler.adobe.com/Colour Lovers -http://www.colourlovers.com/Color Scheme Designer -http://colorschemedesigner.com/http://color.hailpixel.com/Static image prototypingInvisionApp - very slick -http://invisionapp.com/Shipment - nice dropbox integration -http://blog.shipmentapp.com/Browser ExtentionsWeb Inspector - needs sass debuggingturned on and experimental modeSpeed TracerYSlowAdobe edge InspectLive ReloadVisual design and layoutFireworks - for working outPhotoshop - mainly for image manipulationInDesign - some very useful tools forwireframesIllustrator - creating SVG files andillustrationsUXPin - http://uxpin.com/Useful websites and guidesHTML5 Please - http://html5please.com/Javascript Compression Tool -http://jscompress.comCompass - http://compass-style.org/examples/compass/HTML 5 Outliner -http://gsnedders.html5.org/outliner/Fontello - Icon Font generator -http://fontello.com/http://responsivepx.com/http://css3gen.com/button-generator/Sharing and experimenting with codeDabblet - http://dabblet.com/JS Fiddle - http://jsfiddle.net/CodePen - http://codepen.io/Practical tipsStart with pens and paper
  • add – don’t removeonly include what we want and need
  • Textdesign principles are used as guides to informthe decisions we make as designers – primarilythe practices we use to designdesign practices
  • work with real contentcontent strategy and modeling shouldcome before design
  • get to code quicklydoing so also minimises a lot of waste
  • design a process for each jobeach project is different, so designa unique process for each
  • what happens if we followthese design principles andpractices
  • static html
  • pure and honest
  • these principles andpractices can be appliedby any designer/frontenddeveloper
  • what problems doesthis cause us?
  • traditional Drupal workflow
  • traditional Drupal workflow
  • traditional Drupal workflowangry viking god themerdrowning in a sea of divs
  • “...there was a clash between my personal designprinciples and practices and his methods”official statement
  • Murder Investigation
  • the site builder?whodunnit?
  • “...I always got on really well with the themer.Hadn’t seen him much since he went on holiday,though.”official statement
  • so, what happened whenthe themer went onholiday?
  • designer, site-builder anddeveloper were left to copewithout a themer
  • developer and site-buildercame up with a plan…
  • they knew the designerwas frustrated and wantedto try new methods ofworking
  • so, they let the designerdo what he wanted…
  • …and figured out a way ofgetting Drupal to outputthat without the help of athemer
  • theming without a themerSTEP ONE
  • the designer builtprototypes in HTML
  • designer handedHTML, CSS and JSover to the site builder
  • CSS and JS wasplaced in the theme**can be created there in the first placeHTML was used asa markup guide
  • theming without a themerSTEP TWO
  • the developer setone or two things upfor the site builder
  • required code
  • a basic theme
  • base theme?
  • <div id="page-wrapper"><div id="page"><div id="header"><div class="section clearfix"><?php if ($logo): ?><a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home" id="logo"><img src="<?php print $logo; ?>" alt="<?php print t(Home); ?>" /></a><?php endif; ?><?php if ($site_name || $site_slogan): ?><div id="name-and-slogan"><?php if ($site_name): ?><?php if ($title): ?><div id="site-name"><strong><a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><?php print $site_name; ?></span></a></strong></div><?php else: /* Use h1 when the content title is empty */ ?><h1 id="site-name"><a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><?php print $site_name; ?></span></a></h1><?php endif; ?><?php endif; ?><?php if ($site_slogan): ?><div id="site-slogan"><?php print $site_slogan; ?></div><?php endif; ?></div> <!-- /#name-and-slogan --><?php endif; ?><?php print render($page[header]); ?></div></div> <!-- /.section, /#header --><?php if ($main_menu || $secondary_menu): ?><div id="navigation"><div class="section"><?php print theme(links__system_main_menu, array(links => $main_menu, attributes => array(id => main-menu, class => array(links, inline, clearfix)), heading => t(Main menu))); ?><?php print theme(links__system_secondary_menu, array(links => $secondary_menu, attributes => array(id => secondary-menu, class => array(links, inline, clearfix)), heading => t(Secondary menu))); ?></div></div> <!-- /.section, /#navigation --><?php endif; ?><?php if ($breadcrumb): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?><?php print $messages; ?><div id="main-wrapper"><div id="main" class="clearfix"><div id="content" class="column"><div class="section"><?php if ($page[highlighted]): ?><div id="highlighted"><?php print render($page[highlighted]); ?></div><?php endif; ?><a id="main-content"></a><?php print render($title_prefix); ?><?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?><?php print render($title_suffix); ?><?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?><?php print render($page[help]); ?><?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?><?php print render($page[content]); ?><?php print $feed_icons; ?></div></div> <!-- /.section, /#content --><?php if ($page[sidebar_first]): ?><div id="sidebar-first" class="column sidebar"><div class="section"><?php print render($page[sidebar_first]); ?></div></div> <!-- /.section, /#sidebar-first --><?php endif; ?><?php if ($page[sidebar_second]): ?><div id="sidebar-second" class="column sidebar"><div class="section"><?php print render($page[sidebar_second]); ?></div></div> <!-- /.section, /#sidebar-second --><?php endif; ?></div></div> <!-- /#main, /#main-wrapper --><div id="footer"><div class="section"><?php print render($page[footer]); ?></div></div> <!-- /.section, /#footer --></div></div> <!-- /#page, /#page-wrapper -->
  • <div id="page-wrapper"><div id="page"><div id="header"><div class="section clearfix"><?php if ($logo): ?><a href="<?php print $front_page;?>" title="<?php print t(Home); ?>" rel="home" id="logo"><img src="<?php print $logo; ?>" alt="<?php print t(Home); ?>" /></a><?phpendif; ?><?php if ($site_name || $site_slogan): ?><div id="name-and-slogan"><?php if ($site_name): ?><?php if ($title): ?><div id="site-name"><strong><a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><?php print $site_name; ?></span></a></strong></div><?php else: /* Use h1 when the content title is empty */ ?><h1 id="site-name"><a href="<?php print $front_page;?>" title="<?php print t(Home); ?>" rel="home"><span><?php print $site_name; ?></span></a></h1><?php endif; ?><?php endif; ?><?php if($site_slogan): ?><div id="site-slogan"><?php print $site_slogan; ?></div><?php endif; ?></div> <!-- /#name-and-slogan --><?php endif; ?><?php print render($page[header]); ?></div></div> <!-- /.section, /#header --><?php if ($main_menu || $secondary_menu): ?><divid="navigation"><div class="section"><?php print theme(links__system_main_menu, array(links => $main_menu, attributes => array(id=> main-menu, class => array(links, inline, clearfix)), heading => t(Main menu))); ?><?php printtheme(links__system_secondary_menu, array(links => $secondary_menu, attributes => array(id => secondary-menu, class =>array(links, inline, clearfix)), heading => t(Secondary menu))); ?></div></div> <!-- /.section, /#navigation --><?php endif; ?><?php if ($breadcrumb): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?><?php print $messages; ?><div id="main-wrapper"><div id="main" class="clearfix"><div id="content" class="column"><div class="section"><?php if ($page[highlighted]): ?><divid="highlighted"><?php print render($page[highlighted]); ?></div><?php endif; ?><a id="main-content"></a><?php printrender($title_prefix); ?><?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?><?php printrender($title_suffix); ?><?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?><?php printrender($page[help]); ?><?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?><?php print render($page[content]); ?><?php print $feed_icons; ?></div></div> <!-- /.section, /#content --><?php if($page[sidebar_first]): ?><div id="sidebar-first" class="column sidebar"><div class="section"><?php printrender($page[sidebar_first]); ?></div></div> <!-- /.section, /#sidebar-first --><?php endif; ?><?php if ($page[sidebar_second]): ?><div id="sidebar-second" class="column sidebar"><div class="section"><?php print render($page[sidebar_second]); ?></div></div> <!--/.section, /#sidebar-second --><?php endif; ?></div></div> <!-- /#main, /#main-wrapper --><div id="footer"><div class="section"><?phpprint render($page[footer]); ?></div></div> <!-- /.section, /#footer --></div></div> <!-- /#page, /#page-wrapper -->
  • <?phpprint $content;
  • <?phpprint $content;
  • <div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>> <?php printrender($title_prefix); ?><?php if ($block->subject): ?> <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2><?phpendif;?> <?php print render($title_suffix); ?> <div class="content"<?php print $content_attributes; ?>> <?php print $content ?></div></div><?phpprint $content;
  • <?phpprint $content;
  • <?phpprint $content;
  • a panels layout or two
  • /*** Implements hook_ctools_plugin_api().*/function ce_panels_ctools_plugin_api($module, $api) {if ($module == panels && $api == styles) {return array(version => 2.0);}if ($module == page_manager && $api == pages_default) {return array(version => 1);}if ($module == "panels_mini" && $api == "panels_default") {return array("version" => "1");}}/*** Implements hook_ctools_plugin_directory()*/function ce_panels_ctools_plugin_directory($module, $plugin) {if ($module == page_manager || $module == panels || $module == ctools) {return $plugin;}}
  • <?php/*** @file* Layout definition for Code Enigma one column layout.*//*** Panel layout definition.*/$plugin = array(title => t(Code Enigma One Column),category => t(Code Enigma),icon => ce_one_column.png,theme => ce_one_column,regions => array(content => t(Content),),);
  • <?php/*** @file* Layout template for Code Enigma one column layout.** Regions:* - content*/if (isset($content[content])) {print $content[content];}
  • a method for turning off allsupplied CSS and JS
  • /*** Implements hook_js_alter().*/function mytheme_js_alter(&$js) {if (user_is_anonymous()) {$path_to_theme = path_to_theme();$allowed_js = array(settings,misc/jquery.js,sites/all/modules/contrib/google_analytics/googleanalytics.js,);foreach ($js as $key => $script) {if (!is_numeric($key) && !in_array($key, $allowed_js) &&strpos($key, $path_to_theme) === FALSE) {unset($js[$key]);}}}}
  • theming without a themerSTEP THREE
  • add a few modules
  • display suitesemantic viewspanelspanels everywheresemantic panels**using a forked version atmhttp://drupal.org/sandbox/mcjim/1899120
  • display suite
  • control over fieldand node markup
  • <img width="120" height="289" alt="useful alt text, ta"src="/files/my_image.jpg" />
  • <div class="field field-name-field-image field-type-imagefield-label-hidden"><div class="field-items"><div class="field-item even"><img width="120" height="289" alt="useful alt text, ta"src="/files/my_image.jpg"></div></div></div>
  • view modes
  • semantic views
  • panelspanels everywheresemantic panels
  • an interface for wrappingcontent with markup
  • CONTENT<MARKUP> </MARKUP>
  • CONTENT<MARKUP> </MARKUP>
  • doesnt panels addloads* of divs?*seriously, loads
  • <?php/*** @file* Layout template for Code Enigma one column layout.** Regions:* - content*/if (isset($content[content])) {print $content[content];}
  • what do we end up with?
  • a real example
  • some rules
  • never write a .tpl.php
  • never write a .tpl.phpunless you really have to
  • start by outputting nomarkup at all
  • add markup via the UI
  • think carefully about whereyou add your layoutclasses
  • use Features andzero-touch deployment
  • Murder Investigation
  • was it a team effort?whodunnit?
  • whodunnit?
  • was it a team effort?whodunnit?
  • project managerthe PM did it
  • what have we learnedfrom this sorry tale?
  • design driven
  • give higher priority to the frontendlet designers take advantage ofthe best tools to improve speedand reduce wastegroup design & frontend dev
  • team structure
  • traditional Drupal workflow
  • new Drupal workflow
  • new Drupal workflow
  • split team effort evenly insprints – creates a closerworking relationship acrossteam disciplinesopen up opportunities forcontractors from outsideof Drupal
  • consistency
  • remove a layer ofcomplexity forsite buildersmarkup is managedin UI only
  • dictate
  • reverse traditionaldrupal working methodstake an uncompromisingapproach to your markupdon’t let Drupal tell youwhat it should be – you show itwho’s boss
  • thank you!
  • epiloguewhat happened to the team?
  • the designer was happy
  • site builder had an easy life
  • sprints were productive
  • the themer SURVIVED and adopted anew identity as a frontend developer
  • which was a greatfit for the team
  • there were trust issues withthe PM so he moved on
  • the end
  • questions?
  • exit@MattFielding@mcjim