forensic theming - drupal theming design, ux and theming emma jane hogbin @emmajanedotnet
TRANSCRIPT
Forensic Theming
Design, UX and Theming
Emma Jane Hogbin
@emmajanedotnet
www.designtotheme.com
drupal.org participation● emmajane● uid: 1773● First look at the Drupal code base: 2003ish.
I stole the i18n table structure.● First Drupal site “for pay”: 2006ish.● First Drupal socks: 2007.
● First DrupalCon conference: Szeged in 2008.● First Drupal book: 2009.
● First Drupal core patch: 2010.Removed the “welcome” screen.
Really Tiny Web Budgets
The Socks
http://www.flickr.com/photos/mortendk/1439332466/
www.emmajane.net/craft/drupal
Book (Co)Author
Workbook Author
www.designtotheme.com
Discount Code: DCLON87488
Valid to the end of August.
Lazy Front End Developer
I'll just change this one tpl.php filehttp://www.flickr.com/photos/gibbons/2500423526
Okay ... and a module file?
and ...
... everything else too? Bugger.http://www.flickr.com/photos/amagill/3225245292
This presentation is not about ...● Best practices
● Anything advanced
● Design
● Semantic markup
● Responsive Web design
● Typography
● Grids (maybe a little bit)
● CSS optimization
● CSS preprocessing
● Rick Astley
● PHP
● Hooks
● Inheritance● HTML5● Photoshop● Web systems● Theming APIs● Mobile devices● Unicorns● Sprites● In-the-browser design● Sliding doors● Gradients● IE6
Advanced Theming SessionsDisplay Suite
Tuesday 17:00 - NodeOne Road - Fairfield Room
http://tinyurl.com/dclondon-displaysuite
Theming API
Tuesday 15:45 - NodeOne Road - Fairfield Room
http://tinyurl.com/dclondon-themingapi
Responsive Design
Thursday 11am - Axis 12 Street - Arnhem Gallery
http://tinyurl.com/dclondon-responsivedesign
Forensic Theming
Best PracticesDissecting Themes
Agenda
Tools for Forensic Theming● Sweaver● Firebug● Devel Themer
Theming Tools● Sketchbooks● Wireframes● Data models● Grid frameworks
Summary● Questions/Answers● Bonuses
Theme Building● Base themes● Image extraction● MVTs● Forensic styling
● CSS Frameworks
● Base themes
● Layout modules
● Text editors
The Crime
Crime Scene
Forensic Theming
Definition: the art of investigating a Drupal page to find out how that thing got there.
Two Types of Clues
Crime Scene InvestigationWorking with the rendered page:● Available CSS selectors.● Applied CSS styles.
Crime Lab ForensicsWorking with Drupal code files:● Theme templates● Module templates● Hard coded module nonsense
Crime Scene
Working with rendered pages. You can only look at the effects of Drupal on a rendered page.
Identifying CSS SelectorsWith Sweaver
● Common newbie problem: being able to find relevant CSS selectors.
● Sweaver can be used as a pointy-clicky-non-scary CSS class selector.
● Can save/publish minor changes to CSS to live Web sites.
● http://drupal.org/project/sweaver
Sweaver User Interface
Click on Stuff
See How a Selector Will Be Applied
Change CSS propertiesSee the changes
CSS selector to use in your theme
Identifying What's AppliedWith Firebug
● Common newbie problem: trying to identifying what CSS styles are being applied by staring at code.
● Firebug can be used to identify what CSS is actually being applied to a rendered Web page.
● www.getfirebug.com
Locate Properties of Page Elements
Relevant HTML source
Page element CSS styles
Risky Live Firebug Demo● http://d7.sandbox/sbe-site3/● Inspect element.● Edit CSS properties.● Edit CSS files.● Cannot publish changes.● www.getfirebug.com
Other Useful Browser Tools● Web Developer Toolbar
http://chrispederick.com/work/web-developer/● IE Web Developer Toolbar
http://tinyurl.com/ie-web-dev-toolbar
Forensics
Devel / Themer
● The Cadillac of theming tools.● Tells you which tpl.php or theme function is
responsible for that thing displaying over there.● http://drupal.org/project/devel_themer● http://drupal.org/project/devel
Point, Click, Analyse
1. Enable Themer Info2. Click on the thing you want to investigate
3. Analyse the list of functions, templates, variables, etc which control this page element.
Investigate What Themer Reveals
Also go to: http://api.drupal.org
Ooops.
No risky live demo.
Making It Easier
node.tpl.php
page.tpl.php
field.tpl.php
jplayer.tpl.php
content
Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
I want less yucky markup!
Less Yucky Markup● European vs American theming● Inheritance: start with a better base.● Base theme: mothership● Modules: Semantic Views● D6 Modules: Semantic CCK● HTML5 http://drupal.org/project/html5_tools
Theming Tools
Sketchbook
Wire Frames
www.balsamiq.com
Data Model
http://www.flickr.com/photos/alan-dean/3513723498
Grid Framework
http://960.gs/
Want to Learn Grids?
Harass @markboulton and tell him to finish his book.
http://www.fivesimplesteps.com/
Do it.
Right now.
Tweet him.
And tell him if he doesn't finish his book you're going to build exclusively 16-column, grid-based Web sites until his book his published.
CSS (Grid) Framework
Base Theme
● drupal.org/project/ninesixty● drupal.org/project/fusion● drupal.org/project/zen
Drupal (Layout) Modules● Context http://drupal.org/project/context ● Display Suite http://drupal.org/project/ds ● Panels http://drupal.org/project/panels
Text Editor
Use anything that doesn't make youwant to punch someone in the face.
Build me a theme!
Steps to Making a Theme
1. Communicate with your whole team.
2. Plan your data structure.
3.Use wire frames to prove what you're saying about how the site ought to be built.
4.Build the site (ignore the theme).
5.Convert your wire frame to a grid layout.
6.Build out the HTML fragments in the relevant tpl.php files.
7. Apply your theme to the site.
8.Refine as necessary based on the UX.
Domicile● Designed by Betty Biesenthal.● Themed by Emma Jane Hogbin.● Available from http://drupal.org/project/domicile● Described in Drupal: a user's guide
Theme Folder
sites/example.com/themes/theme_name theme_name.info page.tpl.php
Also: sites/all/themes/base_theme
theme_name.info (1 of 2)name = D7SBE - Domicile
description = A three-column design by Design House (www.design-house.ca) and themed by Design to Theme.
screenshot = screenshot.png
core = 7.x
engine = phptemplate
base theme = ninesixty
; Stylesheets.
stylesheets[all][] = styles.css
; To show the 960.gs grid and debug your theme's layout, delete this section.
; You will be able to remove this when http://drupal.org/node/1032486 is rolled out
stylesheets[all][] = debug.css
theme_name.info (2 of 2); Regions
regions[nav_left] = Navigation (left)
regions[feature_middle] = Feature column (middle)
regions[content] = Content column (right)
regions[copyright_footer] = Copyright notice (footer)
; Features
features[] = logo
features[] = name
features[] = favicon
page.tpl.php
Hard Code Relevant Images
Minimum Viable Theme
Locate Properties of Page Elements
Relevant HTML source
Page element CSS styles
styles.css
Domicile: the theme
Summary● Plan. Think. Build. Test. Theme. Iterate.● Use relevant Drupal modules to break up content and display it
in relevant locations.● Use Sweaver to isolate selectors for your CSS files.● Use Firebug to diagnose and fix CSS problems.● Use Devel to isolate theme functions and variables.● Correlate the number of tpl and PHP files you edit to the size of
your budget and amount of time you have.
Available September 2011
The practical guide to building sites with Drupal.
Pre-order eBook edition on
and SAVE 45%!
Use Coupon Code
IUGD45 at Step 3 of Checkout
Theming Birds of a Feather Sessions● Advanced Theming
Time slot: 24 August 13:45 – 14:45Room 333 Part 1
● Front End DevelopmentTime slot: 25 August 13:30 – 14:30Room 333 Part 2
● Theming in Drupal 8Time slot: 25 August 14:45 – 15:45Room 333 Part 2
What did you think?Locate this session on the DrupalCon London website:http://london2011.drupal.org/conference/schedule
Click the “Take the survey” link
Discounts'n'stuff45% off Drupal User Guidewww.informit.com Code: IUGD45
45% off Design to Theme workbookswww.designtotheme.com Code: DCLON87488
www.sitebuildingextravaganza.com
Advanced ThemingTime slot: 24 August 13:45 – 14:45Room 333 Part 1
Front End DevelopmentTime slot: 25 August 13:30 – 14:30Room 333 Part 2
Theming in Drupal 8Time slot: 25 August 14:45 – 15:45Room 333 Part 2
BoFs
