• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Apps
 

Responsive Web Apps

on

  • 6,470 views

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.

Statistics

Views

Total Views
6,470
Views on SlideShare
6,383
Embed Views
87

Actions

Likes
16
Downloads
103
Comments
0

6 Embeds 87

http://lanyrd.com 71
http://paper.li 7
http://a0.twimg.com 5
http://pinterest.com 2
http://us-w1.rockmelt.com 1
http://moderation.local 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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 Responsive Web Apps Presentation Transcript

  • 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 Queries
  • 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 declarations here...}@media screen and (min-width: 600px) { // CSS declarations here...}
  • Ethan recommends targeting... • 320px • 480px • 600px Media • 768pxQueries • 900px • 1200px
  • 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"• Just get rid of it
  • 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 Hoskins jimrhoskins
  • First Name Last Name Username Ryan Carson ryancarson Nick Pettit nickrp Jim Hoskins jimrhoskins 4. Data Tables
  • 4. Data TablesFirst Name RyanLast Name CarsonUsername ryancarsonFirst Name NickLast Name PettitUsername nickrpFirst Name JimLast Name HoskinsUsername jimrrhoskins
  • 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 becomesthe teapot. Now water can flow or it cancrash. Be water, my friend.- Bruce Lee