Thoughtful theming


Published on

Slides used in WordCamp Raleigh presentation: Thoughtful Themeing, an inspirational talk about design.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Thoughtful theming

  1. 1. Thoughtful theming<br />A talk on design, and efficient theme development for WordPress<br />
  2. 2. Who am I? <br />Just a guy<br />Started on blogger, adopted b2, moved to WP<br />Built a successful side-business doing custom design<br /><br />
  3. 3. How did this talk start?<br />Talking with a friend with common interests about aspects of design<br />Started as a 5-min presentation at a local WP-related meetup<br />Discussed conditional logic for faster theme development<br />This talk is more about design than anything else.<br />
  4. 4. Today’s Questions<br />What is design?<br />What is good design?<br />What are the areas of design in WordPress?<br />What is a theme?<br />Why roll your own theme?<br />How can you make your theme development experience better?<br />When should you use what?<br />
  5. 5. What is design?<br />Design is a tool; it is a means to an end<br />Design is thoughtful and thorough development of a solution to a problem<br />We experience design everywhere<br />Poor design leads to bad experiences<br />Great design can be invisible. “It just works.”<br />
  6. 6. Poor design<br />You feel its effects, immediately or otherwise<br />Consequences can lead to lost business or worse, lost lives<br />Inability to forecast unintended possibilities<br />Inability to step into the shoes of target market<br />Lack of passion due to undercutting oneself<br />
  7. 7. Quality Triangle: “Pick two.”<br />Product dev’t: cheap, fast, high quality<br />Spouse: intelligent, good looking, sane<br />Design is what you do when you refuse to accept that you can only pick two.<br />
  8. 8. What is “good design?”<br />Industrial design  tangible area of design<br />Dieter Rams and the 10 principles of good design<br />Studied architecture and carpentry<br />Worked in architecture then for Braun as chief of design<br />Weniger, aberbesser. Less, but better.<br />Jonathan Ive<br />Inspired by Rams<br />VP of design at Apple, Inc.<br />
  9. 9. Rams & Ive, side by side<br />Gizmodo, compared products<br />
  10. 10. Rams’ Ten Principles of Good Design<br />Innovative<br />Makes a product useful<br />Aesthetic<br />Makes a product understandable<br />Unobtrusive<br />Honest<br />Long-lasting<br />Thorough down to the last detail<br />Environmentally friendly<br />As little design as possible<br />
  11. 11. Areas of Design in WP<br />Database design<br />Changes with every major release<br />Drive for efficiency<br />Admin UI design<br />Well-designed plugin user interfaces are consistent with WP’s own admin UI<br />Theme design/development<br />Most common area<br />High visibility<br />Most competitive marketplace<br />
  12. 12. What makes a theme?<br />Short history of WP themes<br />Style.css + my-hacks.php<br />Theme directories <br />Index.php<br />Style.css<br />Rise of premium, freemium, or do-it-all frameworks<br />Entire applications built on top of WordPress<br />
  13. 13. Great expectations<br />The highly competitive market of themes has raised expectations<br />Clients look for deliverables that are built into themes or require plugins (paid/freemium)<br />Frameworks make for rapid deployment  IF you know how<br />
  14. 14. Are drop-in themes crutches?<br />Matter of opinion<br />Subject of a SxSW Panel, in terms of WordPress itself<br />Depends on whether you treat it that way<br />Do you find yourself shoehorning your work into a theme framework?<br />Do you find yourself repeating a wireframe for rapid deployment?<br />That’s okay. I’m guilty of that, too, but remember: you may not grow as a designer if you keep doing this.<br />
  15. 15. Why roll your own theme?<br />You gain an understanding of the medium<br />You know it like the back of your hand<br />No drop-in, freemium, premium, superdupermegacomplete framework can predict a need you might encounter<br />Sometimes you need a scalpel and all you have is a Swiss knife without one, or worse, a chainsaw.<br />The potential for discovery has not been exhausted.<br />
  16. 16. When not to roll a theme<br />Client won’t pay the right price for custom work<br />Don’t waste your time with unpaid work<br />Needs are met with a drop-in theme<br />“Just want to write.” Twenty-Ten might just work for this, just as Default/Kubrick worked as well<br />
  17. 17. Persistence of design<br />Some blogs have never changed design since 2003, yet they have plenty of traffic<br />A known and familiar interface for readers<br />Primitive by today’s standards<br />“Still works for them”<br />The goal is to be read, and that goal is met<br />
  18. 18. Balancing futureproofing and creativity<br />A growing trend is to produce child themes<br />Applies to all paid frameworks<br />Encouraged for the new theme<br />Majority of themes between then and now are modified versions of Kubrick/Default<br />Evidenced in conditional output when viewing archive and single pages<br />Material benefit: you get all the goodies and features while keeping your customizations after a core update<br />
  19. 19. Drawbacks to child-theming<br />Child themes tend to be palette and image swaps<br />Same song, different day<br />Working with someone else’s code, keeping up with a growing list of CSS classes/IDs, and custom functions<br />(Yes, I understand you have to start from somewhere)<br />
  20. 20. Having a good time theming<br />Learn WordPress like the back of your hand<br />Understand the core functions and play, play, play!<br />If you learn something when playing during “idle time,” you did not waste any of that time at all<br />Read up on resources that discuss principles of design (color, proportion, line, space, etc)<br />Follow a 101-level theme development tutorial<br />Choose a framework, or make your own<br />You don’t have to share if you don’t want to.<br />
  21. 21. Enough “ranting” let me teach you something<br />Conditional logic is the coolest thing in the world and it will make your life easier if you exercise discretion.<br />Practice makes good.<br />Sometimes the only difference between index.php and page.php are a few lines. <br />So just use a few conditionals specific to page.php and save yourself yet another file to edit or sift through<br />You can combine conditionals!<br />
  22. 22. Know your car; know your theme<br />When you ride with someone and they take a parking spot in one turn, or surprise you with a remarkably tight parallel park, how do you feel?<br />Your friend driving that car knows his car.<br />Using conditional logic, you can cut down on the number of theme files you have to worry about. <br />It’s like driving a smaller car. Not really.<br />
  23. 23. A few examples<br />Some screenshots from the code editor on the theme I privately developed. <br />
  24. 24. I’m lacking files!<br />No:<br />Page.php<br />Archive.php<br />Author.php<br />Category.php<br />And then some<br />Fewer files to edit<br />
  25. 25. Modular CSS loading<br />Why load CSS rules for comments on every page? <br />Also has some CSS for a custom page<br />
  26. 26. Prevent a page fromlinking to itself<br />Mostly overlooked, but it’s a nice thing to do<br />Yes, people are used to this happening, so when they come across something that reminds them you thought about them, they might just feel a little better.<br />
  27. 27. A word about content<br />Designing for the web requires content.<br />Play with wireframe sketches, layout and Lipsum all you want; your design won’t come to life without content.<br />Identify the aims to every project: why does someone even want an online presence?<br />To have a voice?<br />To win an election?<br />To sell ads and make money?<br />
  28. 28. Quick recap<br />Design is a tool, a means to an end<br />Ten principles of good design by Dieter Rams<br />No one theme or framework works for all possible projects<br />Rolling your own theme is not a bad idea<br />Use conditionals to cut down on inefficiencies and maintenance efforts<br />Learn to see your project from your client and their target audience’s eyes<br />Content might not be king, but it’s not dead<br />