fronteers - drupal 7 ux
DESCRIPTION
A talk we gave at Fronteers meeting in March.TRANSCRIPT
![Page 1: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/1.jpg)
Drupal 7 User Experience
Bojhan Somers & Roy Scholten
![Page 2: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/2.jpg)
Drupal 7
• Fields (CCK in core)• Image handeling• Update manager• RDF• Database abstraction layer• Simpletest• Much more..
![Page 3: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/3.jpg)
Drupal’s Usability
*sucks*
![Page 4: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/4.jpg)
Drupal’s unusability
2008• 2 Usability lab tests• Dries zegt dat het gefixed moet
worden• UX-team vormt zich
![Page 5: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/5.jpg)
2009: Drupal 7UX
Mark Boulton Leisa Reichelt
![Page 6: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/6.jpg)
Grooste problemen
• Wat is de voorkant (site) en de achterkant (admin)?
• Waar vind ik mijn content?• Waar vind ik mijn functionaliteit?• Veel kleine problemen
![Page 7: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/7.jpg)
Kern van het probleem
• Drupal 6 : focus puur op developer• Drupal 7 : focus ook op content
schrijver
![Page 8: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/8.jpg)
Probleem 1
Wat is de voorkant (site) en de achterkant (admin)?
![Page 9: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/9.jpg)
![Page 10: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/10.jpg)
Probleem 2
Waar vind ik mijn content?
![Page 11: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/11.jpg)
![Page 12: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/12.jpg)
Probleem 3
Waar vind ik mijn functionaliteit?
![Page 13: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/13.jpg)
![Page 14: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/14.jpg)
![Page 15: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/15.jpg)
![Page 16: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/16.jpg)
![Page 17: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/17.jpg)
Probleem 4
Kleine problemen• Teksten• Workflow
![Page 18: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/18.jpg)
Before
After
![Page 19: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/19.jpg)
Before
After
![Page 20: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/20.jpg)
Contextual links
![Page 21: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/21.jpg)
Actions
![Page 22: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/22.jpg)
Module links
![Page 23: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/23.jpg)
Nog veel meer…
• Dashboard• Shortcuts• Default installation profile• Vertical tabs• Password checker• Poormans cron• En nog veeeel meer…
![Page 24: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/24.jpg)
Theming Drupal 7
![Page 25: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/25.jpg)
Less is more…
![Page 26: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/26.jpg)
Bye-bye ugly old themes
![Page 27: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/27.jpg)
What about Garland?
![Page 28: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/28.jpg)
New front-end theme in progress
![Page 29: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/29.jpg)
New admin theme: Seven
![Page 30: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/30.jpg)
New theming tools
![Page 31: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/31.jpg)
New no-theme: Stark
![Page 32: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/32.jpg)
More focus on front-end code
Cleaner core .tpl files CSS re-organised More theming power / flexible rendering
![Page 33: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/33.jpg)
tpl.php ("tipplephip")
![Page 34: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/34.jpg)
html.tpl.php
![Page 35: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/35.jpg)
Page anatomy
![Page 36: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/36.jpg)
region.tpl.php
![Page 37: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/37.jpg)
CSS
![Page 38: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/38.jpg)
Dynamicly add classes
![Page 39: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/39.jpg)
Everybody hates system.css
system.css splitup
system.css – for presentation system-behavior.css – for widgets like drag&drop, autocomplete textfields, collapsible fieldsets etc.
![Page 40: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/40.jpg)
CSS code styleold new
http://drupal.org/node/302199
![Page 41: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/41.jpg)
php
![Page 42: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/42.jpg)
Flexible rendering
![Page 43: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/43.jpg)
themes can hook_form_alter
hook_page_alterbewerk de pagina voordat deze gerendered wordt
hook_form_alterbewerk formulieren voordat deze gerenderd worden
hook_js_alterjavascript wijzigen
hook_css_alterbewerk of verwijder CSS (-files) voordat de page gerenderd wordt
![Page 44: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/44.jpg)
hook_form_alter example
![Page 45: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/45.jpg)
hook_form_alter example, 2
![Page 46: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/46.jpg)
And much much more…
![Page 47: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/47.jpg)
Changes, changes
jQuery UI 1.8 in core D6: node-article.tpl.php > D7: node--article.tpl.php $footer, $slogan, $help vars turned into regular blocks
Main $content made into a block, with 'content' a new mandatory region All theme functions now take a single argument, $variables
Upgrade docs: http://drupal.org/update/theme/6/7
![Page 48: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/48.jpg)
Is Drupal 7 ready yet?
Almost there…
![Page 49: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/49.jpg)
For D6: Mothership theme Core:
Mothership:
![Page 50: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/50.jpg)
For D6: Semantic views moduleBefore After
![Page 51: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/51.jpg)
Tips for Drupal 6 fronteers…
Mothership theme – clean html css base themehttp://drupal.org/project/mothership
Semantic views module – cleaner views outputhttp://drupal.org/project/semanticviews
Lichtgewicht CSS theming voor Drupal 6 – theming introductiehttp://www.yoroy.com/node/12
![Page 52: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/52.jpg)
Theming docs & info
Upgrade docs: http://drupal.org/update/theme/6/7
Theme functions:http://api.drupal.org/api/group/themeable/7
Presentation video:Explore the glory of Drupal7s improved render and theming systems (http://ow.ly/1qw31 )
![Page 53: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/53.jpg)
Design in open source
Few designers: pick your battles Communicating design to a large audience is hard "You are not your target audience" – 1 UX designer overrules 700 developer opinions…
![Page 54: Fronteers - Drupal 7 ux](https://reader034.vdocuments.mx/reader034/viewer/2022042713/546a91aaaf79596c268b5c4e/html5/thumbnails/54.jpg)
Dank u!
vragen?
@bojhan / @royscholten