Developing for the anywhere, everywhere web

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.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

March 13, 2012
Tweet

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