$30 off During Our Annual Pro Sale. View Details »

Responsive web design from the future

Responsive web design from the future

pushState. replaceState. Hashbangs. AJAX. PJAX. Beets. Bears. Battlestar Galactica.

Responsive web design is about a lot more than the size of your screen. This talk is about about how GitHub handles links, the url bar, partial page updates, and explains why I think the HTML5 history API is the most important thing to happen to front end development since Firebug.

http://warpspire.com/talks/responsive/

Kyle Neath

May 31, 2011
Tweet

More Decks by Kyle Neath

Other Decks in Design

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