Developing for the anywhere, everywhere web

Transcript

1. developing for the anywhere, everywhere web TIM KADLEC Rich Web

   Experience, December 2011 @tkadlec timkadlec.com

2. The maturation of the medium

3. TOM BARRETT Chaos in the world brings uneasiness, but it

   also allows the opportunity for creativity and growth.

4. Control is an illusion

5. MARSHALL MCLUHAN We see the world through a rear-view mirror.

   We march backwards into the future.

6. The web removes constraints

7. ANDY HUME http://blog.andyhume.net/responsive-by-default The web is responsive on its own—by

   default. It’s us that’s been breaking it all these years by placing content in fixed- width containers.

8. The silo model will not hold up

9. http://www.w3.org/QA/2011/10/web_applications_discovering_a.html

10. http://chrisharrison.net/projects/omnitouch/full/IMG_0262.jpg

11. Constellation of experiences

12. Embrace flexibility

13. JOHN ALLSOPP http://www.alistapart.com/articles/dao/ The web’s greatest strength, I believe, is

    often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

14. http://www.alistapart.com/articles/responsive-web-design/

15. None

16. Laying the groundwork

17. Disclaimer: Not a silver bullet

18. Everything on the web is a shade of grey

19. Know thy analytics

20. Get out of Photoshop

21. http://flic.kr/p/6QdXVA

22. Get into the browser

23. Iterate

24. Structured content

25. JEFFREY ZELDMAN https://twitter.com/#!/zeldman/status/804159148 Content precedes design. Design in the absence

    of content is not design, it's decoration.

26. W.Y.S.I.W.T.F

27. KAREN MCGRANE http://5by5.tv/contenttalks/10 This is not about having something that

    looks like Microsoft Word. This is about you creating content that might appear formatted in different ways, structured in different ways, on lots of different platforms. You have to be able to start thinking in systems…

28. http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/

29. http://flic.kr/p/6e7uqr

30. http://flic.kr/p/6e7uqr

31. This is awesome

32. API First

33. http://flic.kr/p/6e7uqr http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/

34. None

35. Don’t use view desktop as a cop out

36. TRENT WALTON http://trentwalton.com/2011/05/10/fit-to-scale/ Responsive web design isn’t about fitting content

    (like repacking a moving van), but about tailoring content to fit the user (like arranging furniture).

37. http://flic.kr/p/6e7uqr http://24ways.org/2011/conditional-loading-for-responsive-designs

38. var searchNews = function(searchterm) { var elem = document.createElement('script'); elem.src

    = 'http://ajax.googleapis.com/ajax/services/ search/news?v=1.0&q=' + searchterm + '&callback=displayNews'; document.getElementsByTagName('head')[0].appendChild(elem); }; if (document.documentElement.clientWidth > 640) { searchNews('cats'); }

39. Fluid layouts

40. http://twitter.com/#!/Malarkey/status/126032916496138240

41. target % context = result

42. 960px 60px 20px

43. 100% 6.25% (60/960) (20/960) 2.0833333%

44. The interconnectedness of all things I'm very glad you asked

    me that, Mrs Rawlinson. The term `holistic' refers to my conviction that what we are concerned with here is the fundamental interconnectedness of all things. I do not concern myself with such petty things as fingerprint powder, telltale pieces of pocket fluff and inane footprints. I see the solution to each problem as being detectable in the pattern and web of the whole. The connections between causes and effects are often much more subtle and complex than we with our rough and ready understanding of the physical world might naturally suppose, Mrs Rawlinson. Let me give you an example. If you go to an acupuncturist with toothache he sticks a needle instead into your thigh. Do you know why he does that, Mrs Rawlinson? No, neither do I, Mrs Rawlinson, but we intend to find out. A pleasure talking to you, Mrs Rawlinson. Goodbye. 16px 36px

45. body { font-size: 100%; /* 16px */ font-family: Georgia; }

    h1 { font-size: 2.25em; /* 36px/16px = 2.25em */ font-family: Georgia; }

46. The interconnectedness of all things I'm very glad you asked

    me that, Mrs Rawlinson. The term `holistic' refers to my conviction that what we are concerned with here is the fundamental interconnectedness of all things. I do not concern myself with such petty things as fingerprint powder, telltale pieces of pocket fluff and inane footprints. I see the solution to each problem as being detectable in the pattern and web of the whole. The connections between causes and effects are often much more subtle and complex than we with our rough and ready understanding of the physical world might naturally suppose, Mrs Rawlinson. Let me give you an example. If you go to an acupuncturist with toothache he sticks a needle instead into your thigh. Do you know why he does that, Mrs Rawlinson? No, neither do I, Mrs Rawlinson, but we intend to find out. A pleasure talking to you, Mrs Rawlinson. Goodbye. 100% 2.25em

47. Media queries

48. visual viewport (device-width) layout viewport

49. <meta name="viewport" content="directive, directive" />

50. <meta name="viewport" content="width=320" />

51. <meta name="viewport" content="width=device-width" />

52. height user-scalable initial-scale maximum-scale minimum-scale

53. @media [not|only] type [and] (expression) { ... }

54. @media screen and (min-width:320px) and (max-width:480px) { ... } type

    test

55. Determine your baseline experience

56. BRYAN RIEGER Read this deck: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu The absence of support

    for @media queries is in fact the first @media query.

57. /* base experience */ @media screen and (min-width: 320px) {....}

    @media screen and (min-width: 600px) {....} @media screen and (min-width: 1300px) {....}

58. Embedded or external

59. <link rel="stylesheet" type="text/css" href="/mobile.css" media="only screen and (min- width: 320px)">

60. <link rel="stylesheet" type="text/css" href="/mobile.css" media="only screen and (min- width: 320px)">

    @media screen and (min-width:480px) { ... }

61. http://flic.kr/p/9dAWZW

62. https://github.com/scottjehl/Respond http://flic.kr/p/6e7uqr http://www.lukew.com/ff/entry.asp?1392

63. http://flic.kr/p/6e7uqr <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" href="/css/layout.css" media="all"> <![endif]-->

64. Experiment with more than width

65. http://flic.kr/p/6e7uqr

66. http://flic.kr/p/6e7uqr <link rel="stylesheet" media="screen and (min-height: 720px) and (min-width: 1000px)"

    href="/sites/all/themes/edf/css/tallWideScreen.css” />

67. Beware the rabbit hole

68. Responsive assets

69. img { width: 50%; }

70. <figure> <img src="beeblebrox.jpg" /> </figure> figure { width: 40%; }

    img { max-width: 100%; }

71. Don’t just scale Resize

72. http://flic.kr/p/6e7uqr http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

73. Resizing those images and optimizing them reduces the total file

    size for all six images to 45K. That’s a 78% reduction in file size and download time.

74. Performance matters

75. 71% of mobile users expect websites to load as quickly,

    almost as quickly or faster on their mobile phone, compared to the computer they use at home

76. 60% expect a mobile website to load in 3 seconds

    or less http://www.bizreport.com/2011/07/mobile-web-users-need-for-speed-not-being-satisfied.html

77. 25% 50% 75% 100% 2009 2011 Category Title 20% 74%

    % of people who will bounce after 5 seconds Source: http://bit.ly/viowVq

78. http://www.sencha.com/learn/how-to-use-src-sencha-io/

79. http://flic.kr/p/6e7uqr <!-- Basic usage --> <img src='http://src.sencha.io/http://mysite.com/ myimage.png' alt='My image'

    /> <!-- Percentage sizing --> <img src='http://src.sencha.io/x50/http://mysite.com/ myimage.png' alt='My image' /> <!-- Data URI --> <img src='http://src.sencha.io/data/http://mysite.com/ myimage.png' alt='My image' />

80. https://github.com/filamentgroup/Responsive-Images

81. http://flic.kr/p/6e7uqr <img src="small.jpg?full=large.jpg">

82. Don’t stop with images

83. http://flic.kr/p/6e7uqr //by width if (screen.width >= 320) { // bring

    the hotness } //by some combination if (localStorage.supported && screen.width >= 320) { //bring the hotness }

84. Be careful with width

85. http://tripleodeon.com/2011/12/first-understand-your-screen/

86. None

87. http://flic.kr/p/6e7uqr //by media query if (matchMedia('only screen and (max-width: 480px)').matches)

    { // bring the hotness } https://github.com/paulirish/matchMedia.js/

88. Client-side is not enough

89. http://flic.kr/p/6e7uqr http://www.cloudfour.com/responsive-imgs/

90. First page load

91. Race conditions

92. Content Delivery Networks

93. Images shouldn’t be so #@&!! hard

94. http://old.nabble.com/add-html-attribute-for-%22responsive-images%22-td32324865.html <img src="http://cdn.url.com/img/myimage_xs.jpg" media-xs="(min-device-width:320px and max-device- width:640px)" media-src-xs="http://cdn.url.com/img/ myimage_xs.jpg" media-m="(min-device-width:640px

    and max-device-width: 1024px)" media-src-m="http://cdn.url.com/img/myimage_m.jpg" media-xl="(min-device-width:1024px)" media-src-xl="http://cdn.url.com/img/ myimage_xsl.jpg" />

95. http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/ Text <img src="default.jpg" srclist="alternativeSizes" alt="Picture of Unicorn" /> <sourcelist

    id="alternativeSizes"> <source src="big.jpg" media="min-width: 600px" width="600" height="400" /> <source src="small.jpg" media="max-width: 600px" width="320" height="320" /> </sourcelist>

96. http://ikelewis.com/the-future/ Text <img src="large-default-file.jpg"> <source src="smaller.jpg" media="max-width: 600px" /> <source

    src="tiny.jpg" media="max-width: 320px" /> </img>

97. Server-side detection

98. UA Strings don’t have to be evil

99. Don’t exclude Enhance

100. http://www.lukew.com/ff/entry.asp?1392

101. http://flic.kr/p/6e7uqr <body> {{>header}} [...document content...] {{>footer}} </body> header.html mobile_header.html footer.html

     mobile_footer.html

102. http://flic.kr/p/6e7uqr https://github.com/jiolasa/Simple-RESS

103. <?php // If user shows up and doesn't have a

     cookie set if(!isset($_COOKIE['resolution'])) { ?> <script> // Set cookie based on screen size document.cookie='resolution='+ Math.max(screen.width,screen.height)+'; path=/'; location.reload(true); </script> <?php // If user doesn't have JavaScript, they'll just // keep moving past here like nothing happened. } ?>

104. <?php $res = !empty($_COOKIE['resolution']) ? $_COOKIE['resolution'] : 500; // Arbitrary

     mobile resolution. ?> <body> <?php if($res > 800) { //large screen component } else { //small screen component } ?> </body>

105. Read these. http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server and http://www.slideshare.net/yiibu/pragmatic-responsive-design

106. Read this deck: http://www.slideshare.net/yiibu/pragmatic-responsive-design

107. Device database + Tacit data Great power

108. http://flic.kr/p/6e7uqr http://www.modernizr.com/download/

109. http://flic.kr/p/6e7uqr detect:{ width:function(){ return (window.innerWidth>0)?window.innerWidth:screen.width; }, height:function(){ return (window.innerHeight>0)?window.innerHeight:screen.height; },

     touch:function(){ try{document.createEvent("TouchEvent");return true;} catch(e){return false;} }, json:function(){ return !!window.JSON; }, } http://browser.nokia.com/resources/scripts/ profile.js

110. Responding to the user

111. Context is complicated

112. Four elements of context http://flic.kr/p/aRo4z

113. Context of use

114. Context of device

115. Context of task

116. Context of environment

117. http://flic.kr/p/7c8Nkq

118. Mobile is a loaded term

119. Don’t assume too much

120. Context matters

121. Context is the key to a web that responds to

     people

122. JAMES PEARCE http://jeffcroft.com/blog/2011/may/16/serious-excercise/#c166865 I’m fascinated to explore how the web

     can evolve over the next 10 years. I believe that understanding context is at the heart of it – like the speed of light was to turn-of-the-century physicists – and that we should continue to explore the boundaries so as to change the expectations of both creators and users. Or, like those same physicists 120 years ago, do we really think we’ve got it all figured out?

123. Question everything

124. LEWIS CARROLL "Have you guessed the riddle yet?" the Hatter

     said, turning to Alice again. "No, I give it up," Alice replied: "what's the answer?' "I haven't the slightest idea," said the Hatter.

125. We’ve only scratched the surface

126. FUTUREFRIEND.LY Our existing standards, workflows, and infrastructure won't hold up.

     Today's onslaught of devices is already pushing them to the breaking point. They can't withstand what's ahead.

127. Create the future

128. thank you! TIM KADLEC Rich Web Experience, December 2011 @tkadlec

     timkadlec.com responsiveenhancement.com