Responsive Web Apps

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.

Transcript

1. Nick Pettit
3. teamtreehouse.com
7. Fluid Grids Fluid Images Media Queries
8. Fluid Grids • Replaces fixed-width layouts • Design in terms of proportions
10. target ÷ context = result
11. target ÷ context = result 300px ÷ 960px = 31.25%
12. target ÷ context = result 300px ÷ 960px = 31.25% #myDiv { width: 300px; }
13. target ÷ context = result 300px ÷ 960px = 31.25% #myDiv { width: 300px; } #myDiv { width: 31.25%; }
14. Fluid Images Media Queries • Images that fit into a fluid grid • Very simple... sort of
15. Fluid Images Media Queries img { max-width: 100%; }
16. Bandwidth
17. Media Queries • New in CSS3 • Adds CSS conditionally
21. Media Queries The layout can adjust itself based on the width of the browser.
22. @media screen and (min-width: 320px) { #myDiv { background: #FF9900; } // More CSS declarations here... }
23. @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... }
24. Media Queries Ethan recommends targeting... • 320px • 480px • 600px • 768px • 900px • 1200px
25. Fluid Grids Fluid Images Media Queries
26. responsivewebdesign.com
28. Informational
29. Interactive
30. Informational Interactive
31. Informational Interactive
32. Informational Interactive
34. developer.yahoo.com/ypatterns
35. • Mobile first
36. • Mobile first • Adjust the scale
37. • Mobile first • Adjust the scale • Adjust the layout
38. • Mobile first • Adjust the scale • Adjust the layout • Make it vertical
39. • Mobile first • Adjust the scale • Adjust the layout • Make it vertical • Use a visual
40. • Mobile first • Adjust the scale • Adjust the layout • Make it vertical • Use a visual • Make it "responsive-ish"
41. • Mobile first • Adjust the scale • Adjust the layout • Make it vertical • Use a visual • Make it "responsive-ish" • Just get rid of it
44. 1. Galleries
45. 1. Galleries
46. 1. Galleries
47. 1. Galleries
48. 2. Progress Bars
49. 2. Progress Bars
50. 2. Progress Bars
51. 2. Progress Bars
52. 2. Progress Bars
53. 3. Tooltips
54. 3. Tooltips Nick Pettit @nickrp
55. 3. Tooltips Nick Pettit @nickrp
56. 3. Tooltips Nick Pettit @nickrp
57. 3. Tooltips Nick Pettit @nickrp
58. 3. Tooltips
59. 3. Tooltips
60. 3. Tooltips Usernames must be 3 characters long.
61. 3. Tooltips Nick Pettit @nickrp
62. 4. Data Tables First Name Last Name Username Ryan Carson ryancarson Nick Pettit nickrp Jim Hoskins jimrhoskins
63. 4. Data Tables First Name Last Name Username Ryan Carson ryancarson Nick Pettit nickrp Jim Hoskins jimrhoskins
64. 4. Data Tables First Name Last Name Username First Name Last Name Username First Name Last Name Username Ryan Carson ryancarson Nick Pettit nickrp Jim Hoskins jimrrhoskins
65. 4. Data Tables 7% 8% 10% 11% 29% 35%
66. css-tricks.com/9096-responsive-data-tables
67. 5. Drag and Drop
68. 5. Drag and Drop List A List B
69. 5. Drag and Drop List A List B
70. 5. Drag and Drop List A
71. 5. Drag and Drop List A
72. 5. Drag and Drop List A Add to List B
73. 5. Drag and Drop People Add to Friends Friends
74. 5. Drag and Drop People Add to Friends Friends
76. ...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