Developing for the anywhere, everywhere web

We are just now starting to understand and embrace the web for what it truly is—an inherently flexible and responsive medium. As the number of internet-connected devices explodes, we are forced to reassess how we create our sites and applications. We don't know for certain what device our users will be using or where they'll be using them from. All we know is that they will expect to see meaningful content in a design that is tailored to the constraints of the device, and that this content will be delivered to them quickly—no matter where they are.

This session what it means to embrace the inherent flexibility of the web. We will discuss where our current practices and tools fall short. We'll also take a look at how new techniques like responsive enhancement can help.

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