"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.

1. Wednesday, September 5, 12

2. Know Your History(API)
Using HTML5 History API to Ajaxify
your Magnolia WebSite
Wednesday, September 5, 12

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 magnolia
Wednesday, September 5, 12

4. About Me
• William Paoli
• Front End Web Developer
• From San Francisco,
California, USA
• wpaoli@atlassian.com
Wednesday, September 5, 12

5. How we work together
Interactive Marketing Team
Designers and Web Developers
Wednesday, September 5, 12

6. How we work together
Interactive Marketing Team Product Marketing Managers
Designers and Web Developers
Wednesday, September 5, 12

7. How we work together
Interactive Marketing Team Product Marketing Managers Demand Generation
Designers and Web Developers
Wednesday, September 5, 12

8. The Website is our
Salesperson
Wednesday, September 5, 12

9. The Atlassian Redesign
We wanted to go from “This” to “This"
August 2012
Wednesday, September 5, 12

10. The Atlassian Redesign
We wanted to go from “This” to “This"
1,800,000 Visits
Wednesday, September 5, 12

11. The Atlassian Redesign
We wanted to go from “This” to “This"
4,006,000 Pageviews
Wednesday, September 5, 12

12. The Atlassian Redesign
We wanted to go from “This” to “This"
Wednesday, September 5, 12

13. The Big Redesign
Wednesday, September 5, 12

14. The Concerns
• SEO
• Clean URLS
• Clean UI
• Great Performance
Wednesday, September 5, 12

15. The Concerns
• SEO
• Clean URLS
• Clean UI
• Great Performance
Wednesday, September 5, 12

16. The Conversation
Wednesday, September 5, 12

17. Wednesday, September 5, 12

18. Wednesday, September 5, 12

19. Wednesday, September 5, 12

20. Wednesday, September 5, 12

21. Wednesday, September 5, 12

22. Wednesday, September 5, 12

23. Wednesday, September 5, 12

24. Wednesday, September 5, 12

25. Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

27. “DUDE, you
are using
the
HISTORY
API Right?”
Wednesday, September 5, 12

28. Of course I am, duh...
Wednesday, September 5, 12

29. Of course I am, duh...
So uh...what’s the
History API?
Wednesday, September 5, 12

30. Wednesday, September 5, 12

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. 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. 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. history.pushState(data,title,url)
Wednesday, September 5, 12

35. history.pushState(data,title,url)
{tabName:‘foo’}
Adds to history.state
Wednesday, September 5, 12

36. history.pushState(data,title,url)
{tabName:‘foo’}
Currently Not Implemented
Wednesday, September 5, 12

37. history.pushState(data,title,url)
{tabName:‘foo’}
Used to modify window.location
Wednesday, September 5, 12

38. history.pushState(data,title,url)
{tabName:‘foo’}
AKA “Fake” URLS
Wednesday, September 5, 12

39. history.pushState(data,title,url);
history.replaceState(data,title,url);
Wednesday, September 5, 12

40. history.pushState(data,title,url);
history.replaceState(data,title,url);
window.onpopstate = function(){}
Wednesday, September 5, 12

41. A useless example that
hopefully illustrates
how this works
Wednesday, September 5, 12

42. Level 1
Old Skool Style
Wednesday, September 5, 12

43. Demo of static tabs
(reload each time)
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

51. Level 2
Get Some jQuery up in there!
Wednesday, September 5, 12

52. JS tab solution
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

60. Level 3
Let’s add that History thing William keeps talking about
Wednesday, September 5, 12

61. History API to the Rescue
history.pushState(data,title, url)
Wednesday, September 5, 12

62. History API’d tab solution
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

70. Level 4
Put it all together!
Wednesday, September 5, 12

71. History API’d tab + Static Pages
behind the fake urls solution
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

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 Button
Wednesday, September 5, 12

79. Dude, um did you forget
IE again?!
Wednesday, September 5, 12

80. There’s a plugin for that
Wednesday, September 5, 12

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. Whose Happy?
Wednesday, September 5, 12

83. Whose Happy?
Jeff the Designer is Happy!
Wednesday, September 5, 12

84. Whose Happy?
Jeff the Designer is Happy!
Mr “SEO” Joe is happy!
Wednesday, September 5, 12

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. Thanks for listening!
Wednesday, September 5, 12

87. Questions?
Wednesday, September 5, 12

88. Be sure to check out:
Continuous Media Playback and
RequireJS Modules
David Pronk
David Pronk
Wednesday, September 5, 12