Wc philly 2012 presentation

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

O HAI! • Used WordPress since it was b2. • Background in print design (family biz!) • Branching into developmentWordCamp 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 phasesWordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

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

Wc philly 2012 presentation

by onefinejay on Oct 20, 2012

Accessibility

Upload Details

Usage Rights

2 Embeds 6

Statistics

Wc philly 2012 presentation Presentation Transcript

https://twitter.com	5
https://si0.twimg.com	1