Responsive Web Apps

  • 6,043 views
Uploaded on

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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,043
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
109
Comments
0
Likes
16

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Nick Pettit
  • 2. teamtreehouse.c om
  • 3. Fluid Fluid MediaGrids Images Queries
  • 4. • Replaces fixed-width layouts • Design in terms of proportionsFluidGrids
  • 5. target ÷ context = result
  • 6. target ÷ context = result300px ÷ 960px = 31.25%
  • 7. target ÷ context = result300px ÷ 960px = 31.25%#myDiv { width: 300px;}
  • 8. target ÷ context = result300px ÷ 960px = 31.25%#myDiv { width: 300px;}#myDiv { width: 31.25%;}
  • 9. • Images that fit into a fluid grid • Very simple... sort of Fluid MediaImages Queries
  • 10. img { max-width: 100%; } Fluid MediaImages Queries
  • 11. Bandwidth
  • 12. • New in CSS3 • Adds CSS conditionally MediaQueries
  • 13. The layout can adjust itself based on the width of the browser. MediaQueries
  • 14. @media screen and (min-width: 320px) { #myDiv { background: #FF9900; } // More CSS declarations here...}
  • 15. @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...}
  • 16. Ethan recommends targeting... • 320px • 480px • 600px Media • 768pxQueries • 900px • 1200px
  • 17. Fluid Fluid MediaGrids Images Queries
  • 18. responsivewebdesign.com
  • 19. Informational
  • 20. Interactive
  • 21. Informational Interactive
  • 22. Informational Interactive
  • 23. Informational Interactive
  • 24. developer.yahoo.com/ypatterns
  • 25. • Mobile first
  • 26. • Mobile first• Adjust the scale
  • 27. • Mobile first• Adjust the scale• Adjust the layout
  • 28. • Mobile first• Adjust the scale• Adjust the layout• Make it vertical
  • 29. • Mobile first• Adjust the scale• Adjust the layout• Make it vertical• Use a visual
  • 30. • Mobile first• Adjust the scale• Adjust the layout• Make it vertical• Use a visual• Make it "responsive-ish"
  • 31. • Mobile first• Adjust the scale• Adjust the layout• Make it vertical• Use a visual• Make it "responsive-ish"• Just get rid of it
  • 32. 5
  • 33. 1. Galleries
  • 34. 1. Galleries
  • 35. 1. Galleries
  • 36. 1. Galleries
  • 37. 1. Galleries
  • 38. 1. Galleries
  • 39. 2. Progress Bars
  • 40. 2. Progress Bars
  • 41. 2. Progress Bars
  • 42. 2. Progress Bars
  • 43. 2. Progress Bars
  • 44. 3. Tooltips
  • 45. 3. TooltipsNickPettit@nickrp
  • 46. 3. TooltipsNickPettit@nickrp
  • 47. 3. TooltipsNickPettit@nickrp
  • 48. 3. TooltipsNickPettit@nickrp
  • 49. 3. Tooltips
  • 50. 3. Tooltips
  • 51. 3. TooltipsUsernames must be 3 characters long.
  • 52. 3. TooltipsNickPettit@nickrp
  • 53. 4. Data TablesFirst Name Last Name Username Ryan Carson ryancarson Nick Pettit nickrp Jim Hoskins jimrhoskins
  • 54. First Name Last Name Username Ryan Carson ryancarson Nick Pettit nickrp Jim Hoskins jimrhoskins 4. Data Tables
  • 55. 4. Data TablesFirst Name RyanLast Name CarsonUsername ryancarsonFirst Name NickLast Name PettitUsername nickrpFirst Name JimLast Name HoskinsUsername jimrrhoskins
  • 56. 4. Data Tables 7% 8% 35%10%11% 29%
  • 57. css-tricks.com/9096-responsive-data-tables
  • 58. 5. Drag and Drop
  • 59. 5. Drag and DropList A List B
  • 60. 5. Drag and DropList A List B
  • 61. 5. Drag and Drop List A
  • 62. 5. Drag and Drop List A
  • 63. 5. Drag and Drop List A Add to List B
  • 64. 5. Drag and Drop People Friends Add to Friends
  • 65. 5. Drag and Drop People FriendsAdd to Friends
  • 66. ...you put water in a cup, it becomes thecup; You put water into a bottle it becomesthe bottle; You put it in a teapot it becomesthe teapot. Now water can flow or it cancrash. Be water, my friend.- Bruce Lee