Your SlideShare is downloading. ×
0
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Responsive Web Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Apps

6,183

Published 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.

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,183
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
112
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

    ×