My goal is simple. It is a complete understanding of the universe.

Transcription

1 Sup.

2 STEPHEN My goal is simple. It is a complete understanding of the universe. W. HAWKING

3 Device Experiences Asset Loading UA Detection Retina User Context Adaptive vs. Responsive Web Design CSS3 Mobile First Feature Phones Phablets Progressive Enhancement Feature Detection Tablets HTML5 Frameworks UA Sniffing #poopin

4 Calm the eff down.

5 flickr.com/photos/esoterica/

6 alistapart.com/articles/responsive-web-design

7 A Flexible Grid

8 Pfft. Nobody sits around resizing their browser window. THE INTERNET, MISSING THE POINT

9 768 px 320 px 1024 px 480 px

10

11

12 The grid is not a tool to impose order on users or to usurp their control; it is a tool to impart order to our users, so that they can create their own experiences. KHOI VINH Ordering Disorder: Grid Principles for Web Design

13 target context

14 960 px 633 px 306 px

15 960 px 633 px 306 px = % = %

16 .col-ab { width: %; float: left; }.col-c { width: %; float: right; }

17 .col-ab.col-c.col-ab.col-c

18 Media Queries

19 Get your own damn breakpoints.

20

21 Be formless. Be shapeless like water. If you put water into a cup, it becomes the cup. You put it in a teapot, it becomes the teapot. BRUCE LEE Also Josh Clark )

22 /* Styles for everybody, including those without media queries. screen and ( min-width: 340px ) { /* 340px and up. */ screen and ( min-width: 720px ) { /* 720px and up. */ screen and ( min-width: 1080px ) { /* 1080px and up. */ }

23 @media screen and ( min-width: 720px ) {.col-ab { width: %; float: left; }.col-c { width: %; float: right; } }

24 blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

25 zoom x screen and ( min-width: 340px ) { /* 340px and up. */ screen and ( min-width: 720px ) { /* 720px and up. */ screen and ( min-width: 1080px ) { /* 1080px and up. */ }

26 zoom x screen and ( min-width: 340px ) { /* 340px and up. */ screen and ( min-width: 720px ) { /* 720px and up. */ screen and ( min-width: 1080px ) { /* 1080px and up. */ }

27 zoom x screen and ( min-width: 20em ) { /* 340px and up. */ screen and ( min-width: 45em ) { /* 720px and up. */ screen and ( min-width: 64em ) { /* 1080px and up. */ }

28 zoom x screen and ( min-width: 20em ) { /* ~385px and up. */ screen and ( min-width: 45em ) { /* ~816px and up. */ screen and ( min-width: 64em ) { /* ~1224px and up. */ }

29 Flexible Images and Media

30 <img src="/img/cat.gif" height="100" width="200" />

31 img { max-width: 100%; } <img src="/img/cat.gif" />

32 img, video, canvas, object { max-width: 100%; }

33 <video> <source src="small.ogv"> <source src="mo-bigger.ogv" media="min-width: 50em"> </video>

34 <img src="/img/cat.gif" />

35 github.com/scottjehl/responsive-images

36 <img src="mobile.jpg" data-fullsrc="fullsize.jpg" />

37 alistapart.com/articles/responsive-images-how-they-almostworked-and-what-we-need/

38

39 <picture alt="should accurately describe all sources."> <source src="mobile.jpg" /> <source src="medium.jpg" media="min-width: 600px" /> <source src="fullsize.jpg" media="min-width: 900px" /> <img src="mobile.jpg" /> </picture>

40 github.com/scottjehl/picturefill

41 w3.org/community/respimg/

42 A Flexible Grid Media Queries Flexible Images and Media

43 Progressive Enhancement

44 An escalator can never break it can only become stairs. MITCH HEDBERG

45 Basic Experience Enhanced Experience

46 Basic Experience Enhanced Experience basic.css Basic typography Horizontal rules Text alignment display: inline / block

47 Basic Experience Enhanced Experience basic.css Site-wide styles General layout Media queries

48 Basic Experience Enhanced Experience

49 <link rel="stylesheet" href="/css/basic.css"> <link rel="stylesheet" href="/css/enhanced.css" media="only all">

50 If you re awesome or you re Internet Explorer you get enhanced. ETHAN MARCOTTE

51 <link rel="stylesheet" href="basic.css" id="basic"> <!--[ if ( gte IE 6 ) & ( lte IE8 ) ]> <link rel="stylesheet" href="enhanced.css"> <![endif]--> <!--[ if (!IE ) ( gte IE 9 ) ]><!--> <link rel="stylesheet" href="enhanced.css" media="only all"> <!--<![endif]-->

52 Basic Experience Enhanced Experience basic.css enhanced.css basic.js Modernizr for conditional script loading Conditional stylesheet loading ResponsiveImages.js Respond.js

53 github.com/scottjehl/respond

54 Basic Experience Enhanced Experience basic.css enhanced.css basic.js enhanced.js feature-specific.js feature-specific.css page-specific.css

55 <script src="lib/jquery.js,touch.js"></script> <link href="css/section-sports.css,page-redsox.css,touch.css">

56 flickr.com/photos/splorp/

57

58 DAN A carpenter is only as good as his tools, but only a shitty carpenter blames them. MARQUIS