wc miami 2013 designing for development
TRANSCRIPT
![Page 1: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/1.jpg)
DESIGNING FOR DEVELOPMENT
WordCamp Miami 2012presented by Jayvie Canono | http://jayvie.com | @onefinejay
![Page 2: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/2.jpg)
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
![Page 3: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/3.jpg)
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.
![Page 4: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/4.jpg)
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
![Page 5: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/5.jpg)
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
![Page 6: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/6.jpg)
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?)
![Page 7: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/7.jpg)
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.
![Page 8: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/8.jpg)
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
![Page 9: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/9.jpg)
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.)
![Page 10: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/10.jpg)
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)
![Page 11: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/11.jpg)
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.
![Page 12: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/12.jpg)
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.
![Page 13: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/13.jpg)
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.
![Page 14: Wc miami 2013 designing for development](https://reader033.vdocuments.mx/reader033/viewer/2022052621/55879649d8b42ade408b4599/html5/thumbnails/14.jpg)
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.