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

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 full-size slide

  2. Kyle Neath is...

    View full-size slide

  3. warpspire.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. The future of the
    web is…
    RESPONSIVE

    View full-size slide

  7. How do you define
    responsive?

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Technologies

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. … and how GitHub is
    stumbling through them

    View full-size slide

  15. URL Design
    My recent love affair

    View full-size slide

  16. URLs are sexy

    View full-size slide

  17. Working with Terminal
    made me love URLs

    View full-size slide

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

    View full-size slide

  19. Everything should
    have a URL

    View full-size slide

  20. A URL is an agreement

    View full-size slide

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

    View full-size slide

  22. // 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 full-size slide

  23. An should
    behave like an

    View full-size slide

  24. ⌘ + click
    ⇧ + click
    Middle click

    View full-size slide

  25. Be responsive!
    Browsers have
    windows & tabs

    View full-size slide

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

    View full-size slide

  27. Feels Faster™
    Making people say

    View full-size slide

  28. Welcome to the
    AJAX Generation

    View full-size slide

  29. Welcome to the
    AJAX Generation
    iPhone Generation

    View full-size slide

  30. Fast is about perception

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Caching!
    …is really difficult

    View full-size slide

  34. AJAX!
    loaders are not responsive

    View full-size slide

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

    View full-size slide

  36. There will always be
    full page loads

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Twitter: HTML + CSS + JS
    API Driven

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Why is Twitter’s so slow?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Always favor science
    over theory

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. URL Design
    +
    Feels Faster™

    View full-size slide

  52. HTML5 History API
    makes me all tingly

    View full-size slide

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

    View full-size slide

  54. Partial page updates
    with real URLs!

    View full-size slide

  55. We can design for the
    back button!

    View full-size slide

  56. Browser Support?
    5.0 4.0
    Yes

    View full-size slide

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

    View full-size slide

  58. history.js
    balupton/history.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. Futuristic design
    This stuff is opening up

    View full-size slide

  63. State?
    We can do that

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. And they’re all broken

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. warpspire.com/talks/responsive

    View full-size slide