The document discusses designing websites in the browser rather than solely in design programs like Photoshop. It argues that deciding designs in the browser allows for faster iteration, prioritizes content over aesthetics, facilitates responsive design, supports features like icon fonts and SVG, and enables better testing of performance and accessibility from the start of the design process. While Photoshop is still useful, the workflow should quickly move decisions into the browser to take advantage of its capabilities.

1. Designing (Deciding)
in the Browser
Sang-MinYoon
August 16th, 2014
!

2. Let’s change the phrase “designing in the
browser” to “deciding in the browser.”
-Dan Mall

3. When I mention “PSDs”, I’m
referring to fully fleshed out comps

5. Sang-Min Yoon
Web Designer & Front-End Developer
at Wentworth Institute of Technology
(Boston, MA)

6. I have designed and/or
developed websites for

7. I learned web design &
development with WordPress

8. About 4 years ago…

9. Typical Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing

10. Typical Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing
Most of the design
decisions were made

11. Design
• Create the PSD
• Get feedbacks
• Make millions and millions of edits
• Get sign off
• Start building the website only when
clients/stakeholders are satisfied with the PSDs.

12. Typical Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Most of the design
decisions were made

13. Does this make sense?

14. We aint talkin ‘bout how the
website looks on a browser
We talkin ‘bout how the
website looks on a PSD.

15.
How silly is that.We talking about PSDs.
!
-Allen Iverson

22. These are printouts of websites
and not websites.

23. Even more issues now

24. Pictures of Phone Usage
Photo Credit: www.flickr.com/photos/lukew

25. Create PSDs for every single
one of these devices?

26. “We only need designs for desktop
computer, iPhone and iPad.”

27. “Most of our users use a desktop
computer, iPhone and iPad.”

28. “we’ll see a larger screen, with a 4.7-inch model
launching first and a 5.5-inch model also being
unveiled at the same time”

30. Touch Experience

31. Touch Experience

32. Interactions
(hover, animations and transitions)

33. Show Animations

34. Show Animations

35. Can not make these design
decisions on a PSD

36. Past Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing
Most of the design
decisions were made

37. Present Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Make MOST of the
design decisions
Make SOME of the
design decisions

38. Designing in the Browser

39. 1) Saves Time

40. CSS3 is Powerful

41. CSS3 is Powerful

42. CSS3 is Powerful

43. 2) Allows for rapid iteration

45. 3) Content

46. On a PSD, more time is spent on
look and feel of the website.
This puts content second.

47. Show Animations

48. CSS3 is Powerful

49. Content is given priority

50. Content is given priority

51. Content is given priority

52. 4) Makes RWD easier

53. Let the content determine
the breakpoints

54. 5) Icon Fonts and SVG

58. 6) Browser and Devices

59. Video Credit: https://www.youtube.com/watch?v=_iidwn2kfJU

60. I Use CodeKit

61. BrowserStack

62. 8) Performance

65. 9) Accessibility

66. Accessibility

67. Accessibility

68. Testing (user experience, browser & device
compatibility, performance, accessibility)
should not be done at the end.

69. Should be done during the
design process…

70. ..in the Browser!

71. Let's Wrap it up

72. Continue to use Photoshop but
quickly move to the browser

73. Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Make MOST of the
design decisions
Make SOME of the
design decisions

74. Make all the important
decisions in the browser

75. Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315

76. Questions?