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.



Kyle Neath

May 31, 2011

More Decks by Kyle Neath

Other Decks in Design


  1. WEB DESIGN FROM THE FUTURE RESPONSIVE pushState. replaceState. Hashbangs!# AJAX.

    PJAX. Beets. Bears. Battlestar Galactica.
  2. Kyle Neath is...

  3. ~designer @

  4. @kneath

  5. warpspire.com

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

  7. The future of the web is… HTML5 History API +

    Smart Partial Page Updates
  8. The future of the web is… RESPONSIVE

  9. How do you define responsive?

  10. Resize the browser With an iPad / Playbook Responsive Web

    Design (lol/jk) “ ”
  11. Fast pageloads Animates naturally Responds instantly Feels Faster™ click touch

    zoom scroll swipe type resize
  12. Keyboard Shortcuts Back & Forward Buttons URL Hacking Browser Native

  13. Technologies

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

  15. @media queries Modernizr jQuery.hotKeys CSS3 Animations HTML5 History API XMLHTTPRequest

    mustache.js TOO MUCH FOR ONE DAY
  16. … and how GitHub is stumbling through them

  17. URL Design My recent love affair

  18. URLs are sexy

  19. Working with Terminal made me love URLs

  20. None
  21. Who needs directions if you can skip to the destination?

    URLs are like transporters
  22. Everything should have a URL

  23. None
  24. A URL is an agreement

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

  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
  27. An <a> should behave like an <a>

  28. ⌘ + click ⇧ + click Middle click

  29. None
  30. Be responsive! Browsers have windows & tabs

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

  32. Feels Faster™ Making people say

  33. Welcome to the AJAX Generation

  34. None
  35. Welcome to the AJAX Generation iPhone Generation

  36. None
  37. Fast is about perception

  38. None
  39. = 1 billion SQL Queries 2 billion Memcache calls 3

    billion Git calls
  40. SLOW

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

    that changes
  42. Caching! …is really difficult

  43. AJAX!

  44. AJAX! loaders are not responsive

  45. None
  46. None
  47. Only use loaders when requests are slow ~500ms Cache content

    for zero-request updates Think about the back button
  48. There will always be full page loads

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

    want fast…
  50. None
  51. Remember, page load time is about perception When can I:

    scroll, read text, click links?
  52. Twitter: HTML + CSS + JS API Driven

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

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

    Time to usable!
  55. Why is Twitter’s so slow?

  56. SSL

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

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

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

    blocking SSL Negotiation
  60. Always favor science over theory

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

  62. None
  63. Server or client side template rendering? So if we want

    partial page updates sometimes, full page updates other times…
  64. Use the same templates Both! mustache.rb mustache.js Render HTML in

    AJAX/JSON partials are your friend
  65. With SSL negotiation, server time is ~free One is simpler

    than two But…
  66. URL Design + Feels Faster™

  67. None
  68. HTML5 History API makes me all tingly

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

  70. Partial page updates with real URLs!

  71. We can design for the back button!

  72. Browser Support? 5.0 4.0 Yes

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

  74. history.js balupton/history.js

  75. Javascript redirects If you use hashbangs… two requests instead of

    one Confusing code paths some routing in server, some in js?
  76. Some users get a slower experience Cost of History API

    But isn’t Chrome already faster than IE7?
  77. Poison your URL structure Committing to nasty JS redirects FOREVER

    Manual anchor Javascript Cost of Hashbangs
  78. Futuristic design This stuff is opening up

  79. State? We can do that

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

  81. Save URLs in database replaceState on load but only if

    there aren’t any params already
  82. Maintain state across pageviews Copy & paste URLs over IM

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

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

  85. And they’re all broken

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

    restore your position
  87. http://warpspire.com/experiments/history-api

  88. Happy Unix Enthusiasts Happy Grandmas Happy Developers Good URL Design

    + History API makes for…
  89. warpspire.com/talks/responsive