HTML5 History api to Ajaxify your Magnolia Website

1,349 views
1,236 views

Published on

"Know your History! Use the HTML5 History api to Ajaxify your Magnolia site without sacrificing SEO or Usability."

Using the history api, jQuery and Magnolia, learn how to create websites that are highly responsive, search engine friendly, have pretty urls, and don't break the back button. Using this technique we make everyone happy, from content publishers, to search engines and most importantly the end user.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,349
On SlideShare
0
From Embeds
0
Number of Embeds
391
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 History api to Ajaxify your Magnolia Website

  1. 1. Wednesday, September 5, 12
  2. 2. Know Your History(API) Using HTML5 History API to Ajaxify your Magnolia WebSiteWednesday, September 5, 12
  3. 3. Agenda • The story of when I realized I needed to learn more about the history API • A stupidly simple example of the code in action • A walkthrough of our product tour redesign • How it works with magnoliaWednesday, September 5, 12
  4. 4. About Me • William Paoli • Front End Web Developer • From San Francisco, California, USA • wpaoli@atlassian.comWednesday, September 5, 12
  5. 5. How we work together Interactive Marketing Team Designers and Web DevelopersWednesday, September 5, 12
  6. 6. How we work together Interactive Marketing Team Product Marketing Managers Designers and Web DevelopersWednesday, September 5, 12
  7. 7. How we work together Interactive Marketing Team Product Marketing Managers Demand Generation Designers and Web DevelopersWednesday, September 5, 12
  8. 8. The Website is our SalespersonWednesday, September 5, 12
  9. 9. The Atlassian Redesign We wanted to go from “This” to “This" August 2012Wednesday, September 5, 12
  10. 10. The Atlassian Redesign We wanted to go from “This” to “This" 1,800,000 VisitsWednesday, September 5, 12
  11. 11. The Atlassian Redesign We wanted to go from “This” to “This" 4,006,000 PageviewsWednesday, September 5, 12
  12. 12. The Atlassian Redesign We wanted to go from “This” to “This"Wednesday, September 5, 12
  13. 13. The Big RedesignWednesday, September 5, 12
  14. 14. The Concerns • SEO • Clean URLS • Clean UI • Great PerformanceWednesday, September 5, 12
  15. 15. The Concerns • SEO • Clean URLS • Clean UI • Great PerformanceWednesday, September 5, 12
  16. 16. The ConversationWednesday, September 5, 12
  17. 17. Wednesday, September 5, 12
  18. 18. Wednesday, September 5, 12
  19. 19. Wednesday, September 5, 12
  20. 20. Wednesday, September 5, 12
  21. 21. Wednesday, September 5, 12
  22. 22. Wednesday, September 5, 12
  23. 23. Wednesday, September 5, 12
  24. 24. Wednesday, September 5, 12
  25. 25. Wednesday, September 5, 12
  26. 26. Requirements of New Product Tour Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  27. 27. “DUDE, you are using the HISTORY API Right?”Wednesday, September 5, 12
  28. 28. Of course I am, duh...Wednesday, September 5, 12
  29. 29. Of course I am, duh... So uh...what’s the History API?Wednesday, September 5, 12
  30. 30. Wednesday, September 5, 12
  31. 31. window.history.length - returns the number of items window.history.go(n)- go forward/backward any number window.history.back()- go back window.history.forward()- go forward window.history.pushState(data, title, url) window.history.replaceState(data, title, url)Wednesday, September 5, 12
  32. 32. window.history.length - returns the number of items window.history.go(n)- go forward/backward any number window.history.back()- go back window.history.forward()- go forward window.history.pushState(data, title, url) window.history.replaceState(data, title, url)Wednesday, September 5, 12
  33. 33. window.history.length - returns the number of items window.history.go(n)- go forward/backward any number window.history.back()- go back window.history.forward()- go forward window.history.pushState(data, title, url) window.history.replaceState(data, title, url)Wednesday, September 5, 12
  34. 34. history.pushState(data,title,url)Wednesday, September 5, 12
  35. 35. history.pushState(data,title,url) {tabName:‘foo’} Adds to history.stateWednesday, September 5, 12
  36. 36. history.pushState(data,title,url) {tabName:‘foo’} Currently Not ImplementedWednesday, September 5, 12
  37. 37. history.pushState(data,title,url) {tabName:‘foo’} Used to modify window.locationWednesday, September 5, 12
  38. 38. history.pushState(data,title,url) {tabName:‘foo’} AKA “Fake” URLSWednesday, September 5, 12
  39. 39. history.pushState(data,title,url); history.replaceState(data,title,url);Wednesday, September 5, 12
  40. 40. history.pushState(data,title,url); history.replaceState(data,title,url); window.onpopstate = function(){}Wednesday, September 5, 12
  41. 41. A useless example that hopefully illustrates how this worksWednesday, September 5, 12
  42. 42. Level 1 Old Skool StyleWednesday, September 5, 12
  43. 43. Demo of static tabs (reload each time)Wednesday, September 5, 12
  44. 44. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  45. 45. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  46. 46. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  47. 47. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  48. 48. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  49. 49. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  50. 50. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  51. 51. Level 2 Get Some jQuery up in there!Wednesday, September 5, 12
  52. 52. JS tab solutionWednesday, September 5, 12
  53. 53. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  54. 54. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  55. 55. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  56. 56. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  57. 57. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  58. 58. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  59. 59. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  60. 60. Level 3 Let’s add that History thing William keeps talking aboutWednesday, September 5, 12
  61. 61. History API to the Rescue history.pushState(data,title, url)Wednesday, September 5, 12
  62. 62. History API’d tab solutionWednesday, September 5, 12
  63. 63. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  64. 64. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  65. 65. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  66. 66. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  67. 67. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  68. 68. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  69. 69. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  70. 70. Level 4 Put it all together!Wednesday, September 5, 12
  71. 71. History API’d tab + Static Pages behind the fake urls solutionWednesday, September 5, 12
  72. 72. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  73. 73. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  74. 74. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  75. 75. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  76. 76. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  77. 77. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  78. 78. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back ButtonWednesday, September 5, 12
  79. 79. Dude, um did you forget IE again?!Wednesday, September 5, 12
  80. 80. There’s a plugin for thatWednesday, September 5, 12
  81. 81. Main Points to this • HTML5 History api is very valuable • We can now create ajax pages that have clean urls and is able to be search engine optimised • We made people happy!Wednesday, September 5, 12
  82. 82. Whose Happy?Wednesday, September 5, 12
  83. 83. Whose Happy? Jeff the Designer is Happy!Wednesday, September 5, 12
  84. 84. Whose Happy? Jeff the Designer is Happy! Mr “SEO” Joe is happy!Wednesday, September 5, 12
  85. 85. Whose Happy? Jeff the Designer is Happy! Mr “SEO” Joe is happy! The Users of atlassian.com are Happy!Wednesday, September 5, 12
  86. 86. Thanks for listening!Wednesday, September 5, 12
  87. 87. Questions?Wednesday, September 5, 12
  88. 88. Be sure to check out: Continuous Media Playback and RequireJS Modules David Pronk David PronkWednesday, September 5, 12

×