Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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 />