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/

Transcript

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 mustache.js
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
21. Who needs directions if you can skip to the destination? URLs are like transporters
22. Everything should have a URL
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
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
35. Welcome to the AJAX Generation iPhone Generation
37. Fast is about perception
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
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…
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
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™
68. HTML5 History API makes me all tingly
69. pushState replaceState URL Change + back button stack URL Change only
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