Do you spend your days in Photoshop creating comp after comp, all the while wishing for a more efficient means with which to design? The streamlined application of your dreams is now here, and its called a browser. The ever-extending capabilities of CSS now rival those of Photoshop, with designing in the browser quickly becoming the norm. Matt Puchlerz and Jon Buda will show you why web design and front-end development are inextricably linked, and how in-browser design using advanced CSS techniques foster that concept.

1. Your Browser is the
New Photoshop
Matt Puchlerz & Jon Buda

2. The typical
scenario:

3. The first comp.

4. A few more...

5. A few more...

7. What’s wrong with
this approach?

8. “ We aren’t designing copies of
web pages, we’re designing web
pages.
— Andy Clarke via Quotes on Design

9. Page interaction?

10. Scrolling?

11. Resizing the browser?

12. The font stack?

13. Liquid layouts?

14. Browser
inconsistencies?

15. Fake interaction.

16. Fake interaction.

17. Fake interaction.

18. Fake interaction.

19. Fake interaction.

20. What about other
applications?

21. Illustrator?

22. InDesign?

23. “ Working on a book in InDesign
makes it even more obvious how
ill-suited Photoshop is for web
design.
— Jason Santa Maria via Twitter

24. Fireworks?

25. We’re still
designing copies.

26. What do you
propose?

27. HTML

28. Browser
HTML
CSS

29. Like popular apps,
designing in the
browser offers:

30. Text & object styles.

31. Externally linked files.

32. “Master” templates.

33. Designing in the
browser also offers:

34. Page interaction.

35. Scrolling.

36. Resizing the browser.

37. The font stack.

38. Liquid layouts.

39. Browser
inconsistencies.

40. What about the
“designy” stuff?

41. There’s a CSS for that.

42. border-radius:

43. gradient()

44. rgba()

45. box-shadow:

46. text-shadow:

47. transition:

48. mask:

49. transform: scale()
rotate()
translate()
skew()

50. @font-face {}

51. Helpful Tools:

52. Firebug.

53. Web Inspector.

54. What about IE?

55. Do websites need to
look exactly the same
in every browser?

57. Rely on graceful
degradation.

58. Universal IE6
stylesheet.

59. Chrome Frame!

60. How does this
help me?

61. Increased efficiency.

62. Concurrent editing
& versioning.

63. Develop better content
hierarchy and order of
importance.

64. Less time wasted on
pure “decoration.”

65. Encourages progressive
enhancement.

66. Easier transition from
development to
production.

67. How does this
help my client?

68. Why would you sign-off
on static mockups?

69. Pixel-perfection sets
the wrong expectation.

70. Focusing on function
rather than form.

71. Receive relevant
feedback, sooner.

72. Sketch when needed.

73. “ And don’t forget, the next step
isn’t a polished wireframe. It’s
code you can click on!
— Ryan Singer via Signal vs. Noise

74. Greater agility.

75. Know your
responsibilities.

76. Your design will affect
development.

77. Development will affect
your design.

78. Work together from
the beginning.

79. Be wary of too much
specialization.

80. Provide the best
experience possible.

81. Be a “webmaster.”
A craftsman.

82. Use the correct tool
for the job.

83. The browser is all
you need.

84. Thanks!
Any questions?
Matt Puchlerz Jon Buda
@mattpuchlerz @jonbuda
http://matt.puchlerz.com http://jonbuda.com