Your SlideShare is downloading. ×

Wc philly 2012 presentation

1,143

Published on

Slides from WordCamp Philly:

Slides from WordCamp Philly:

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,143
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DESIGNING FOR DEVELOPMENT WordCamp Philly 2012presented by Jayvie Canono | http://jayvie.com | @onefinejay
  • 2. 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
  • 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 Philly 2012 | Jayvie Canono | http://jayvie.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 phasesWordCamp Philly 2012 | Jayvie Canono | http://jayvie.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 clientWordCamp Philly 2012 | Jayvie Canono | http://jayvie.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 Philly 2012 | Jayvie Canono | http://jayvie.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 Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  • 8. 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
  • 9. 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
  • 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 Philly 2012 | Jayvie Canono | http://jayvie.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 Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  • 12. 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
  • 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 Philly 2012 | Jayvie Canono | http://jayvie.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 Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay

×