At the Future of Web Apps London 2011, I gave a talk about responsive web design. Specifically, I talked about how responsive design applies to web applications, as opposed to a more typical informational or content-based website. I also introduced an idea that I call responsive patterns, which I hope will help map desktop design patterns to the patterns that have been developed across mobile websites and operating systems.

1. Nick Pettit

3. teamtreehouse.c
om

9. Fluid Fluid Media
Grids Images Queries

10. • Replaces fixed-width
layouts
• Design in terms of
proportions
Fluid
Grids

13. target ÷ context = result

14. target ÷ context = result
300px ÷ 960px = 31.25%

15. target ÷ context = result
300px ÷ 960px = 31.25%
#myDiv {
width: 300px;
}

16. target ÷ context = result
300px ÷ 960px = 31.25%
#myDiv {
width: 300px;
}
#myDiv {
width: 31.25%;
}

17. • Images that fit into a
fluid grid
• Very simple... sort of
Fluid
Media
Images
Queries

18. img {
max-width: 100%;
}
Fluid
Media
Images
Queries

20. Bandwidth

21. • New in CSS3
• Adds CSS conditionally
Media
Queries

25. The layout can adjust
itself based on the width
of the browser.
Media
Queries

26. @media screen and (min-width: 320px) {
#myDiv {
background: #FF9900;
}
// More CSS declarations here...
}

27. @media screen and (min-width: 320px) {
// CSS declarations here...
}
@media screen and (min-width: 480px) {
// CSS declarations here...
}
@media screen and (min-width: 600px) {
// CSS declarations here...
}

28. Ethan recommends
targeting...
• 320px
• 480px
• 600px
Media • 768px
Queries • 900px
• 1200px

30. Fluid Fluid Media
Grids Images Queries

31. responsivewebdesign.com

33. Informational

34. Interactive

35. Informational Interactive

36. Informational Interactive

37. Informational Interactive

40. developer.yahoo.com/ypatterns

42. • Mobile first

43. • Mobile first
• Adjust the scale

44. • Mobile first
• Adjust the scale
• Adjust the layout

45. • Mobile first
• Adjust the scale
• Adjust the layout
• Make it vertical

46. • Mobile first
• Adjust the scale
• Adjust the layout
• Make it vertical
• Use a visual

47. • Mobile first
• Adjust the scale
• Adjust the layout
• Make it vertical
• Use a visual
• Make it "responsive-ish"

48. • Mobile first
• Adjust the scale
• Adjust the layout
• Make it vertical
• Use a visual
• Make it "responsive-ish"
• Just get rid of it

50. 5

51. 1. Galleries

52. 1. Galleries

53. 1. Galleries

54. 1. Galleries

55. 1. Galleries

56. 1. Galleries

57. 2. Progress Bars

58. 2. Progress Bars

59. 2. Progress Bars

60. 2. Progress Bars

61. 2. Progress Bars

62. 3. Tooltips

63. 3. Tooltips
Nick
Pettit
@nickrp

64. 3. Tooltips
Nick
Pettit
@nickrp

65. 3. Tooltips
Nick
Pettit
@nickrp

66. 3. Tooltips
Nick
Pettit
@nickrp

67. 3. Tooltips

68. 3. Tooltips

69. 3. Tooltips
Usernames must be 3 characters long.

70. 3. Tooltips
Nick
Pettit
@nickrp

71. 4. Data Tables
First Name Last Name Username
Ryan Carson ryancarson
Nick Pettit nickrp
Jim Hoskins jimrhoskins

72. First Name Last Name Username
Ryan Carson ryancarson
Nick Pettit nickrp
Jim Hoskins jimrhoskins
4. Data Tables

73. 4. Data Tables
First Name Ryan
Last Name Carson
Username ryancarson
First Name Nick
Last Name Pettit
Username nickrp
First Name Jim
Last Name Hoskins
Username jimrrhoskins

74. 4. Data Tables
7%
8%
35%
10%
11%
29%

75. css-tricks.com/9096-responsive-data-tables

76. 5. Drag and Drop

77. 5. Drag and Drop
List A List B

78. 5. Drag and Drop
List A List B

79. 5. Drag and Drop
List A

80. 5. Drag and Drop
List A

81. 5. Drag and Drop
List A
Add to List B

82. 5. Drag and Drop
People Friends
Add to Friends

83. 5. Drag and Drop
People Friends
Add to Friends

85. ...you put water in a cup, it becomes the
cup; You put water into a bottle it becomes
the bottle; You put it in a teapot it becomes
the teapot. Now water can flow or it can
crash. Be water, my friend.
- Bruce Lee