Child Theme Frameworksthrough the lens ofUser Experience             RYAN GREEN   @RYNGRN   RYANGREEN.INFO   #WCNASH12
Hi, I’m Ryan.Also known as Ryan Green.
I do User Experience.And love every second.
UX… what does it mean?No, it’s not double rainbow intense.
InteractionsDesign                  Analytics          Usability
Who engages in UX?Hint: it’s someone you know.
You do!Told ya you knew.
Everyone has a uniqueexperience.
Child ThemesWho. What. When. How. Etc. WTF.
What are child themes? Straight from the horse’s mouth: “A WordPress child theme is a theme that inherits the functionalit...
And a theme framework?More from the codex:A stand-alone base/starter theme that is intendedeither to be forked into anothe...
Advantages to using a frameworkto create your child theme?
Advantage 1:Start with abulletproof themethat works out of thebox.
Advantage 1:Start with abulletproof themethat works out of thebox.
Advantage 2:In event of total meltdown…
Just delete itAnd start over!
Advantage 3:Roll multiple newthemes from acustom theme youalready created in notime!
Advantage 4:Stays up to date withlatest WordPressfunctionality &security.
Advantage 5:You don’t need to know PHP!The learning curve for developing new themeelements, moving or adding widgetized ar...
Advantage 6:Visual design principles can be baked in.                                            nataliedee.com
Disadvantages to usingframeworks?
Disadvantage 1:Commitment! Picking a schema means you arelocked-in to learning it and using it.
Disadvantage 2:Creativity and visualdesign may be requiredin minimalist themes.
Disadvantage 3:Code bloat. Whena theme tries to beeverything to allpeople, it canmake for big files!
When to Use a Framework• When you are unfamiliar with PHP• When a solid codebase and security  is crucial• When duplicatin...
So what makes a goodframework?How it feels or tastes? Best gradient? Blondest hair?
A Good Theme…  Respects the Grid   Uses Modern Code  Easily Remodeled    Cares About Usability
Respects the Grid• Consistent spacing• Utilizes a common grid system• Has a clear visual hierarchy
Uses Modern Code• HTML5• CSS3• jQuery• HTML5shiv / modernizr.js
Easily Remodeled• Core functionality• Widgetized areas• Navigation areas• Use the House Hunters approach
Cares About Usability• Phone. Tablet. Laptop. Desktop.• IA-friendly• Those with disabilities in your  target audience
Included Frameworks   Twenty-Ten     Twenty-Eleven
Genesis   http://www.studiopress.com/themes/genesis          • Many child themes pre-made          • Tried and tested by t...
Genesis                               http://www.studiopress.com/themes/genesisStandard Layout. Easy to customize.
Genesis                               http://www.studiopress.com/themes/genesisStandard Layout. Easy to customize.
Genesis                               http://www.studiopress.com/themes/genesisStandard Layout. Easy to customize.
Thematic   http://themeshaper.com/thematic/           • Many child themes pre-made           • Also tried and tested by th...
Thematic                  http://themeshaper.com/thematic/Minimalist. Extendable.
Thematic                  http://themeshaper.com/thematic/Minimalist. Extendable.
Thematic                  http://themeshaper.com/thematic/Minimalist. Extendable.
Thesis   http://diythemes.com/         • Design-forward theme         • Optimized for load-times         • Awesome typogra...
Thesis                      http://diythemes.com/Powerful. Design-forward.
Thesis                      http://diythemes.com/Powerful. Design-forward.
Stumblr   http://www.eleventhemes.com/stumblr-theme/          • Tumblr-style theme          • Minimal configuration       ...
Barebones / Responsive• Skeleton  http://demos.simplethemes.com/skeleton/• Starkers  (Original) https://github.com/viewpor...
[Obligatory Cat Picture]
Wrap Up1. Every user that visits your site has an experience. Make sure it’s   a good one.2. Theme frameworks are your qui...
Thanks!Any Questions?                 Awesome Image Credits:Ryan Green                 • Iconfinder.com@ryngrn          • ...
Upcoming SlideShare
Loading in …5
×

Child Theme Frameworks

2,846 views
2,745 views

Published on

A look at child themes and frameworks from a UX perspective.

Published in: Design, Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,846
On SlideShare
0
From Embeds
0
Number of Embeds
362
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Child Theme Frameworks

  1. 1. Child Theme Frameworksthrough the lens ofUser Experience RYAN GREEN @RYNGRN RYANGREEN.INFO #WCNASH12
  2. 2. Hi, I’m Ryan.Also known as Ryan Green.
  3. 3. I do User Experience.And love every second.
  4. 4. UX… what does it mean?No, it’s not double rainbow intense.
  5. 5. InteractionsDesign Analytics Usability
  6. 6. Who engages in UX?Hint: it’s someone you know.
  7. 7. You do!Told ya you knew.
  8. 8. Everyone has a uniqueexperience.
  9. 9. Child ThemesWho. What. When. How. Etc. WTF.
  10. 10. What are child themes? Straight from the horse’s mouth: “A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.” http://codex.wordpress.org/Child_Themes
  11. 11. And a theme framework?More from the codex:A stand-alone base/starter theme that is intendedeither to be forked into another theme, or else beused as a Parent Theme template. http://codex.wordpress.org/Theme_Frameworks
  12. 12. Advantages to using a frameworkto create your child theme?
  13. 13. Advantage 1:Start with abulletproof themethat works out of thebox.
  14. 14. Advantage 1:Start with abulletproof themethat works out of thebox.
  15. 15. Advantage 2:In event of total meltdown…
  16. 16. Just delete itAnd start over!
  17. 17. Advantage 3:Roll multiple newthemes from acustom theme youalready created in notime!
  18. 18. Advantage 4:Stays up to date withlatest WordPressfunctionality &security.
  19. 19. Advantage 5:You don’t need to know PHP!The learning curve for developing new themeelements, moving or adding widgetized areas,and major architecture changes is steep.
  20. 20. Advantage 6:Visual design principles can be baked in. nataliedee.com
  21. 21. Disadvantages to usingframeworks?
  22. 22. Disadvantage 1:Commitment! Picking a schema means you arelocked-in to learning it and using it.
  23. 23. Disadvantage 2:Creativity and visualdesign may be requiredin minimalist themes.
  24. 24. Disadvantage 3:Code bloat. Whena theme tries to beeverything to allpeople, it canmake for big files!
  25. 25. When to Use a Framework• When you are unfamiliar with PHP• When a solid codebase and security is crucial• When duplicating a current theme with minor changes.
  26. 26. So what makes a goodframework?How it feels or tastes? Best gradient? Blondest hair?
  27. 27. A Good Theme… Respects the Grid Uses Modern Code Easily Remodeled Cares About Usability
  28. 28. Respects the Grid• Consistent spacing• Utilizes a common grid system• Has a clear visual hierarchy
  29. 29. Uses Modern Code• HTML5• CSS3• jQuery• HTML5shiv / modernizr.js
  30. 30. Easily Remodeled• Core functionality• Widgetized areas• Navigation areas• Use the House Hunters approach
  31. 31. Cares About Usability• Phone. Tablet. Laptop. Desktop.• IA-friendly• Those with disabilities in your target audience
  32. 32. Included Frameworks Twenty-Ten Twenty-Eleven
  33. 33. Genesis http://www.studiopress.com/themes/genesis • Many child themes pre-made • Tried and tested by thousands • Standard top-nav Layout
  34. 34. Genesis http://www.studiopress.com/themes/genesisStandard Layout. Easy to customize.
  35. 35. Genesis http://www.studiopress.com/themes/genesisStandard Layout. Easy to customize.
  36. 36. Genesis http://www.studiopress.com/themes/genesisStandard Layout. Easy to customize.
  37. 37. Thematic http://themeshaper.com/thematic/ • Many child themes pre-made • Also tried and tested by thousands • Very changeable layout
  38. 38. Thematic http://themeshaper.com/thematic/Minimalist. Extendable.
  39. 39. Thematic http://themeshaper.com/thematic/Minimalist. Extendable.
  40. 40. Thematic http://themeshaper.com/thematic/Minimalist. Extendable.
  41. 41. Thesis http://diythemes.com/ • Design-forward theme • Optimized for load-times • Awesome typography options
  42. 42. Thesis http://diythemes.com/Powerful. Design-forward.
  43. 43. Thesis http://diythemes.com/Powerful. Design-forward.
  44. 44. Stumblr http://www.eleventhemes.com/stumblr-theme/ • Tumblr-style theme • Minimal configuration • Very content-focused
  45. 45. Barebones / Responsive• Skeleton http://demos.simplethemes.com/skeleton/• Starkers (Original) https://github.com/viewportindustries/Starkers (1140px version) http://www.thedotmack.com/2011/07/19/1140-fluid-starkers-wordpress-theme/• Whiteboard http://whiteboardframework.com/• Roots http://www.rootstheme.com/• Bones (Mobile-First) http://themble.com/bones/
  46. 46. [Obligatory Cat Picture]
  47. 47. Wrap Up1. Every user that visits your site has an experience. Make sure it’s a good one.2. Theme frameworks are your quickest ticket to solid backend code and an updatable (aka: more secure) theme.3. Know your content. Know your audience. Determine whether a child theme is the route to take.4. Theme is Grid-minded, Coded modernly, Easily adaptable, Usable.
  48. 48. Thanks!Any Questions? Awesome Image Credits:Ryan Green • Iconfinder.com@ryngrn • iconarchive.comryangreen.info • softicons.com#WCNash2012 • flickr.com • wordpress.com

×