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.

Wc philly 2012 presentation


Published on

Slides from WordCamp Philly:

  • Be the first to comment

  • Be the first to like this

Wc philly 2012 presentation

  1. 1. DESIGNING FOR DEVELOPMENT WordCamp Philly 2012presented by Jayvie Canono | | @onefinejay
  2. 2. O HAI! • Used WordPress since it was b2. • Background in print design (family biz!) • Branching into developmentWordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  3. 3. WHAT BRINGS US HERE? • You’re a designer: and the developer who once sliced your work doesn’t talk to you anymore • You’re a developer: you felt stabby • You’ve been doing it right: and you want to be assured of it.WordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  4. 4. HOW DO WE WORK? • (Let’s assume a rock-solid sales process with a clear scope, defined milestones and endpoint. Isn’t that everyone’s dream?) • Designer creates the PSD • Developer converts to WordPress, HTML & CSS • Client reviews at different phasesWordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  5. 5. PITFALLS OF PSD-CENTERED DESIGN • CSS-3 unfriendly layer effects • Use an online generator to double- check effects! ( • Managing expectations with browser compatibility (oh noes IE8!) • Educate your clientWordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  6. 6. LOVE YOUR DEVELOPER: TYPE SELECTION • Paid typefaces have to be paid for! • (What happens when the dev doing the slicing doesn’t have your typeface?)WordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  7. 7. LOVE YOUR DEVELOPER: TYPE SELECTION • Plenty of beautiful, affordable typefaces • Choose @font-face–legal type • Developers have said goodbye to Cufon, SIFR, FIR and other hacktacular techniques • Hoefler Frere-Jones can take a break • Embedding will happen soon; they’re working on it • Hold my hand. Be assured: your design will not fail just because you can’t use Gotham or Didot on the web.WordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  8. 8. EXPAND YOUR TYPELIBRARY FOR FREE OR CHEAP • A comparison of Web Font embedding services (Smashing Mag): • Font Squirrel lets you filter for @font-face–legal typefacesWordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  9. 9. LOVE YOUR DEVELOPER: MEASUREMENTS • Avoid using free transform drag handles. (You’ll get love handles if you do.)WordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  10. 10. LOVE YOUR DEVELOPER:AGREE ON A STYLE FRAMEWORK • Despite the rise of responsive, isn’t half bad! (Especially if the client won’t pay extra for responsive. You charge extra for responsive, right? ) RIGHT? • Other CSS Frameworks include Toast (, 1140fluid ( Philly 2012 | Jayvie Canono | | @onefinejay
  11. 11. YOU MEAN I NEED TO LEARN HOW TO CODE?! • SORTA. Kinda. Ish. • The medium of the web is code, not pixels. • Responsive design has really emphasized the fluid nature of the web. • Very tedious to demonstrate proportions for various viewport widths. • PSD-centric design multiplies total effort with every media query state.WordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  12. 12. YOU MAY NOT HAVE TO CODESOMETHING YOURSELF, BUT… • Understanding how a design is actually converted into CSS, HTML and WordPress is key to saving yourself time and drama.WordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  13. 13. LOVE YOUR DEVELOPER: LAYERS! • When you understand document order, and theme files and template parts, you can create layers your developer will love.WordCamp Philly 2012 | Jayvie Canono | | @onefinejay
  14. 14. YOU KNOW WHAT HAPPENS WHEN A DEV LOVES YOU? • They send you MOAR work. • You learn MOAR about WordPress • You get bored pushing pixels • You learn to develop. (Maybe!) • You earn MOAR MONEY! • You hire people. • You retire rich.WordCamp Philly 2012 | Jayvie Canono | | @onefinejay