html5 history api to ajaxify your magnolia website

Wednesday, September 5, 12

Know Your History(API)

Using HTML5 History API to Ajaxify your Magnolia WebSite

• 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

Agenda

• William Paoli• Front End Web Developer• From San Francisco,

California, USA• [email protected]

About Me

How we work together

Interactive Marketing TeamDesigners and Web Developers

Product Marketing Managers

Product Marketing Managers Demand Generation

The Website is our Salesperson

We wanted to go from “This” to “This"

The Atlassian Redesign

August 2012

1,800,000 Visits

4,006,000 Pageviews

The Big Redesign

• SEO • Clean URLS• Clean UI• Great Performance

The Concerns

• SEO • Clean URLS• Clean UI• Great Performance

The Concerns

The Conversation

Requirements of New Product Tour

Easy to Read and Real URLs

Search Engine Friendly/Discoverability

Don’t Break Back Button

Unique page titles for each tab

Unique Description and Keywords available

Great User Experience

“DUDE, you

are using

HISTORY

API Right?”Wednesday, September 5, 12

Of course I am, duh...

So uh...what’s the History API?

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)

history.pushState(data,title,url)

{tabName:‘foo’}Adds to history.state

{tabName:‘foo’}

Currently Not Implemented

{tabName:‘foo’}

Used to modify window.location

{tabName:‘foo’}

AKA “Fake” URLS

history.pushState(data,title,url);

history.replaceState(data,title,url);

history.pushState(data,title,url);

history.replaceState(data,title,url);

window.onpopstate = function(){}

A useless example that hopefully illustrates

how this works

Level 1

Old Skool Style

Demo of static tabs (reload each time)

Static Site Report Card

Level 2Get Some jQuery up in there!

JS tab solution

JS Tab Report Card

Level 3Let’s add that History thing William keeps talking about

History API to the Rescue

history.pushState(data,title, url)

History API’d tab solution

History API’d Tab Report Card

Level 4Put it all together!

History API’d tab + Static Pages behind the fake urls solution

History API Tab with Static Behnd

Dude, um did you forget IE again?!

There’s a plugin for that

• 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!

Main Points to this

Whose Happy?

Jeff the Designer is Happy!

Whose Happy?

Mr “SEO” Joe is happy!

Whose Happy?

Mr “SEO” Joe is happy!

The Users of atlassian.com are Happy!

Thanks for listening!

Questions?

Be sure to check out:Continuous Media Playback and

RequireJS ModulesDavid Pronk

David Pronk

html5 history api to ajaxify your magnolia website

Technology