Dr Weblove or: How I Learned to Stop Worrying About Photoshop and Love Designers

Once upon a time, in a galaxy far, far away, developers and designers worked in harmony creating amazing web sites and applications. Back on Earth though it's not quite the fairy tale story. Remy's a developer, who has worked with more than healthy handful designers over the last decade and more ("but he's so young and good looking!" we hear you cry). His session will share what worked and what didn't, tips and tricks to make life a little easier. What's simple in a design to implement and what was hard. How he looks for risk in a project and how that's shared with the designers and client. How do you quote and how do you get your quotes right. When to choose an off the shelf library or when to build something bespoke.

Transcript

1. Dr. Weblove Or: How I Learned to Stop Worrying About Photoshop and Love Designers http://www.flickr.com/photos/x-ray_delta_one/4152356696
2. How I go from a visual design (i.e. a mock) and make it a real weby thingy Or more specifically: But that's a crap title.
3. ๏Mock ➡ Developer ๏Deconstructing the mock: work, risk, costs ๏Approach to coding My Plan: http://www.flickr.com/photos/zervas/3848962977/
4. In my previous life I was NOT a designer.
6. http://www.flickr.com/photos/jojakeman/3825935283/ Grrrr ROAR Designer Developer
7. http://www.flickr.com/photos/jojakeman/3825935283/ Designer Developer I love you, man
8. http://www.flickr.com/photos/jojakeman/3825935283/
9. Designers: How to prepare a design that devs can use + work flow with clients/manages Developers: Process tips for dev and testing
10. http://www.flickr.com/photos/barbaradoduk/195689523 lube === good
11. Basics Seeing all the problems in a mock immediately
20. If you're using a grid, make exceptions. Don't make exceptions, the rule of thumb.
22. WTF? WTF?... oh... "flick"
25. <img id="home" src="home-headline.png" alt="..."> #home { max-width: 100%; } http://www.flickr.com/photos/adactio/5818096043
28. Don't let your design deficient developer do this design - it'll look crap.
29. Good Great
30. Quote Messer Upperers ๏Liquid layouts ๏Fixed sizes ๏Responsive design ๏Tiny variances
36. Deconstruct the design
37. What can't you see? The invisibles will always bite you in the arse. http://www.flickr.com/photos/remysharp/1163289602/
38. What's clickable? What's touchable? What's the target platform? Browser support?
39. http://www.flickr.com/photos/dannynic/3295160732/ Touch vs. Hold vs. Drag vs. Double tap over a tap hotspot vs...
40. Recommendation: sit with client & drawing and touch that.
41. Risk = screw ups = time = £
42. ๏When third parties are involved ๏What you don't immediately know how to solve ๏Where you can't visualise a solution
43. [bling image] You. You wish. Sorta... Costing http://www.flickr.com/photos/deronkamisato/4965826757
44. [bling image] Costing ๏Never give quotes off the bat ๏Break down into components ๏Deadlines are a cost factor ๏Cost IE6 separately http://www.flickr.com/photos/deronkamisato/4965826757
45. Google support latest-1. So do I.
46. Add 40% for IE6 support
47. Estimates & Quotes ๏ Get it wrong first ๏ Track your hours ๏ Compare to the quote ๏ Repeat ๏ Mine was consistently out by 20% http://www.flickr.com/photos/pacdog/213744694/
48. Experience will help too :)
49. Deadlines http://www.flickr.com/photos/klif/2847294014 Bad Good
50. Deadlines ๏Don't miss them ๏Don't slip and slip and slip ๏Very few deadlines can't be moved ๏Urgent rarely means urgent http://www.flickr.com/photos/klif/2847294014
51. Approach
52. Prototype early http://www.flickr.com/photos/donsolo/1301608111/
53. KISS http://www.flickr.com/photos/anirudhkoul/3725928708/
54. KI(RF)SS KI(RF)SS http://www.flickr.com/photos/nathaninsandiego/2723174963/
56. Style: choose ๏Style for design/desktop fixed width ๏Style for lowest possible size ๏Style for multiple deployed versions - ala gmail
57. Do JavaScript Last http://www.flickr.com/photos/charliebrewer/2897862701
58. jQuery plugins Good for fast prototyping Quality is mixed, and often do way more than you need ixedit.com, jqueryfordesigners.com, try out some coding!
59. 1. Build without jQuery. 2.Design the start and end of your effects without jQuery. 3.Add jQuery a little at a time.
61. ๏github.com ๏Check commits & last activity ๏Check issues being opened and closed Third Party Libraries
62. Offline → Not quite offline ๏Lets the client see it in prototype stage ๏Dropbox is your friend ๏Get a short url for mobile testing
63. RewriteRule ^db/(.*)$ http://dl.dropbox.com/u/43399/$1 [L] RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule (.*) $1.html [L]
64. Recap Time 1. Remember function as well as form 2. Anticipate the invisibles 3. Prototype 4. KI(RF)SS
65. And... remember to cuddle! http://www.flickr.com/photos/jojakeman/3825935283/
66. Otherwise: rock on. @rem Hire me @ leftlogic.com