wc miami 2013 designing for development
TRANSCRIPT
DESIGNING FOR DEVELOPMENT
WordCamp Miami 2012presented by Jayvie Canono | http://jayvie.com | @onefinejay
WordCamp Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.com | @onefinejay
O HAI!
• Used WordPress since it was b2.• Background in print design (family biz!) • Branching into development with
WebDevStudios
WordCamp Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.com | @onefinejay
LOVE YOUR DEVELOPER: MEASUREMENTS
• Avoid using free transform drag handles. (You’ll get love handles if you do.)
WordCamp Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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.