Responsive web design from the future

Transcript

1. WEB DESIGN
   FROM THE FUTURE
   RESPONSIVE
   pushState. replaceState. Hashbangs!# AJAX. PJAX.
   Beets. Bears. Battlestar Galactica.
   

   View Slide

2. Kyle Neath is...
   

   View Slide

3. ~designer
   @
   

   View Slide

4. @kneath
   

   View Slide

5. warpspire.com
   

   View Slide

6. URL Design
   Partial Page Updates
   Let’s talk about
   

   View Slide

7. The future of the
   web is…
   HTML5 History API
   +
   Smart Partial Page Updates
   

   View Slide

8. The future of the
   web is…
   RESPONSIVE
   

   View Slide

9. How do you define
   responsive?
   

   View Slide

10. Resize the browser
    With an iPad / Playbook
    Responsive
    Web Design
    (lol/jk)
    “
    ”
    

    View Slide

11. Fast pageloads
    Animates naturally
    Responds instantly
    Feels Faster™
    click touch zoom scroll swipe type resize
    

    View Slide

12. Keyboard Shortcuts
    Back & Forward Buttons
    URL Hacking
    Browser Native
    

    View Slide

13. Technologies
    

    View Slide

14. @media queries
    Modernizr
    jQuery.hotKeys
    CSS3 Animations
    HTML5 History API
    XMLHTTPRequest
    mustache.js
    

    View Slide

15. @media queries
    Modernizr
    jQuery.hotKeys
    CSS3 Animations
    HTML5 History API
    XMLHTTPRequest
    mustache.js
    TOO MUCH FOR ONE DAY
    

    View Slide

16. … and how GitHub is
    stumbling through them
    

    View Slide

17. URL Design
    My recent love affair
    

    View Slide

18. URLs are sexy
    

    View Slide

19. Working with Terminal
    made me love URLs
    

    View Slide

20. View Slide

21. Who needs directions if you
    can skip to the destination?
    URLs are like transporters
    

    View Slide

22. Everything should
    have a URL
    

    View Slide

23. View Slide

24. A URL is an agreement
    

    View Slide

25. Can you see a future
    with hashbangs?
    #!/defunct
    

    View Slide

26. // Redirect legacy anchor-based issue urls to real URLs.
    var location_with_hash = location.pathname + location.hash
    var matches = location_with_hash.match(/#issue\/(\d+)(\/comment\/(\d+))?/)
    if (matches) {
    var issue_number = matches[1]
    var comment_id = matches[3]
    if (issue_number) {
    if (comment_id) {
    window.location = location_with_hash.replace(/\/?#issue\/\d+\/comment\/\d+/
    } else {
    window.location = location_with_hash.replace(/\/?#issue\/\d+/, "/" + issue_
    }
    }
    }
    FOREVER
    

    View Slide

27. An should
    behave like an
    

    View Slide

28. ⌘ + click
    ⇧ + click
    Middle click
    

    View Slide

29. View Slide

30. Be responsive!
    Browsers have
    windows & tabs
    

    View Slide

31. e.which == 1
    &&
    !e.metaKey
    &&
    !e.shiftKey
    

    View Slide

32. Feels Faster™
    Making people say
    

    View Slide

33. Welcome to the
    AJAX Generation
    

    View Slide

34. View Slide

35. Welcome to the
    AJAX Generation
    iPhone Generation
    

    View Slide

36. View Slide

37. Fast is about perception
    

    View Slide

38. View Slide

39. =
    1 billion SQL Queries
    2 billion Memcache calls
    3 billion Git calls
    

    View Slide

40. SLOW
    

    View Slide

41. Why are we focusing up here?
    This is the part that changes
    

    View Slide

42. Caching!
    …is really difficult
    

    View Slide

43. AJAX!
    

    View Slide

44. AJAX!
    loaders are not responsive
    

    View Slide

45. View Slide

46. View Slide

47. Only use loaders when
    requests are slow
    ~500ms
    Cache content for
    zero-request updates
    Think about the back button
    

    View Slide

48. There will always be
    full page loads
    

    View Slide

49. Serve all HTML (or JSON)
    in one request
    If you want fast…
    

    View Slide

50. View Slide

51. Remember, page load time
    is about perception
    When can I: scroll, read text, click links?
    

    View Slide

52. Twitter: HTML + CSS + JS
    API Driven
    

    View Slide

53. Apply Science
    https://twitter.com/#!/kneath
    4.7sec
    total load time
    4.3sec
    timeline load
    Time to usable!
    

    View Slide

54. Apply Science
    https://github.com/kneath
    3.4sec
    total load time
    1.1sec
    HTML/CSS/JS loaded
    Time to usable!
    

    View Slide

55. Why is Twitter’s so slow?
    

    View Slide

56. SSL
    

    View Slide

57. Each domain is a new
    SSL Handshake
    twitter.com
    api.twitter.com
    

    View Slide

58. Handshakes and Waterfalls
    SSL
    twitter.com
    SSL
    api.twitter.com
    HTML, CSS, JS
    JSON Data
    

    View Slide

59. SSL Negotiation is our
    bottleneck
    40ms backend response time
    500ms blocking SSL Negotiation
    

    View Slide

60. Always favor science
    over theory
    

    View Slide

61. Be Responsive
    Client-Side Cache
    AJAX/JSON Request
    Full Page
    

    View Slide

62. View Slide

63. Server or client side
    template rendering?
    So if we want partial page updates
    sometimes, full page updates other times…
    

    View Slide

64. Use the same templates
    Both!
    mustache.rb mustache.js
    Render HTML in AJAX/JSON
    partials are your friend
    

    View Slide

65. With SSL negotiation,
    server time is ~free
    One is simpler than two
    But…
    

    View Slide

66. URL Design
    +
    Feels Faster™
    

    View Slide

67. View Slide

68. HTML5 History API
    makes me all tingly
    

    View Slide

69. pushState
    replaceState
    URL Change + back button stack
    URL Change only
    

    View Slide

70. Partial page updates
    with real URLs!
    

    View Slide

71. We can design for the
    back button!
    

    View Slide

72. Browser Support?
    5.0 4.0
    Yes
    

    View Slide

73. Browser Support?
    90%
    https://github.com
    

    View Slide

74. history.js
    balupton/history.js
    

    View Slide

75. Javascript redirects
    If you use hashbangs…
    two requests instead of one
    Confusing code paths
    some routing in server, some in js?
    

    View Slide

76. Some users get a
    slower experience
    Cost of History API
    But isn’t Chrome already faster than IE7?
    

    View Slide

77. Poison your URL structure
    Committing to nasty JS
    redirects FOREVER
    Manual anchor Javascript
    Cost of Hashbangs
    

    View Slide

78. Futuristic design
    This stuff is opening up
    

    View Slide

79. State?
    We can do that
    

    View Slide

80. ?milestone=3&sort=created&direction=desc&state=open
    

    View Slide

81. Save URLs in database
    replaceState on load
    but only if there aren’t any params already
    

    View Slide

82. Maintain state across
    pageviews
    Copy & paste URLs
    over IM / chat
    

    View Slide

83. Infinite Scroll?
    We can do that
    (correctly)
    

    View Slide

84. Facebook
    Tumblr
    Twitter
    Lots of websites are using infinite scroll
    

    View Slide

85. And they’re all broken
    

    View Slide

86. Infinite scroll is only
    better than pages if you
    can restore your position
    

    View Slide

87. http://warpspire.com/experiments/history-api
    

    View Slide

88. Happy Unix Enthusiasts
    Happy Grandmas
    Happy Developers
    Good URL Design + History API
    makes for…
    

    View Slide

89. warpspire.com/talks/responsive
    

    View Slide