Refresh Richmond, Responsive Web Design

Slide 1

Slide 1 text

Refresh Richmond Responsive Design Ben Callahan @bencallahan Shawn Maida @eecoder Thursday, June 21, 12

Slide 2

Slide 2 text

The web is not fixed-width. Thursday, June 21, 12

Slide 3

Slide 3 text

The shift to mobile Over 60% of new handset sales are smartphones. Thursday, June 21, 12

Slide 4

Slide 4 text

There are more mobile phones on the planet than there are TVs. The shift to mobile Thursday, June 21, 12

Slide 5

Slide 5 text

91% of US consumers have their mobile device within reach 24/7. The shift to mobile Thursday, June 21, 12

Slide 6

Slide 6 text

Mobile devices account for 8.5% of global web traffic. The shift to mobile Thursday, June 21, 12

Slide 7

Slide 7 text

25% of US mobile web users are mobile-only web users. The shift to mobile Thursday, June 21, 12

Slide 8

Slide 8 text

Apple sold around 13 million iPads in Q4 of 2011. The shift to mobile Thursday, June 21, 12

Slide 9

Slide 9 text

Amazon sold over 4 million Kindle Fires in December of 2011. The shift to mobile Thursday, June 21, 12

Slide 10

Slide 10 text

Flexibility is the new norm. Mobile internet usage is predicted to overtake desktop in the next two years. Thursday, June 21, 12

Slide 11

Slide 11 text

Flexibility is the new norm. People are trying to browse your websites on these devices, today. Thursday, June 21, 12

Slide 12

Slide 12 text

Responsive Web Design Ethan Marcotte • article on alistapart.com • book via A Book Apart Thursday, June 21, 12

Slide 13

Slide 13 text

Responsive Web Design • A flexible foundation (fluid grid) • Flexible content (images, video, etc.) • Media queries Thursday, June 21, 12

Slide 14

Slide 14 text

Responsive Web Design live code demo Thursday, June 21, 12

Slide 15

Slide 15 text

Responsive Web Design • A flexible foundation (fluid grid) • Flexible content (images, video, etc.) • Media queries Thursday, June 21, 12

Slide 16

Slide 16 text

A Flexible Foundation Fixed-Width Fluid div { width: 100px; } div { width: ??%; } Thursday, June 21, 12

Slide 17

Slide 17 text

A Flexible Foundation div { width: 100px; } div { width: 10%; } Fixed-Width Fluid (if parent is 1000px wide) 100 / 1000 = .1 Thursday, June 21, 12

Slide 18

Slide 18 text

A Flexible Foundation www.semantic.gs susy.oddbird.net with CSS Precompiler Thursday, June 21, 12

Slide 19

Slide 19 text

Flexible Content img { max-width: 100%; } Thursday, June 21, 12

Slide 20

Slide 20 text

Flexible Content http://www.netmagazine.com/tutorials/create-ﬂuid-width-videos • set width to 100%, remove height • add a wrapper to maintain aspect ratio • use JS to detect and maintain size Thursday, June 21, 12

Slide 21

Slide 21 text

Media Queries • width, height • device-width, device-height • orientation • aspect ratio • several others http://www.w3.org/TR/css3-mediaqueries/ Thursday, June 21, 12

Slide 22

Slide 22 text

Media Queries @media all and (min-width: 600px) { /* styles for 600px and up here small-rez first */ } @media all and (max-width: 600px) { /* styles for 600px and down here large-rez first */ } Thursday, June 21, 12

Slide 23

Slide 23 text

Media Queries Large Resolution First PRO: IE works by default CON: Smallest devices load all assets Small Resolution First PRO: More logical (build up vs tear down) CON: IE support is tricky Thursday, June 21, 12

Slide 24

Slide 24 text

Process Design & planning deliverables become very difficult to define when so many resolutions are supported. http://bit.ly/M6TOlF Thursday, June 21, 12