Wc miami 2013 designing for development
- 1. DESIGNING FOR DEVELOPMENT WordCamp Miami 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 with WebDevStudios WordCamp Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.com | @onefinejay
- 9. 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
- 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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.com http://webdevstudios.com | @onefinejay