DESIGNING FOR DEVELOPMENT

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

WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

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

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

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

PITFALLS OFPSD-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

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

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

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

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

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

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

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

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

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.