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.

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

May 07, 2014
Tweet

Transcript

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

    7 MAY 14
  2. PETER GASSTON
 @STOPSATGREEN

  3. TECHNOLOGIST & FRONT-END LEAD
 REHABSTUDIO

  4. THE DECISIONS YOU MAKE HAVE WEIGHT. @stopsatgreen

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

  6. DESIGN DECISIONS @stopsatgreen

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. COPY DECISIONS @stopsatgreen

  15. None
  16. None
  17. None
  18. None
  19. TECHNICAL DECISIONS @stopsatgreen

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

    { // your code here }); VS.
  21. None
  22. “Oakley’s monster page of baubles.” @stopsatgreen - Phil Hawksworth http://hawksworx.com/blog/oakleys-monster-page-of-baubles/

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

    @stopsatgreen
  24. http://httparchive.org/trends.php

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

  26. 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/
  27. 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/
  28. 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/
  29. <body></body> @stopsatgreen VS. <body>…</body>

  30. “Over a mobile connection, it may take 2 seconds to

    download the initial page of HTML, but it can be immediately rendered. @stopsatgreen
  31. “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
  32. “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
  33. font-family: Georgia, serif; @stopsatgreen VS. font-family: 'My Font', serif;

  34. None
  35. <a href="#" class="button">Submit</a> @stopsatgreen VS. <button type="submit">Submit</button>

  36. <a href="#" class="button">Submit</a> @stopsatgreen VS. <a href="//example.com" class="button">Link</a> ✗

  37. “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/
  38. <a href="//example.com" class="button">Link</a> @stopsatgreen VS. <button type="submit">Submit</button> Goes somewhere Does

    something
  39. <label>Number</label> <input type="text"> @stopsatgreen VS. <label for="number">Number</label> <input type="text" id="number">

  40. None
  41. <label><input type="text"> Number</label> @stopsatgreen VS. <label><input type="number"> Number</label>

  42. None
  43. :hover div { left: 100px; top: 100px; } @stopsatgreen VS.

    :hover div { transform: translate(100px, 100px); }
  44. @stopsatgreen <meta name="viewport" content="width=device-width, user-scalable=no">

  45. @stopsatgreen var ua = navigator.userAgent.toLowerCase(), isAndroid = ua.indexOf('android') > -1;

    if (isAndroid) { window.location = 'http://mobile.example.com'; }
  46. None
  47. None
  48. EMPATHY @stopsatgreen

  49. None
  50. “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
  51. “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
  52. @stopsatgreen http://toyark.com/ No empathy Empathy

  53. “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
  54. “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
  55. None
  56. None
  57. https://www.flickr.com/photos/yimhafiz/5117737179/

  58. http://tinyurl.com/ptch4u7

  59. “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
  60. “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
  61. YOU HAVE BEEN WATCHING @STOPSATGREEN