Nick Pettit
teamtreehouse.c      om
Fluid    Fluid    MediaGrids   Images   Queries
• Replaces fixed-width          layouts        • Design in terms of          proportionsFluidGrids
target ÷ context = result
target ÷ context = result300px ÷ 960px = 31.25%
target ÷ context = result300px ÷ 960px = 31.25%#myDiv {  width: 300px;}
target ÷ context = result300px ÷ 960px = 31.25%#myDiv {  width: 300px;}#myDiv {  width: 31.25%;}
• Images that fit into a           fluid grid         • Very simple... sort of Fluid                          MediaImages ...
img {           max-width: 100%;         } Fluid                         MediaImages                        Queries
Bandwidth
•   New in CSS3          •   Adds CSS conditionally MediaQueries
The layout can adjust          itself based on the width          of the browser. MediaQueries
@media screen and (min-width: 320px) {    #myDiv {       background: #FF9900;    }    // More CSS declarations here...}
@media screen and (min-width: 320px) {    // CSS declarations here...}@media screen and (min-width: 480px) {    // CSS dec...
Ethan recommends          targeting...          •   320px          •   480px          •   600px Media    •   768pxQueries ...
Fluid    Fluid    MediaGrids   Images   Queries
responsivewebdesign.com
Informational
Interactive
Informational   Interactive
Informational   Interactive
Informational   Interactive
developer.yahoo.com/ypatterns
•   Mobile first
• Mobile first• Adjust the scale
• Mobile first• Adjust the scale• Adjust the layout
• Mobile first• Adjust the scale• Adjust the layout• Make it vertical
•   Mobile first•   Adjust the scale•   Adjust the layout•   Make it vertical•   Use a visual
•   Mobile first•   Adjust the scale•   Adjust the layout•   Make it vertical•   Use a visual•   Make it "responsive-ish"
•   Mobile first•   Adjust the scale•   Adjust the layout•   Make it vertical•   Use a visual•   Make it "responsive-ish"•...
5
1. Galleries
1. Galleries
1. Galleries
1. Galleries
1. Galleries
1. Galleries
2. Progress Bars
2. Progress Bars
2. Progress Bars
2. Progress Bars
2. Progress Bars
3. Tooltips
3. TooltipsNickPettit@nickrp
3. TooltipsNickPettit@nickrp
3. TooltipsNickPettit@nickrp
3. TooltipsNickPettit@nickrp
3. Tooltips
3. Tooltips
3. TooltipsUsernames must be 3 characters long.
3. TooltipsNickPettit@nickrp
4. Data TablesFirst Name   Last Name   Username   Ryan       Carson     ryancarson   Nick        Pettit      nickrp   Jim ...
First Name   Last Name   Username   Ryan       Carson     ryancarson   Nick        Pettit      nickrp   Jim        Hoskins...
4. Data TablesFirst Name   RyanLast Name    CarsonUsername     ryancarsonFirst Name   NickLast Name    PettitUsername     ...
4. Data Tables           7%      8%                      35%10%11%                29%
css-tricks.com/9096-responsive-data-tables
5. Drag and Drop
5. Drag and DropList A           List B
5. Drag and DropList A           List B
5. Drag and Drop     List A
5. Drag and Drop     List A
5. Drag and Drop      List A   Add to List B
5. Drag and Drop     People        Friends  Add to Friends
5. Drag and Drop   People         FriendsAdd to Friends
...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 ...
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
×

Responsive Web Apps

6,652 views

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 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,652
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
113
Comments
0
Likes
16
Embeds 0
No embeds

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
  • Responsive Web Apps

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

    ×