Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
On Friday night I was at the Heart & Sole conference… It’s inaugural event at Portsmouth’s Spinnaker Tower. It was an excellent event and I think everyone seemed to enjoy themselves, learn something, and meet their peers. Tom & Alex, the organisers kindly invited me to give a talk at the conference. Now, this venue was incredible… I was talking 100m above the ground in a room with a panoramic glass wall, and a portion of a glass floor.
My talk was about one of the new javascript APIs in the new ‘HTML5’ spec. The new history API.
META GAME: 100 billion points for the first person to work out the connection between each image and each title..
Here are my notes for the talk :)
What is it?
HTML5
Javascript Object
What is the Problem?
AJAX loads new content
Back button breaks
People use the back button A LOT
Copy & paste breaks
Surely this isn’t new
Location.hash is one solution to this problem
If it ain’t broke
It isn’t perfect. Was pretty much a hack. Location.hash was not implemented for that purpose.
It still requires javascript on reload. So this is bad for accessibility and bad for google.
What does it do?
The history stack acts just like an array
You can push on to the stack and then it can pop off the stack on back or forward click
When would this be useful?
- Lightboxes
- Popup Logins
- Comments
- Pagination
Browser Support
Firefox 4+, Safari 5+, Chrome 7+
Not yet supported in any Internet Explorers or Opera
How?
Listen for a click event on a link. Don’t use other elements if you want the content indexable and accessible.
If not javascript continues on to the page.
Render differently on ajax request, [edit 30/01/11] so that only what needs to be returned is returned… You don’t need the static headers and footers, just the main content.
history.pushState(stateObj,title,url)
Listen for event
window.onpopstate = fn(evt)
Sites that use it
Flickr uses it for lightboxes but not yet for pagination
Google uses it for their 20 things I learned about the web html5 book
Github uses it for file browsing
sydlawrence.com uses it for navigation
Take a look at this demo here, and grab the code here
User Friendly
Back button is now operational
Much more accessible
Google Friendly
Much more accessible, copy & paste works
Friendly Friendly
Really easy to implement
Want to know more
