Slides from WordCamp Philly:

1. DESIGNING FOR
DEVELOPMENT
WordCamp Philly 2012
presented by Jayvie Canono | http://jayvie.com | @onefinejay

2. O HAI!
• Used WordPress since it was b2.
• Background in print design (family biz!)
• Branching into development
WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

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 | http://jayvie.com | @onefinejay

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 phases
WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

5. PITFALLS OF
PSD-CENTERED DESIGN
• CSS-3 unfriendly layer effects
• Use an online generator to double-
check effects! (http://layerstyles.org)
• Managing expectations with browser
compatibility (oh noes IE8!)
• Educate your client
WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

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 | http://jayvie.com | @onefinejay

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 | http://jayvie.com | @onefinejay

8. EXPAND YOUR TYPE
LIBRARY FOR FREE OR CHEAP
• A comparison of Web Font
embedding services (Smashing Mag):
http://j.mp/wcphlFFcomp
• Font Squirrel lets you filter for
@font-face–legal typefaces
WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

9. LOVE YOUR DEVELOPER:
MEASUREMENTS
• Avoid using free transform drag
handles. (You’ll get love handles if you do.)
WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

10. LOVE YOUR DEVELOPER:
AGREE ON A STYLE FRAMEWORK
• Despite the rise of responsive, 960.gs
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
(http://daneden.me/toast/), 1140fluid (http://cssgrid.net)
WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

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 | http://jayvie.com | @onefinejay

12. YOU MAY NOT HAVE TO CODE
SOMETHING 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 | http://jayvie.com | @onefinejay

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 | http://jayvie.com | @onefinejay

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 | http://jayvie.com | @onefinejay