1. Managing Responsive
Design Projects
@andrewsmyk
Full Stack TO 2014

5. www.andrewsmyk.com/fsto

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

9. @andrewsmyk
1.5” to 50”

10. @andrewsmyk

11. @andrewsmyk

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

15. @andrewsmyk

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

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

20. Edit content ruthlessly

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

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

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

24. Stakeholders

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

26. Avoid coding or selecting frameworks
before content modeling

27. Avoid coding or selecting frameworks
before content modeling

28. @andrewsmyk

29. @andrewsmyk
Dynamic Wireframe

30. @andrewsmyk

31. ?????
@andrewsmyk

32. RUN!!!
@andrewsmyk
Zombie
Apocalypse!!

35. @andrewsmyk
1
2
3
4
5
6
7

36. @andrewsmyk
1
2
3
4
5
6
7

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

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

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

41. @andrewsmyk

42. @andrewsmyk

43. @andrewsmyk

44. @andrewsmyk

45. @andrewsmyk

48. @andrewsmyk

49. @andrewsmyk

50. via Michelle Cryan -@sporkles

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

52. @andrewsmyk

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

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

55. Look for Pain Points
@andrewsmyk
https://www.flickr.com/photos/wiphey/12696434

57. “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

58. Logo needs to be “bluer”

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

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

61. Logo needs to be “bluer”

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

63. How blue is our logo?

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

65. We need to see another design

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

67. Stop Wrestling with Static Mockups
@andrewsmyk

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

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

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

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

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

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

74. In the end, static mock ups are like a dead parrot.

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

76. @andrewsmyk

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

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

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

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

81. @andrewsmyk

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

83. Use the right tools & technologies
@andrewsmyk

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

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

86. Logo needs to be “bluer”

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

93. catalog of assumptions

98. @andrewsmyk
Responsive Style Tile

99. User Testing, Tools and TPS Cover Sheets

100. Plan your Interactions and Interface
https://www.flickr.com/photos/kenstein/12126948903
@andrewsmyk

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

102. @andrewsmyk
Pro Tip: Build a Device Library

103. http://www.flickr.com/photos/pjanvandaele/3990379048
Plan for gestures and taps
@andrewsmyk

104. Help users with errors and miss taps

105. Plan for the “Fat Finger”

106. Design for the thumb

107. Pro Tip: A Touch Template helps design Interactions
@andrewsmyk

108. Test Constantly
@andrewsmyk

109. Test Under Extreme Conditions or Use Case
https://www.flickr.com/photos/zokuga/5296157798
@andrewsmyk

110. Test Under Low Connectivity
https://www.flickr.com/photos/nicholas_t/2414548729
@andrewsmyk

111. @andrewsmyk

112. @andrewsmyk

113. @andrewsmyk

114. @andrewsmyk

115. u
@andrewsmyk

116. @andrewsmyk

117. #ffly #rwd

118. i

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

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

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

122. @andrewsmyk

123. @andrewsmyk

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

125. @andrewsmyk
Questions?

126. Thank you!

127. @andrewsmyk
www.andrewsmyk.com/fsto

129. @andrewsmyk
Questions?