Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Tim Kadlec

March 13, 2012
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

Transcript

  1. developing for
    the anywhere,
    everywhere web
    TIM KADLEC
    Rich Web Experience, December 2011
    @tkadlec timkadlec.com

    View Slide

  2. The maturation
    of the medium

    View Slide

  3. TOM BARRETT
    Chaos in the world brings uneasiness, but
    it also allows the opportunity for creativity
    and growth.

    View Slide

  4. Control is an illusion

    View Slide

  5. MARSHALL MCLUHAN
    We see the world through a rear-view
    mirror. We march backwards into the
    future.

    View Slide

  6. The web
    removes constraints

    View Slide

  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.

    View Slide

  8. The silo model
    will not hold up

    View Slide

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

    View Slide

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

    View Slide

  11. Constellation of
    experiences

    View Slide

  12. Embrace flexibility

    View Slide

  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.

    View Slide

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

    View Slide

  15. View Slide

  16. Laying the
    groundwork

    View Slide

  17. Disclaimer:
    Not a silver bullet

    View Slide

  18. Everything on the web
    is a shade of grey

    View Slide

  19. Know thy analytics

    View Slide

  20. Get out of
    Photoshop

    View Slide

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

    View Slide

  22. Get into the
    browser

    View Slide

  23. Iterate

    View Slide

  24. Structured content

    View Slide

  25. JEFFREY ZELDMAN
    https://twitter.com/#!/zeldman/status/804159148
    Content precedes design. Design in the
    absence of content is not design, it's
    decoration.

    View Slide

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

    View Slide

  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…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. This is awesome

    View Slide

  32. API First

    View Slide

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

    View Slide

  34. View Slide

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

    View Slide

  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).

    View Slide

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

    View Slide

  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');
    }

    View Slide

  39. Fluid layouts

    View Slide

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

    View Slide

  41. target % context = result

    View Slide

  42. 960px
    60px
    20px

    View Slide

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

    View Slide

  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

    View Slide

  45. body {
    font-size: 100%; /* 16px */
    font-family: Georgia;
    }
    h1 {
    font-size: 2.25em; /* 36px/16px = 2.25em */
    font-family: Georgia;
    }

    View Slide

  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

    View Slide

  47. Media queries

    View Slide

  48. visual viewport
    (device-width)
    layout viewport

    View Slide


  49. View Slide


  50. View Slide


  51. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. Determine your
    baseline experience

    View Slide

  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.

    View Slide

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

    View Slide

  58. Embedded or
    external

    View Slide

  59. href="/mobile.css" media="only screen and (min-
    width: 320px)">

    View Slide

  60. href="/mobile.css" media="only screen and (min-
    width: 320px)">
    @media screen and (min-width:480px)
    {
    ...
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  64. Experiment with
    more than width

    View Slide

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

    View Slide

  66. http://flic.kr/p/6e7uqr
    media="screen and (min-height: 720px) and (min-width: 1000px)"
    href="/sites/all/themes/edf/css/tallWideScreen.css”
    />

    View Slide

  67. Beware the
    rabbit hole

    View Slide

  68. Responsive assets

    View Slide

  69. img { width: 50%; }

    View Slide




  70. figure {
    width: 40%;
    }
    img {
    max-width: 100%;
    }

    View Slide

  71. Don’t just scale
    Resize

    View Slide

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

    View Slide

  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.

    View Slide

  74. Performance
    matters

    View Slide

  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

    View Slide

  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

    View Slide

  77. 25%
    50%
    75%
    100%
    2009 2011
    Category Title
    20%
    74%
    % of people who will bounce
    after 5 seconds
    Source: http://bit.ly/viowVq

    View Slide

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

    View Slide

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

    src='http://src.sencha.io/http://mysite.com/
    myimage.png'
    alt='My image'
    />

    src='http://src.sencha.io/x50/http://mysite.com/
    myimage.png'
    alt='My image'
    />

    src='http://src.sencha.io/data/http://mysite.com/
    myimage.png'
    alt='My image'
    />

    View Slide

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

    View Slide

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

    View Slide

  82. Don’t stop
    with images

    View Slide

  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
    }

    View Slide

  84. Be careful
    with width

    View Slide

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

    View Slide

  86. View Slide

  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/

    View Slide

  88. Client-side is
    not enough

    View Slide

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

    View Slide

  90. First page load

    View Slide

  91. Race conditions

    View Slide

  92. Content Delivery
    Networks

    View Slide

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

    View Slide

  94. http://old.nabble.com/add-html-attribute-for-%22responsive-images%22-td32324865.html
    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"
    />

    View Slide

  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
    src="default.jpg"
    srclist="alternativeSizes"
    alt="Picture of Unicorn"
    />

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

    View Slide

  96. http://ikelewis.com/the-future/
    Text

    src="smaller.jpg"
    media="max-width: 600px"
    />
    src="tiny.jpg"
    media="max-width: 320px"
    />

    View Slide

  97. Server-side
    detection

    View Slide

  98. UA Strings don’t
    have to be evil

    View Slide

  99. Don’t exclude
    Enhance

    View Slide

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

    View Slide

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

    {{>header}}
    [...document content...]
    {{>footer}}

    header.html
    mobile_header.html
    footer.html
    mobile_footer.html

    View Slide

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

    View Slide

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

    View Slide

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

    if($res > 800) {
    //large screen component
    } else {
    //small screen component
    }
    ?>

    View Slide

  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

    View Slide

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

    View Slide

  107. Device database
    +
    Tacit data
    Great power

    View Slide

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

    View Slide

  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

    View Slide

  110. Responding to
    the user

    View Slide

  111. Context is
    complicated

    View Slide

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

    View Slide

  113. Context
    of use

    View Slide

  114. Context
    of device

    View Slide

  115. Context
    of task

    View Slide

  116. Context
    of environment

    View Slide

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

    View Slide

  118. Mobile is a
    loaded term

    View Slide

  119. Don’t assume
    too much

    View Slide

  120. Context matters

    View Slide

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

    View Slide

  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?

    View Slide

  123. Question everything

    View Slide

  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.

    View Slide

  125. We’ve only
    scratched the surface

    View Slide

  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.

    View Slide

  127. Create the future

    View Slide

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

    View Slide