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. // 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
  2. Only use loaders when requests are slow ~500ms Cache content

    for zero-request updates Think about the back button
  3. SSL

  4. Server or client side template rendering? So if we want

    partial page updates sometimes, full page updates other times…
  5. Javascript redirects If you use hashbangs… two requests instead of

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

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

    Manual anchor Javascript Cost of Hashbangs
  8. Save URLs in database replaceState on load but only if

    there aren’t any params already