Responsive web design from the future

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

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

    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