thoughtful theming

Download Thoughtful theming

Post on 28-Jan-2015




4 download

Embed Size (px)


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


  • 1. Thoughtful theming
    A talk on design, and efficient theme development for WordPress

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