Your SlideShare is downloading. ×
0
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Wc philly 2012 presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wc philly 2012 presentation

1,151

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,151
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
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

×