These are the slides from my presentation at Orlando Code Camp 2015. The talk was about strategies for improving communication between design and development teams, and tools to help make that happen.

1. Bridging the Gap
E X P E R I E N C E , D E S I G N A N D D E V E L O P M E N T C O L L A B O R AT I O N

2. Jeremy Bierly - bierly.net - @jbierly

3. ChicagoPhotoConcepts - Raf Winterpacht

4. Isobar - isobar.com - @isobarUS

5. How to take our web projects to the next
level?
T H E P R O B L E M

6. Communication Breakdown - flickr, anam_uk

7. When a web project loses design fidelity,
that is as much a communication problem
as it is a technical one.

8. http://giphy.com/gifs/reaction-office-space-gary-cole-aAqGpWoSgGjnO

9. Talking on the Telephone - flickr, judy_and_ed

10. We have to change the way we
communicate with new deliverables.
T H E S O L U T I O N

11. Sharing - flickr, Josh Harper

12. A PSD is a painting of a
website.
“
- M I K E M O N T E I R O
“Why We Don’t Deliver Photoshop Files”

13. Device Landscape - flickr, Jeremy Keith

14. The flexible nature of the web is a
feature, not a bug.

15. Frist Website - http://info.cern.ch/hypertext/WWW/TheProject.html

16. Each web project gets a custom bootstrap
that provides examples of the design system.
L I V I N G S T Y L E G U I D E S B U I LT W I T H H T M L A N D C S S

17. Brad Frost at An Event Apart Chicago 2014 - flickr, Zeldman

18. We’re not designing pages, we’re
designing systems of components.
“
- S T E P H E N H AY
BDCONF Orlando 4/15/2012

19. - Josh Duck
HTML Periodic Table

20. Atomic Design - Brad Frost

21. What apps can help us get better results.
T H E T O O L S

22. Adobe Brackets
T H E T O O L S

24. Adobe Edge Reflow
T H E T O O L S

26. Macaw
T H E T O O L S

28. Webflow
T H E T O O L S

30. Typecast
T H E T O O L S

32. Good design is
constant contact
“
- M A R K O T T O
“markdotto.com”

33. Image optimization and rendering are
critical for performance.
C O L L A B O R AT E O N I M A G E , G R A P H I C A N D I C O N R E N D E R I N G

34. Gulp - gulpjs.com

35. Grumpicon - filament group

36. TinyPNG.com

37. How are you handling custom web fonts and
do you have the rights to the type face?
D I S C U S S W E B T Y P O G R A P H Y E A R LY & O F T E N

38. Typography: ‘Caslon Pro Tells Story’ - flickr/Karen Poon

39. WebTypography.net

40. The best compromises are reached
when both sides understand the
issues of the other.
“
- R I C H A R D R U T T E R

41. Use a CSS preprocessor like SASS or LESS
to manage colors for your stylesheet.
C R E AT E A C O L O R R E F E R E N C E

42. Google Chrome Buttons - ntr23

43. Chrome Developer Tools
T H E T O O L S

44. Chrome DevTools allow one to make changes to elements of the
webpage or the CSS and see changes immediately. Workspaces
saves those changes to disk without having to leave the browser.
W O R K S PA C E S - P E R S I S T E N T AU T H O R I N G I N T H E D E V T O O L S

45. Jack Johnson Surfing - flickr, Kanaka Menhune

46. I’ll find an example ‘In
the Wild’
“
- S T E P H A N I E D I B I A S E

47. codepen.io

48. SnappySnippet is a DevTools extension that allows you to extract
CSS and HTML from selected DOM subtree (last inspected
element). Then, with just one click, you can send selected code to
CodePen, jsFiddle or JS Bin.
S N A P P Y S N I P P E T

49. Thank You.“
- J E R E M Y B I E R LY