Manage client expectations and get sign off for multi-screen, responsive projects with interactive mock-ups. Move away from the traditional use of Photoshop for interface mock-ups for multi-device interface and interaction designs. Incorporate client involvement for flexible decision making in responsive web design projects and building cost of devices into pricing models, guerrilla usability testing and project deliverables.

1. Managing Responsive
Design Projects
@andrewsmyk
FITC WebUnleashed 2014

3. www.andrewsmyk.com/webunleashed

4. Tweet using hashtags: #WebU14 #managingRWD

6. @andrewsmyk
640 x 480
800 x 600
1024 x 768
1200 x 900
1920 x 1200

8. @andrewsmyk
1.5” to 50”

9. @andrewsmyk

11. Leveraging mobile to increase
Wrestling with a responsive projects
student engagement
Andrew Smyk
HighWeb Ed – Arkansas
July 27, 2012
@andrewsmyk

13. @andrewsmyk

14. 1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk

15. 1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk

18. Edit content ruthlessly

19. Pro Tip: Document all the Types & Models of Devices You Encounter
@andrewsmyk

20. Important! Note the Devices of Decision Makers in the Room
@andrewsmyk

21. http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg

22. Stakeholders

23. @andrewsmyk
Content Modeling & Strategy
• Content Engagement
• Content Curation
• Rank and Prioritize Content

24. Avoid coding or selecting frameworks
before content modeling

25. Avoid coding or selecting frameworks
before content modeling

26. @andrewsmyk

27. @andrewsmyk
Dynamic Wireframe

28. @andrewsmyk

29. ?????
@andrewsmyk

30. RUN!!!
@andrewsmyk
Zombie
Apocalypse!!

33. @andrewsmyk
1
2
3
4
5
6
7

34. @andrewsmyk
1
2
3
4
5
6
7

35. 1
2
3
4
5
6
7
A/B Test Content Models
and early lo-fi Wireframes

36. http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg

38. 1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk

39. @andrewsmyk

40. @andrewsmyk

41. @andrewsmyk

42. @andrewsmyk

45. @andrewsmyk

46. @andrewsmyk

47. via Michelle Cryan -@sporkles

48. @andrewsmyk
Pro Tip: Avoid Designing and Developing Projects in Silos

49. @andrewsmyk

50. 1. Content Strategy
2. Waterfall vs. Agile
3. Prototyping
4. Art Direction
@andrewsmyk

51. @andrewsmyk
Prototyping
“Now we can think about users and their
needs as it relates to content.”

53. “Work in Photoshop and Fireworks by all means
(I do). Make static visuals as rich and as detailed
as you want them to be.”
Just don’t set the wrong expectations
by showing them to your clients.
~ Andy Clarke
@andrewsmyk

54. Logo needs to be “bluer”

55. desktop + +
main internal specialized
variants?
DAYS?

56. desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?

57. Logo needs to be “bluer”

58. desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?

59. How blue is our logo?

60. desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?

61. We need to see another design

62. desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?

63. Stop Wrestling with Static Mockups
@andrewsmyk

64. https://www.flickr.com/photos/kitch/4286136925

65. https://www.flickr.com/photos/kitch/4286136925
No Usability Testing

66. https://www.flickr.com/photos/kitch/4286136925
Lack Interaction

67. https://www.flickr.com/photos/kitch/4286136925
Don’t Show Transitions

68. https://www.flickr.com/photos/kitch/4286136925
Lack Fluidity

69. https://www.flickr.com/photos/kitch/4286136925
Don’t Display Web Fonts

70. “Design consistency is not about pixels.”
@andrewsmyk

71. @andrewsmyk

72. “A prototype is worth a thousand words”
Leigh Howells - @leigh
@andrewsmyk

73. “A prototype is worth a thousand meetings”
Mike Davidson - @mikeindustries
@andrewsmyk

74. Pro Tip: A Working Prototype can Help Make Decisions Faster

75. Think about the ecosystem, not just the devices:
@andrewsmyk

76. @andrewsmyk

77. https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk

78. Use the right tools & technologies
@andrewsmyk

79. @andrewsmyk
am I responsive?
ish.
remote preview
Ghostlab (license)
Edge Inspect (CC subscription)

80. 1. Content Strategy
2. Waterfall vs. Agile
3. Prototyping
4. Art Direction
@andrewsmyk

81. Logo needs to be “bluer”

86. @andrewsmyk
Visual inventory, you say…
Responsive style tiles, you say…

88. catalog of assumptions

93. @andrewsmyk
Responsive Style Tile

94. User Testing, Tools and TPS Cover Sheets

95. Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store
@andrewsmyk

96. @andrewsmyk
Pro Tip: Build a Device Library

97. Plan for gestures and taps.

98. Help users with error and miss taps

99. Plan for the “Fat Finger”

100. Design for the thumb

101. Pro Tip: A Touch Template helps design Interactions

102. @andrewsmyk

103. @andrewsmyk

104. @andrewsmyk

105. u
@andrewsmyk

106. @andrewsmyk

107. #ffly #rwd

108. i

109. They share a common infrastructure, but mobile is
NOT the traditional web
@andrewsmyk

110. l
Mobile is a different environment and requires
new thinking and design considerations.
@andrewsmyk

111. Harness the power of a missile throwing robot
with laser beam eyes on a UNICORN.
@andrewsmyk

112. @andrewsmyk

113. @andrewsmyk

114. 1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk

115. @andrewsmyk
Questions?

116. Thank you!

117. @andrewsmyk
www.andrewsmyk.com/webunleashed

118. Tweet using hashtags: #WebU14 #managingRWD

120. @andrewsmyk
Questions?