Responsive Web Apps

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

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

1. Galleries

2. Progress Bars

3. Tooltips

3. TooltipsNickPettit@nickrp

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

http://lanyrd.com	32
http://paper.li	7
http://a0.twimg.com	5
http://us-w1.rockmelt.com	1

Responsive Web Apps

by Nick Pettit on Oct 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 45

Statistics

Responsive Web Apps — Presentation Transcript