SlideShare una empresa de Scribd logo
1 de 28
Thoughtful theming A talk on design, and efficient theme development for WordPress
Who am I?	 Just a guy Started on blogger, adopted b2, moved to WP Built a successful side-business doing custom design http://onefinejay.com
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.
Today’s 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?
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.”
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
Quality Triangle: “Pick two.” Product dev’t: 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.
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.
Rams & Ive, side by side Gizmodo, et.al. compared products
Rams’ Ten Principles of Good Design Innovative Makes a product useful Aesthetic Makes a product understandable Unobtrusive Honest Long-lasting Thorough down to the last detail Environmentally friendly As little design as possible
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 WP’s own admin UI Theme design/development Most common area High visibility Most competitive marketplace
What makes a theme? Short history of WP themes Style.css + my-hacks.php Theme directories  Index.php Style.css Rise of premium, freemium, or do-it-all frameworks Entire applications built on top of WordPress
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
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? That’s okay. I’m guilty of that, too, but remember: you may not grow as a designer if you keep doing this.
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.
When not to roll a theme Client won’t pay the right price for custom work Don’t 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
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 today’s standards “Still works for them” The goal is to be read, and that goal is met
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
Drawbacks to child-theming Child themes tend to be palette and image swaps Same song, different day Working with someone else’s code, keeping up with a growing list of CSS classes/IDs, and custom functions (Yes, I understand you have to start from somewhere)
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 don’t have to share if you don’t want to.
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!
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.  It’s like driving a smaller car. Not really.
A few examples Some screenshots from the code editor on the theme I privately developed.
I’m lacking files! No: Page.php Archive.php Author.php Category.php And then some Fewer files to edit
Modular CSS loading Why load CSS rules for comments on every page?  Also has some CSS for a custom page
Prevent a page fromlinking to itself Mostly overlooked, but it’s 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.
A word about content Designing for the web requires content. Play with wireframe sketches, layout and Lipsum all you want; your design won’t 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?
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 audience’s eyes Content might not be king, but it’s not dead

Más contenido relacionado

La actualidad más candente

Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web DesignKathy Gill
 
Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018Matt Algie
 
OrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & TricksOrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & TricksValarie Martin Stuart
 
Setting up and maintaining a website
Setting up and maintaining a websiteSetting up and maintaining a website
Setting up and maintaining a websiteJohn Espirian
 
Create Great User Documents for Word Press
Create Great User Documents for Word PressCreate Great User Documents for Word Press
Create Great User Documents for Word PressGloria Antonelli
 
Successful Website Design
Successful Website DesignSuccessful Website Design
Successful Website DesignBecky Davis
 
Improving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationImproving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationGloria Antonelli
 
Road Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPressRoad Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPressGloria Antonelli
 
Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website? Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website? Jennifer Novak
 
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014Chris Young
 
Something from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is ShortSomething from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is Shortkenwtw
 
Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Graham Armfield
 
Take Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPressTake Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPressBecky Davis
 
So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...Graham Armfield
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersBootstrap Creative
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationTonya Thomas
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designersErlend Debast
 

La actualidad más candente (20)

Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 
Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018
 
OrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & TricksOrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & Tricks
 
Setting up and maintaining a website
Setting up and maintaining a websiteSetting up and maintaining a website
Setting up and maintaining a website
 
Create Great User Documents for Word Press
Create Great User Documents for Word PressCreate Great User Documents for Word Press
Create Great User Documents for Word Press
 
Successful Website Design
Successful Website DesignSuccessful Website Design
Successful Website Design
 
Improving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationImproving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support Documentation
 
Road Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPressRoad Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPress
 
Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website? Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website?
 
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
 
Something from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is ShortSomething from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is Short
 
Q6
Q6Q6
Q6
 
Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021
 
Take Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPressTake Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPress
 
So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...
 
Visual resourcing guide
Visual resourcing guideVisual resourcing guide
Visual resourcing guide
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT Foundation
 
Writing for-web-update
Writing for-web-updateWriting for-web-update
Writing for-web-update
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designers
 

Destacado

Sichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMMSichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMMOPTIMAbit GmbH
 
The Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through OffshoringThe Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through OffshoringcoMakeIT
 
Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831Daniel Palm
 
Offshoring in morocco
Offshoring in moroccoOffshoring in morocco
Offshoring in moroccoSara FARJANI
 
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring AgileAgile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring AgileTunisia Scrum User Group
 
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software OutsourcingGIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software OutsourcingGIMIK Systeme GmbH
 
Outsourcing & Offshoring
Outsourcing & OffshoringOutsourcing & Offshoring
Outsourcing & OffshoringArun Khedwal
 

Destacado (9)

Odc setup
Odc setupOdc setup
Odc setup
 
Sichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMMSichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMM
 
The Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through OffshoringThe Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through Offshoring
 
Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831
 
Offshoring in morocco
Offshoring in moroccoOffshoring in morocco
Offshoring in morocco
 
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring AgileAgile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
 
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software OutsourcingGIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
 
Offshoring
Offshoring Offshoring
Offshoring
 
Outsourcing & Offshoring
Outsourcing & OffshoringOutsourcing & Offshoring
Outsourcing & Offshoring
 

Similar a Thoughtful theming

Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Cammy Bean
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
 
Designing for WordPress
Designing for WordPressDesigning for WordPress
Designing for WordPressTammy Hart
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issuesNeil Perlin
 
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Thinkful
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A ThemeNicky Pink
 
Single sourcing to the max
Single sourcing to the maxSingle sourcing to the max
Single sourcing to the maxNeil Perlin
 
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress ThemesUltimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress ThemesSKT Themes
 
7 crazy tips that will help you
7 crazy tips that will help you7 crazy tips that will help you
7 crazy tips that will help youJessica Wilson
 
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Brett Bumeter
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themesChris Olbekson
 
Designing (Deciding) in the Browser
Designing (Deciding) in the BrowserDesigning (Deciding) in the Browser
Designing (Deciding) in the BrowserSang-Min Yoon
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?Russ Weakley
 
Css tools and methodologies
Css tools and methodologiesCss tools and methodologies
Css tools and methodologiesIsatu Conteh
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
 
Top 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdfTop 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdfmukeshjoshi245144
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basicselmorandall
 
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzidenu Dzakuma
 

Similar a Thoughtful theming (20)

Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design
 
Best web design
Best web designBest web design
Best web design
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
Designing for WordPress
Designing for WordPressDesigning for WordPress
Designing for WordPress
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A Theme
 
Single sourcing to the max
Single sourcing to the maxSingle sourcing to the max
Single sourcing to the max
 
Design for the Web
Design for the WebDesign for the Web
Design for the Web
 
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress ThemesUltimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
 
7 crazy tips that will help you
7 crazy tips that will help you7 crazy tips that will help you
7 crazy tips that will help you
 
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
Designing (Deciding) in the Browser
Designing (Deciding) in the BrowserDesigning (Deciding) in the Browser
Designing (Deciding) in the Browser
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Css tools and methodologies
Css tools and methodologiesCss tools and methodologies
Css tools and methodologies
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 
Top 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdfTop 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdf
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
 
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
 

Más de onefinejay

Wc miami 2013 designing for development
Wc miami 2013 designing for developmentWc miami 2013 designing for development
Wc miami 2013 designing for developmentonefinejay
 
Wc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshopWc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshoponefinejay
 
Building a career with WordPress
Building a career with WordPressBuilding a career with WordPress
Building a career with WordPressonefinejay
 
Wc philly 2012 presentation
Wc philly 2012 presentationWc philly 2012 presentation
Wc philly 2012 presentationonefinejay
 
Converting a Layout to a WordPress theme
Converting a Layout to a WordPress themeConverting a Layout to a WordPress theme
Converting a Layout to a WordPress themeonefinejay
 
Bridging the designer devloper gap
Bridging the designer devloper gapBridging the designer devloper gap
Bridging the designer devloper gaponefinejay
 

Más de onefinejay (6)

Wc miami 2013 designing for development
Wc miami 2013 designing for developmentWc miami 2013 designing for development
Wc miami 2013 designing for development
 
Wc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshopWc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshop
 
Building a career with WordPress
Building a career with WordPressBuilding a career with WordPress
Building a career with WordPress
 
Wc philly 2012 presentation
Wc philly 2012 presentationWc philly 2012 presentation
Wc philly 2012 presentation
 
Converting a Layout to a WordPress theme
Converting a Layout to a WordPress themeConverting a Layout to a WordPress theme
Converting a Layout to a WordPress theme
 
Bridging the designer devloper gap
Bridging the designer devloper gapBridging the designer devloper gap
Bridging the designer devloper gap
 

Último

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusZilliz
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 

Último (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 

Thoughtful theming

  • 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 http://onefinejay.com
  • 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. Today’s 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 dev’t: 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, et.al. compared products
  • 10. Rams’ Ten Principles of Good Design Innovative Makes a product useful Aesthetic Makes a product understandable Unobtrusive Honest Long-lasting 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 WP’s 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 Index.php Style.css 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? That’s okay. I’m 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 won’t pay the right price for custom work Don’t 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 today’s 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 else’s 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 don’t have to share if you don’t 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. It’s like driving a smaller car. Not really.
  • 23. A few examples Some screenshots from the code editor on the theme I privately developed.
  • 24. I’m lacking files! No: Page.php Archive.php Author.php Category.php 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 it’s 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 won’t 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 audience’s eyes Content might not be king, but it’s not dead