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

Understand When You Can, Fake It When You Can’t

Understand When You Can, Fake It When You Can’t

How the decisions you make on the web affect other people. Given at Talk Web Design 2014, in London.

Peter Gasston

May 07, 2014
Tweet

More Decks by Peter Gasston

Other Decks in Technology

Transcript

  1. UNDERSTAND WHEN
    YOU CAN, FAKE IT
    WHEN YOU CAN’T
    #TALKWD 7 MAY 14

    View full-size slide

  2. PETER GASSTON

    @STOPSATGREEN

    View full-size slide

  3. TECHNOLOGIST &
    FRONT-END LEAD

    REHABSTUDIO

    View full-size slide

  4. THE DECISIONS
    YOU MAKE
    HAVE WEIGHT.
    @stopsatgreen

    View full-size slide

  5. (I DON’T
    REALLY WANT
    YOU TO
    DISAGREE
    WITH ME)
    @stopsatgreen

    View full-size slide

  6. DESIGN
    DECISIONS
    @stopsatgreen

    View full-size slide

  7. COPY
    DECISIONS
    @stopsatgreen

    View full-size slide

  8. TECHNICAL
    DECISIONS
    @stopsatgreen

    View full-size slide

  9. document.addEventListener('DOMContentLoaded', function() {
    // your code here
    });
    @stopsatgreen
    $(document).ready(function() {
    // your code here
    });
    VS.

    View full-size slide

  10. “Oakley’s monster
    page of baubles.”
    @stopsatgreen
    - Phil Hawksworth
    http://hawksworx.com/blog/oakleys-monster-page-of-baubles/

    View full-size slide

  11. 471 HTTP requests
    85.4MB page weight
    2'45" DOMContentLoaded
    4'10" Load
    @stopsatgreen

    View full-size slide

  12. http://httparchive.org/trends.php

    View full-size slide

  13. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

    View full-size slide

  14. Google research found that an increase in page
    load time from 0.4 seconds to 0.9 seconds saw
    traffic and ad revenue drop by 20%.
    Amazon calculated that slowing the page load
    by one second would cost them $1.6 billion
    over a year.
    @stopsatgreen
    http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

    View full-size slide

  15. 47 percent expect a web page to load in
    two seconds or less.
    40 percent abandon a website that takes
    longer than three seconds to load.
    http://blog.kissmetrics.com/loading-time/

    View full-size slide

  16. 79 percent of shoppers dissatisfied with
    performance are less likely to visit again.
    52 percent say that page load performance is
    important to their site loyalty.
    http://blog.kissmetrics.com/loading-time/

    View full-size slide


  17. @stopsatgreen
    VS.

    View full-size slide

  18. “Over a mobile connection, it may
    take 2 seconds to download the
    initial page of HTML, but it can be
    immediately rendered.
    @stopsatgreen

    View full-size slide

  19. “Even as the rest of the JavaScript
    application is being downloaded,
    the user can interact with the page.
    It feels 5x faster.”
    @stopsatgreen
    - AirBnB
    http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product

    View full-size slide

  20. “By rendering our page content
    on the server and deferring all
    JavaScript execution… we’ve
    dropped the time to first Tweet
    to one-fifth of what it was.”
    @stopsatgreen
    - Twitter
    https://blog.twitter.com/2012/improving-performance-on-twittercom

    View full-size slide

  21. font-family: Georgia, serif;
    @stopsatgreen
    VS.
    font-family: 'My Font', serif;

    View full-size slide

  22. Submit
    @stopsatgreen
    VS.
    Submit

    View full-size slide

  23. Submit
    @stopsatgreen
    VS.
    Link

    View full-size slide

  24. “When an elevator fails, it's
    useless. When an escalator fails,
    it becomes stairs. We should be
    building escalators, not elevators.”
    @stopsatgreen
    - Jake Archibald
    http://jakearchibald.com/2013/progressive-enhancement-still-important/

    View full-size slide

  25. Link
    @stopsatgreen
    VS.
    Submit
    Goes somewhere
    Does something

    View full-size slide

  26. Number

    @stopsatgreen
    VS.
    Number

    View full-size slide

  27. Number
    @stopsatgreen
    VS.
    Number

    View full-size slide

  28. :hover div {
    left: 100px;
    top: 100px;
    }
    @stopsatgreen
    VS.
    :hover div {
    transform: translate(100px, 100px);
    }

    View full-size slide

  29. @stopsatgreen
    content="width=device-width, user-scalable=no">

    View full-size slide

  30. @stopsatgreen
    var ua = navigator.userAgent.toLowerCase(),
    isAndroid = ua.indexOf('android') > -1;
    if (isAndroid) {
    window.location = 'http://mobile.example.com';
    }

    View full-size slide

  31. EMPATHY
    @stopsatgreen

    View full-size slide

  32. “Technical skills still matter, but
    today making digital services that
    meet users’ needs also depends
    on our ability to collaborate across
    many types of boundaries.”
    @stopsatgreen
    - Jonathan Kahn
    http://alistapart.com/article/people-skills-for-web-workers

    View full-size slide

  33. “It is impossible to collaborate
    effectively without a sense of
    empathy. It provides a sense
    of fellowship and enables
    better teamwork.”
    @stopsatgreen
    - Stephen Caver
    http://cognition.happycog.com/article/why-developers-need-to-learn-design

    View full-size slide

  34. @stopsatgreen
    http://toyark.com/
    No empathy
    Empathy

    View full-size slide

  35. “Having the integrity and
    introspective accuracy to
    distinguish what one likes from
    what is good, useful, meaningful
    is vital; we do not work for
    ourselves but for our users.”
    @stopsatgreen
    - Mills Baker
    http://mokriya.quora.com/Designer-Duds-Losing-Our-Seat-at-the-Table

    View full-size slide

  36. “It is so easy to believe that if you
    design something that you like,
    then it must be good.
    We just have to have the
    discipline to step out of that role.”
    @stopsatgreen
    - Jakob Nielsen
    http://drt.fm/jakob-nielsen/#!/transcript

    View full-size slide

  37. https://www.flickr.com/photos/yimhafiz/5117737179/

    View full-size slide

  38. http://tinyurl.com/ptch4u7

    View full-size slide

  39. “You can never really be
    another person, but you can
    become more skilled at not
    only just being yourself.”
    @stopsatgreen
    - Jakob Nielsen
    http://drt.fm/jakob-nielsen/#!/transcript

    View full-size slide

  40. “Treat people with
    understanding when you can,
    and fake it when you can't
    until you do understand.”
    @stopsatgreen
    - Kim Harrison
    https://www.goodreads.com/quotes/266474

    View full-size slide

  41. YOU HAVE
    BEEN WATCHING
    @STOPSATGREEN

    View full-size slide